初心者にもおすすめ!無料のコードエディターBracketsの使い方

Pocket

初心者にもおすすめ!無料のコードエディターBrackets
最近1.0にアップデートされたBrackets。AdobeのツールでDreamweaverというのがありますが、こちらは無料のコードエディターとなっています。

無料と言っても様々な便利機能が搭載されており、日本語にも対応しているので初心者にもおすすめ!WindowsでもMacでも使えて、動作も軽量なのでさくっとHTMLコーディングしたい場合は使えます。

使ってみた感想と合わせて、簡単な使用方法を紹介します。

無料エディター Bracketsの使い方

Bracketsのダウンロードとインストール

まずは公式サイトから本体をダウンロードしましょう。

ダウンロードはこちら:Brackets

インストールは通常のソフトと同じなのでとくに問題ないと思います。
Bracketsのインストール

Bracketsでファイルを開いてみる

BracketsでHTMLやCSSファイルを開くにはメニューからファイル->開くを選択するか、
bracketsでHTMLファイルを開く

開きたいファイルをドラッグ&ドロップします。
bracketsでフォルダを開く

同じ方法でフォルダごと開くこともできるので、プロジェクトファイルをフォルダにまとめてる場合はこちらの方が便利かも。フォルダを追加すると新しいウィンドウが立ち上がるのではなく、ドロップダウンリストで切り替えられるようになってます。
brackets フォルダの選択はドロップダウン

言語設定やインデントの変更方法

BracketsではHTMLとCSSだけでなく、他の言語にも対応しています。ファイルの言語設定を変更するには右下にあるセレクタから選択するだけ。
bracketsでファイルの言語を変更

その横にあるセレクタではインデントの設定が可能。タブかスペースを選んで、幅の値も自由に設定できます。
bracketsでインデントの設定

カラム分割で効率良く編集

Bracketsではウィンドウを分割表示することができます。左上のアイコンんをクリックして、左右か上下を選べばOK。2つのファイルを同時にチェックできて便利。
Bracketsでカラム分割表示

Bracketsの便利機能まとめ

Bracketsの便利機能1:HTMLやCSSの自動補完

コーディング時に欠かせない機能の1つが自動補完。途中までコードを書くと候補を表示してくれる便利なものですが、Bracketsにも搭載されています。
bracketsのオートコンプリート機能

Bracketsの便利機能2:CSSスタイルに簡単アクセス

コーディングをしていて意外と不便なのが、スタイルへのアクセス。どのファイルのどこに記述されているかをいちいち検索したり、長いファイルをスクロールして探す必要があります。

Bracketsでは要素で指定されているスタイルを簡単に表示可能。スタイルを表示したいところにカーソルを置いてcmd+Eを押すだけ。指定されているCSSにアクセスするだけでなく、スタイルを追加することもできるのでかなり便利ですね。
Bracketsでcssに簡単アクセス

Bracketsの便利機能3:ライブプレビュー

こちらの記事でブラウザ上で見た目をチェックする方法を紹介しましたが、Bracketsならさらに便利に。

ライブプレビューを起動することで編集中のファイルがブラウザで立ち上がり、コードを変更するとリアルタイムで見た目も変わります。
Bracketsでhtmlをリアルタイムプレビュー

ライブプレビューを起動するには、右上にある稲妻マークを押すだけです。
Brackets-preview

Bracketsの使い方まとめ

Brackets以外にもたくさんコードエディターがありますが、その中でも結構いい感じのエディターになってると思います。HTML・CSSの編集ならライブプレビューやCSSへのクイックアクセスを使うことで、かなり効率化できそうですね。

今回は紹介していませんが、EmmetでHTMLを素早く記述したり、LESSやSASSなどでCSSを効率良く記述することもできます。コーディングに慣れてきたらこれらの高度な方法にも挑戦してみて下さい。