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

高機能なのに軽くて高機能な無料エディター『Brackets』は作業が捗る!
(YouTube, AdSense, Play 公認エキスパート)
2021年03月02日 in Web・IT
記事内にPR・広告が含まれる場合があります

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

執筆者情報
2004年から当サイト「iscle」を始めた管理者。Google 公認のプロダクトエキスパートとして、YouTube、Google AdSense、Play の公式コミュニティで活動中。スマホアプリ、Web ツールの使い方や最新情報を中心に発信しています。