iscle [イズクル] - あなたの生活に役立つネタを!

高機能なのに軽い無料エディター『Brackets』は作業が捗る!

竹中文人
執筆者:
[最終更新日]2015/07/09
[カテゴリ]Web・IT

軽くて高機能なエディター

Webサイトを作成したり、何かしらのプログラムをする時に必要不可欠なものにエディターがあります。パソコンに最初から入っているようなメモ帳でも作成はできますし、『秀丸エディター』や『サクラエディタ』のような少し機能が付いている軽いエディターを利用している方も多いようです。また『Adobe Dreamweaver』のような高額&高機能なソフトもありますね。

どのエディターを利用するかで作業効率が変わってくるので、エディター選びというのはとても大切だと思います。私の場合は複雑なプログラムをしないので、すぐに起動する軽いエディターが好みでサクラエディタを以前まで使用していました。Adobe Dreamweaverは高機能で便利ですが、起動するのにやや時間がかかるのであまり利用していませんでした。

ただメモ帳に近いサクラエディタだと、Webサイトを作成するのには機能として物足りなさを感じてしまいます。そこでWebサイト作成に便利な機能があり、かつ軽いエディターを探して気に入ったのが『Brackets(ブラケッツ)』です。

無料なのに高機能で軽いエディター

BracketsはAdobeが提供している無料エディターです。Adobeが提供するだけあって使いやすく機能も豊富。Dreamweaverほど機能はないのかもしれませんが、立ち上がりも軽いので「このコードを少し編集したい」と思った時にすぐに起動できるのが良いです!
Bracketsのダウンロードはこちら

今回はBracketsの便利な基本機能をご紹介致します。

CSSやJavaScriptがすぐ編集可能

HTMLの編集中に Ctrl+E キーを押すと、選択している要素のCSSやJavaScriptが編集できます。下図であれば h3タグ のCSSが表示され編集可能な状態です。
brackets01

色の確認と編集がすぐできる

16進数等で表現された色が、マウスオーバーするだけですぐに確認できます。色の確認が簡単にできるのは非常に便利です!
brackets02

さらに右クリックから「クイック編集」を選択すると、その場で色の変更が簡単にできます。
brackets03

ライブプレビュー

HTMLの編集状況が即座にプレビューされる機能です。いちいちブラウザで更新ボタンをクリックする必要がないので作業が捗ります!
brackets04

コードの補助

コードは全て自分で記入する必要はありません!コードの候補が表示される補助機能があるかないかでは、作業効率に大きな差がでます。
brackets05

拡張機能で自分好みのエディターにカスタマイズ

Bracketsは様々な拡張機能が用意されており、自分の使いやすいように機能を追加したりすることができます。例えばWordPress用のコードが補助されるようにしたり、タグのインデントを自動で揃える機能を追加するなど、便利な拡張機能がたくさんあります。またテーマも変更することが可能です。
brackets06