テキストエディタのBracketsを使えるようになりたい。初心者の私に使い方の基本を教えてください
こういった疑問に答えます。
本記事では、テキストエディタ「Brackets」の使い方を解説します。
初心者向けに分かりやすく書きましたので、ぜひご覧ください。
Bracketsとは？
Bracketsは、Webサイトの設計が簡単にできる、軽量で強力なオープンソースのテキストエディタです。
標準で基本機能が備わっていて、使いやすいので、初心者には最適です。
テキストエディタの外観と公式サイトへのリンクは以下のとおり。
Bracketsの特徴的な機能は以下の２つ。
- ライブプレビュー：編集内容をブラウザでリアルタイムで確認できる
- CSSクイック編集：HTMLエディタ内で、関連するCSSを同時編集できる
補足情報
Mac、Winの両OSに対応で、38種類以上の言語をサポート。拡張機能も豊富で、中上級者まで使える万能のエディタ。Adobe社提供。
これで「無料」とは、アンビリーバボー！
Bracketsの使い方①｜ダウンロード
まずはセットアップから。
本記事では「Mac」を使った時の画像です。ご了承ください。
Bracketsのダウンロード
Bracketsの公式サイトにアクセスしたら、ダウンロードボタンをクリックします。
Bracketsのインストール
ダウンロードしたファイル（xx.dmg）をクリックすると、以下の画面が出るので、ドラッグ＆ドロップします。
インストール完了後に、Bracketsのアイコンをクリックします。
以下の画面が出たら「開く」をクリックします。
Bracketsが起動し、以下の画面が表示されるでしょう。
以上でセットアップは完了！
Bracketsの使い方②｜ファイル管理
ファイル管理について解説します。
作業するフォルダの指定
これからあなたが作業するフォルダを指定しましょう。
まずデフォルトでは、サンプルファイル（index.html、main.css）が表示されてます。
このファイルはどこに置かれているんでしょうか？ファイルの上で２本指クリック > [Finderで表示]をクリックしてみましょう。
すると、サンプルファイルが置いてあるフォルダが開きます（2020/8月時点では、赤字の場所）。
上記のフォルダとは別に、今後あなたが作業するフォルダを作って、そのフォルダを指定しましょう。
やり方は２通り。
方法①：サイドバーから開く
左サイドバーにある[▼マークのついた所]をクリック > [フォルダを開く]をクリックします。
方法②：メニューから開く
PC上部のメニューで、[ファイル] > [フォルダーを開く]をクリックします。
方法①②のどちらでもOK。全くの新規フォルダ（例：BracketsWork）を指定すると、こんな感じに。
新規にファイルを作る
次にファイルを作ってみましょう。
メニューで[ファイル] > [新規作成]をクリックします。
左サイドバーのファイル名称が「名称未設定-1」に変わり、エディタにテキストを入力できるようになります。
ファイルを保存する
文字を適当に入力したら、ファイルを保存してみましょう。やり方は２通り。
方法①：拡張子を直打ちする
メニューで[ファイル] > [名前をつけて保存]をクリックします。
ファイル名を拡張子つきで直打ちします。HTMLファイルならば「.html」を、 CSSファイルならば「.css」を付けて、[保存]ボタンをクリックします。
ファイルが保存され、左サイドバーにファイル名が表示されます。黒ポチ（上部中央のファイル名の横）が消えると、保存された証拠です。
方法②：ファイル種類を先に指定する
右下の赤枠の「Text」ボタンをクリックして、メニューの中から該当するファイル種類を選びます（例：HTML）。
表示が変わり、HTMLファイルと認識されました。
この状態で、方法①と同様に、PC上部のメニューから[ファイル] > [名前をつけて保存]をクリックします。
すると今度は、デフォルトで拡張子が表示されているので、ファイル名だけ入力して[保存]ボタンをクリックします。
ファイルの保存は、ファイル作成時にまずやっておきましょう。
ファイルの種類を設定すると、入力補助機能（後ほど紹介）が使えて効率的ですから。
以上、ファイル管理でした。
Bracketsの使い方③｜ライブプレビュー
いよいよBracketsの売りである「ライブプレビュー機能」の使い方について。
今回はデフォルトで用意されてるサンプルファイル（index.html、main.css）を使って説明しますね。
ライブプレビューを表示する
index.htmlを開いた上で、画面右上にあるライブプレビューボタン（イナズマの形）をクリックします。
ブラウザが別ウィンドウで立ち上がり、コード内容が表示されます。
たったこれだけ。めちゃカンタン！
しかも、このライブプレビューは、エディタでコードを変更すると、即座にブラウザに反映されるのがすごいところ！
ファイルの保存も、リロード用のボタンを押す必要もないので、サイト設計がスピードアップします。
なお、ライブプレビューの表示中は、イナズママークがオレンジになってます。
ライブプレビューで強調表示させる
Bracketsのライブプレビューは、強調表示もすごいんです。
例えば、HTMLファイルのh1タグの行にカーソルを移動させると↓
ライブプレビュー画面で、その箇所が青枠で強調表示されます。
この強調表示の機能は「ライブプレビューハイライト」と呼ばれ、HTMLファイルだけでなくcssファイルも対応してます。
強調表示は、逆も可能です
ライブプレビューしているブラウザで、例えばh2タグの箇所をクリックすると↓
エディタ画面でそれに該当するタグが、ハイライト表示されます（リバースインスペクトとよばれる機能）。
Bracketsは、なんといってもこの「ライブプレビュー機能」が秀逸で、作業効率がめっちゃ上がりますよ。
ライブプレビューを終了する
イナズママークをもう一度クリックすれば、マークがオレンジから白に戻り、ライブプレビューは終了します。
※ライブプレビュー側をいきなり閉じると、エラーが出る仕様みたい…。
以上、ライブプレビューの使い方でした。
Bracketsの使い方④｜CSSのクイック編集
次は、CSSクイック編集の使い方について解説します。
この機能もBracketsの売りですね。
CSSのクイック編集を使う
まずHTMLファイルを開いて下さい。
「タグ／class／id」のいずれかの上にカーソルを置き（例としてh1タグ）、２本指クリックをして、メニューの中から[クイック編集]をクリックします。
すると、クイック編集用のインラインエディタが開き、関連するCSSが全て表示されます。
このインラインエディタ上でCSSを直に編集できるのがBracketsのスゴイところ！
試しに、以下のCSS記述で、カラーコードを黒から赤に変更すると↓
ライブプレビューにCSSの編集がすぐ反映されました。
カンタンすぎでしょ！
クイック編集画面を閉じるには、左上の[×]もしくはEscキーを押すこと。（別に開いたままでも構いません）
CSSを新規に作ることもできる
このクイック編集は、CSSコードの編集だけでなく「新規作成」も可能です。
先ほどと同じ手順で、CSS編集画面を開き、[新規ルール]をクリックすると↓
h1の記述枠が新規に作られました。
このように、BracketsのCSSクイック編集は、関連するCSSコードがHMTLファイル内に自動で表示されるため、
CSSファイルを開いたり、対応するCSSコードを探したりする必要がなく、作業効率が向上します。
ぜひ活用してみて下さい。
Bracketsの使い方⑤｜クイックビュー
続いては、クイックビューの使い方を解説します。
色のクイックビューを使う
CSSファイル（またはHTMLファイル）を開いて下さい。
色コードを記述した箇所にカーソルを当てると、色のクイックビュー（小窓）が表示されます。
もし色を変更したい時は、[クイック編集]をクリックします。
すると、色の編集画面がエディタ内に表示されましたね。
ここで決定した色が、すぐさまコードに自動反映されます。
このように、「色のクイックビュー」を使えば、カラーコードを覚えていなくても、カンタンに色の設定が可能です。
画像のクイックビューを使う
画像のクイックビューも同様。
エディタ上で、画像リンク上にカーソルを当てると、その画像のプレビューがサムネイルで表示されます。
このクイックビューを使えば、Webサイトの設計がグッと捗りますね。
Bracketsの使い方⑥｜その他
最後にいくつか、便利な機能をご紹介。
入力補助を使う
他のエディタと同様、Bracketsにも入力補助が備わってます。
HTMLファイルの場合
例として「h2タグ」で説明します。エディタ上で＜ と入力すると、タグの候補が表示されます。
＜ｈ まで入力すると、「hで始まるタグ」に絞りこまれましたね。
その表示をヒントに直打ちを続けてもいいし、該当する表示（今回はh2）をクリックして、残りのタグを自動入力してもOK。
消えた入力補助を再表示するには、「Ctrl+Space」を打ち込みましょう。
開始タグの＞を入力すると、終了タグの＜/h2＞が自動入力されるので楽ちんです。
CSSファイルの場合
テキストを入力した時点で、候補が表示されます。
こんな感じ。
画面を２分割して使う
２つのファイル（例：HTMLとCSS）を見比べながら作業できるので便利です。
左右に分割する
左サイドバーの上部にあるボタンをクリックし、表示されたメニューの中で、[左右分割]をクリックします。
すると、エディタが左右に２分割されます。左サイドバーには、「左／右」の表示が登場します。
「左」グループのファイルの中から、エディタの右半分に表示させたいファイルをつまんで、「右」にところに移動させます。
すると、そのファイルがエディタの右半分に表示されました。
画面の上下分割も同様です。
カーソル行をハイライトする
メニューから [表示] > [アクティブな行をハイライト] をクリックします。
すると、カーソル行がハイライトされて、視認性がアップします。
背景色を変える
背景色を変えたい人向け。
メニューから [表示] > [テーマ] をクリックします。
デフォルト以外（例：Brackets Dark）を選択して [完了] をクリックします。
がらりと雰囲気が変わりましたね。
以上、Bracketsの使い方でした。
まとめ：Bracketsはおすすめのエディター
記事のポイントをまとめます。
- Bracketsは、Webサイトの設計が簡単にできる、軽量で強力なテキストエディタ
- まずは初期設定（ダンロード＆インストール）から始めよう
- 次に、フォルダ設定とファイル管理をマスターしよう
- メインは、特徴的なライブプレビューとCSSクイック編集の使い方を理解しよう
上記の感じ。
冒頭で述べたとおり、Bracketsの良いところは、デフォルトでメイン機能が備わっていること。
そのまま使っても充分ですけど、プラグインを入れると、さらに使いやすくなりますよ。プラグインを入れるのはカンタンなので、以下の記事もあわせてご覧下さい。
