最近1.0にアップデートされたBrackets。AdobeのツールでDreamweaverというのがありますが、こちらは無料のコードエディターとなっています。
無料と言っても様々な便利機能が搭載されており、日本語にも対応しているので初心者にもおすすめ！WindowsでもMacでも使えて、動作も軽量なのでさくっとHTMLコーディングしたい場合は使えます。
使ってみた感想と合わせて、簡単な使用方法を紹介します。
無料エディター Bracketsの使い方
Bracketsのダウンロードとインストール
まずは公式サイトから本体をダウンロードしましょう。
ダウンロードはこちら：Brackets
インストールは通常のソフトと同じなのでとくに問題ないと思います。
Bracketsでファイルを開いてみる
BracketsでHTMLやCSSファイルを開くにはメニューからファイル->開くを選択するか、
開きたいファイルをドラッグ＆ドロップします。
同じ方法でフォルダごと開くこともできるので、プロジェクトファイルをフォルダにまとめてる場合はこちらの方が便利かも。フォルダを追加すると新しいウィンドウが立ち上がるのではなく、ドロップダウンリストで切り替えられるようになってます。
言語設定やインデントの変更方法
BracketsではHTMLとCSSだけでなく、他の言語にも対応しています。ファイルの言語設定を変更するには右下にあるセレクタから選択するだけ。
その横にあるセレクタではインデントの設定が可能。タブかスペースを選んで、幅の値も自由に設定できます。
カラム分割で効率良く編集
Bracketsではウィンドウを分割表示することができます。左上のアイコンんをクリックして、左右か上下を選べばOK。２つのファイルを同時にチェックできて便利。
Bracketsの便利機能まとめ
Bracketsの便利機能１：HTMLやCSSの自動補完
コーディング時に欠かせない機能の１つが自動補完。途中までコードを書くと候補を表示してくれる便利なものですが、Bracketsにも搭載されています。
Bracketsの便利機能２：CSSスタイルに簡単アクセス
コーディングをしていて意外と不便なのが、スタイルへのアクセス。どのファイルのどこに記述されているかをいちいち検索したり、長いファイルをスクロールして探す必要があります。
Bracketsでは要素で指定されているスタイルを簡単に表示可能。スタイルを表示したいところにカーソルを置いてcmd+Eを押すだけ。指定されているCSSにアクセスするだけでなく、スタイルを追加することもできるのでかなり便利ですね。
Bracketsの便利機能３：ライブプレビュー
こちらの記事でブラウザ上で見た目をチェックする方法を紹介しましたが、Bracketsならさらに便利に。
ライブプレビューを起動することで編集中のファイルがブラウザで立ち上がり、コードを変更するとリアルタイムで見た目も変わります。
ライブプレビューを起動するには、右上にある稲妻マークを押すだけです。
Bracketsの使い方まとめ
Brackets以外にもたくさんコードエディターがありますが、その中でも結構いい感じのエディターになってると思います。HTML・CSSの編集ならライブプレビューやCSSへのクイックアクセスを使うことで、かなり効率化できそうですね。
今回は紹介していませんが、EmmetでHTMLを素早く記述したり、LESSやSASSなどでCSSを効率良く記述することもできます。コーディングに慣れてきたらこれらの高度な方法にも挑戦してみて下さい。
