誰かに見てもらうための、簡単なデザイン

HTMLやCSSを書き慣れていない人にオススメ、無料のテキストエディタ「Brackets」

私は、普段の制作業はMacを使ってます。
ホームページを作る時、HTMLやCSS(コード)を書くのに「Coda2」というMac専用の有料のアプリを使っていましたが、無料のテキストエディタ「Adobe Brackets」の存在を教えていただき、「タダだしデザインも綺麗だから使ってみっか(・∀・)!」と使ってみたところ、なかなか良かったので紹介も兼ねて記事にします。
Adobe Bracketsは前々からあるアプリで、今更記事にするの?ってカンジですが、私の周りには使ってる人があまりいません…。理由は様々あるようですが、HTMLやCSSをあまり書き慣れていない私(初心者…)が使ってみて、「これ、初心者さんにいいのでは?」と思った次第です。結構楽に書ける気がしました。
MacでもWindowsでも使えて、なにせタダ!初心者さんにも導入しやすいんじゃないかと思います。
ホームページ作りたいけど、エディタって何がいいの?と思ってらっしゃる方に、是非おすすめしたいです。
というわけで、初心者が使ってみた感想と特徴などのレビューです。
ちなみにスクリーンショットはMacOS Mavericksで撮っています。

41_biginnerbrackets_02

まずはダウンロード

こちらのページからBracketsをダウンロードします。

Brackets

英語!英語!英語圏のアプリなので英語ですが、アプリ自体は日本語に対応しています(若干日本語入力に弱いところがありますが、メニューなどはきちんと日本語表示されます)。
「Download Brackets」ボタンからダウンロードしたら、インストールして立ちあげます。

brackets_start

「CODE THE WEB」のロゴ。きゃわたん。このロゴの部分にファイルが展開されていきます。

フォルダーを開く

41_biginnerbrackets_06

何気に感動した機能。Bracketsは、通常の「(ファイルを)開く」に加えて「フォルダーを開く」コマンドがあります。このコマンドや、似たような機能があるエディタは他にもありますが、通常のファイルメニューの中に普通に入っているのが分かりやすい。
「フォルダーを開く」を選ぶと、指定したフォルダ内に入っているファイルとフォルダが左側の黒い部分に全て追加されます。
ホームページを作る時って、1つのフォルダにファイルをどんどん追加していって、そのファイルをちまちま触っていくので、一気に開けて、必要に応じて切り替えができるのは嬉しいです。

41_brackets_leftfile

左側に追加されたファイルは、ダブルクリックすると「作業中ファイル」と書いてある下の部分に追加されます。
「作業中ファイル」に追加されたファイルは「control+tabキー」を押せば、ファイルの切り替えができます。
よく使うファイルは「作業中ファイル」に登録しておいて、あまり使わないものはそのままで、使うものは適宜切り替えして書いていきます。

それで、まぁ、タグを書いていくわけです。

HTMLコードを書く

41_biginnerbrackets_09

ファイルを選ぶと、右側のグレーの画面にコードが出てきます。ちゃんと色分けされていますし、色もあまりキツくないので可愛い。
便利と思ったのは、タグを書くと閉じタグを自動で挿入してくれたり(例・<h2>って打つと</h2>って自動で入力される)、開始タグと閉じタグをハイライトしてくれるところですかね。私のような初心者は「あれ、このタグ閉じたっけ?」とか、閉じタグを探して迷子になったりとかするんですが、この機能のお陰でそれが回避できます。
開始タグもしくは閉じタグにカーソルを持っていくと、緑色にハイライトしてくれます。

かゆいところに手が届く補完機能

41_bracketsfilehokan

こいつがねー、便利!!
<a href=””>とか<img src=””>とかで他のファイルや画像を読み込むタグを書くことがよくあると思うんですが、フォルダ名、ファイル名などの頭文字を入れていくと…こうやってリスト出してくれるんですよ…!
これ助かりました。無料なのにこんなことまでしてくれるなんて。
「あの画像名なんだっけ?」とか「ファイル名はコピペで貼り付け!」とかしなくてもいいので、スペルミスも軽減できますね。

41_brackets_imgpopup

挿入した画像ファイルは、ファイル名にマウスカーソルを乗せる(マウスオーバーさせる)と、どんな画像かをポップアップ表示しれくれます。サイズも書いてあります。サクッと確認できて便利ー。

41_htmltaghokan

もちろんHTMLタグの補完もしてくれます。打ってるそばから候補を表示してくれます。

CSSを書く

41_stylecss_all

CSSも色分けされて書くことができます。もちろん補完機能もあるので、文字を打ってるそばからコードの候補が挙がってきます。
それ以外に便利な機能が。

41_css_colorpopup

これも、HTMLの画像のポップアップ表示と同じで、色名(コード)にマウスカーソルをあてると、その色がポップアップ表示されます。どんな色か確認ができますね。

41_stylecss_colorpicker

色コード部分にカーソルを持ってきて「command(WindowsならWindowsキー)+E」を押すと、カラーピッカーが表示されます。
色の調整もパパっとできてしまいます。しかも直感的に。

名物機能、CSSを編集するときの「command+E」

Bracketsを使う上で、覚えておきたいのが「command(WindowsならWindowsキー)+E」で呼び出せる機能。これがBracketsさんもゴリゴリ推してる大きな特徴です。
先ほどのように、カラーピッカーを表示させる他、HTMLファイルを編集しながらCSSも編集できるのが魅力。

41_htmlcsshensyuu

HTMLの編集画面で、CSSの記述があるところ。
idとかclassとか、CSSの指定が書いてあるところにカーソルを持っていって「command+E」を押すと、下からにゅるっとCSS編集画面が出てきます。
ここで、ファイルを切り替えることなくすぐにその箇所のCSSを編集して、保存することができます。
これ便利ですよね…ちょっとマージン広げたい、とか、線をもう1px太く…とか、ちょっとした修正をサクッとできます。
この機能を使うためには、HTMLファイルのhead部分に、あらかじめ<link rel=”stylesheet” href=”ファイル名.css”>などと、対応するCSSファイルを読み込むタグを書いておかなければいけません。それでCSSファイルを読み込み、そのCSSファイルの中に対応するCSSの記述があれば、下ににゅるっと出してくれます。

41_htmlcssshinki

もしCSSファイルの中に対応する記述がなければ、新規ルールとして追加することができます。
追加したルールは、対応するCSSファイルの一番下に追加されます。

初心者で、そんなにゴリゴリコーディングしないよーって方なら、こんだけ機能があれば快適にHTMLやCSSを書けるんじゃないでしょうか…?

ライブプレビュー

41_biginnerbrackets_11

Brackets画面の右側にある稲妻マークをクリックすると、ライブプレビュー機能が使えます。
これをオンにしておくと、GoogleChromeが立ち上がり(すでに立ち上がってる場合は再起動されます…)、今開いているファイルをプレビューすることができます。
すごいのは、HTMLやCSSを書いたすぐそばから反映してくれること。保存とか、再読み込みとかしなくてもすぐに反映されるので、見ながらコード書いたりもできます。
ただ、欠点が…GoogleChromeでしか使えないことと、Chromeのデベロッパーツール(コードが正しく書けているかどうかを確認する、Chromeに最初からついている機能)との併用ができないこと…などがあって、私は使ってないです…。ブラウザが再起動されるのも地味に痛かったり。

拡張機能のインストール

41_biginnerbrackets_14

ちょっと慣れてきたら「拡張機能」なるものをインストールして、機能を追加することができます。
拡張機能のインストールは、稲妻マークの下のレゴブロックみたいなマークをクリックするとできます。

41_extention

こんな画面が出てくるので、インストールしたい拡張機能を検索したりします。が、ほとんど英語です。
私はよく分からないので、Emmet(長いタグを短い記号の羅列で効率よく書けるようにした機能)しか入れてないです。そんなにゴリゴリ使ったりしませんしおすし。
拡張機能も充実しているようです。
インストールも、インストールボタンを押せばサクッとできちゃいます。

Bracketsの難点…

こんな風に紹介した機能が気に入って使い始めたBracketsですが、なんでか周りの人は使っていない…Sublime Text使ってる人が多い…。Sublime Textは高機能なエディタですが、有料です。
Bracketsは無料でその割に結構高機能なのに、イマイチ流行らない理由としてツイッターで憶測された理由が「サーバーサイド言語に弱い」。サーバーサイド言語っていうのは、PHPとかですね。
HTML/CSS/JavaScriptを書くんだったらいいんですけど、PHPなどは、そのままでも書けることは書けますが、拡張機能を入れて環境を構築するなど、一手間必要なようです。しかも拡張機能って英語だし。
WordPressのコードとかめっちゃ書く人だったら、使いづらいのかなぁ…。
私はWordPressのPHP構文はコピペなので、今のところ不自由は感じていませんが…。
ゴリゴリコード書くエンジニアさんには、そんなことしなくても、もっと良いエディタがあるので、Bracketsよりもそっち使った方がいいんでしょうかね…。毎日使うものだったら、有料でも気に入ったものを入れたいですよね。

あとちょっと日本語入力に弱いです。変換候補がちゃんと表示されなかったり…。日本語入力の問題についてはBracketsの日本語の改行でカーソルがおかしくなる問題の対処法 – WEBCRE8.jpで紹介されています。使えないレベルではないですが、ちょっと気になります。これから改善されていくことを祈ります。

しかし、HTMLやCSS、JavaScriptで事足りるよ!あんまエディタ使わないよ!お金ないよ!という人にはBracketsは良いエディタだと思います。

私もまだまだ使いこなせてなくて、もっと便利な機能とか隠れてるかもしれませんが、ざっと使ってみてこんな感じでした。折角なのでまだしばらく使ってみたいと思います。

それでは!Have a nice design!