無料で使用でき、Web制作に関する機能が充実しているテキストエディタであるBracketsについてまとめていきます。

この記事でわかること!
  • Bracketsのダウンロード方法、インストール方法
  • Bracketsでのフォルダ管理のやり方
  • Bracketsで拡張機能をインストールする方法
  • Bracketsで画面分割をする
  • 編集したHTMLをプレビューする方法
  • Bracketsを使ってみた感想

Bracketsってどんなエディタ?

Bracketsとはオープンソースのテキストエディタです。オープンソースということは、ソースコードを商用・非商用問わず、利用、修正、頒布することを許可し、個人や団体が自由に利用できるということです。

Bracketsは無料で利用できるエディタですが、Web制作に関する機能が充実していて、プロのWebデザイナーにも広く利用されているようです。

Bracketsはコーディングに特化したエディタ

OSに標準搭載されたテキストエディタと違い、コーディングに特化していることが特徴です。

たとえば、HTMLやCSSファイルを編集する場合、コードに色がつくため視認性が向上しますし、エラー箇所を通知してくれたりと、プログラマーにとってはかなり重宝します。

Bracketsの編集画面が以下です。コードに色がつくのでコーディングがしやすいです。

また、拡張機能をインストールすることで、利便性をより高めていくことも可能です。拡張機能の追加方法は以降で解説します。

Bracketsのダウンロード方法からインストールまで

それではBracketsをダウンロードしてみましょう。Bracketsの公式サイトにアクセスしてください。すると、次のような画面になると思います。赤枠で囲んだボタンをクリックして、最新版のBracketsをダウンロードします。

次に、ダウンロードしたインストールファイルを任意のディレクトリ(フォルダ)に配置し、実行しましょう。

あとは画面の指示に従って、インストール先を選択し、インストールを続行します。これでBracketsのダウンロードとインストール作業は完了となります。

Bracketsの使い方

ここからは神エディタであるBracketsの使い方について解説していきます。Web制作する上で便利な機能を数多く備えていますが、1つ1つの操作方法はとっても簡単です。画像付きで解説していきます。

Bracketsの編集画面とフォルダ管理のやり方

インストールしたBracketsを実行してみると、次のような画面が出てきます。これが編集画面です。とってもシンプルですね。

Bracketsの優れた点として、サイドバーでフォルダの管理ができることです。様々なフォルダを行き来し、開きたいファイルを簡単に開けるので、Web制作においても重宝すると思います。

下画像の赤く囲んだ場所がサイドバーです。フォルダの階層構造が図のように表示されるので、今開いているファイルがどのファイルなのか認識しやすくなります。

フォルダ管理をする場合には、[ファイル]メニューから[フォルダーを開く]をクリックして、開きたいフォルダを選択するだけです。

選択したフォルダ配下のフォルダ、ファイルがサイドバーに表示されます。

Bracketsで拡張機能をインストールする方法

Bracketsはそれだけでも十分便利な機能を備えていますが、拡張機能をインストールすることでさらに利便性が増します。拡張機能のインストール方法について解説していきます。

まず[ファイル]メニューから[拡張機能マネージャー]をクリックします。

 

下記画像の右上にある検索エリアにインストールしたい拡張機能の名称を入れます。

すると関連する拡張機能が一覧に表示されますので、目的の拡張機能で[インストール]ボタンをクリックすると完了です。

このとおり拡張機能は非常に簡単にインストールできるので、色々試してみると良いですね。

おすすめの拡張機能

Bracketsで利用可能な拡張機能は数多く存在します。いきなり複数の機能を入れても使いこなせないと思うので、僕が使ってみて良かった拡張機能をご紹介します。

① 全角空白・スペース・タブ表示

Bracketsのデフォルトの状態だと、全角空白、半角空白、タブの見た目に違いがなく、同じように表示されます。HTMLなどのコーディングにおいて、これらの区別は大切なので、できれば区別して表示させたい。。

それを可能にする便利な拡張機能として、「全角空白・スペース・タブ表示」があります。先ほど説明した拡張機能のインストール画面で、検索エリアに「全角空白・スペース・タブ表示」と入力してみてください。

インストールすることで、編集画面での表示が次のように変化します。

これで全角空白、半角空白、タブの区別が可能となりました。コーディングミスも見つけやすくなるかと思います。

② Documents Toolbar

次に入れておくと便利な拡張機能が「Documents Toolbar」です。これを入れると、Bracketsでファイルを編集する際に、複数のファイルをタブとして開いておくことが可能になります。具体的には次のような感じです。

Bracketsはデフォルトの状態だと、ファイル間の移動はサイドバーでその都度行うことを想定しています。

ですが、インターネットのブラウザのように、画面上部にタブとして表示されていた方が慣れていますし、直観的な作業ができますよね。

ということで入れておいて損はないかと。

Bracketsで画面分割をする方法

Bracketsで画面分割する方法をご紹介します。といってもとっても簡単なので、すぐできるかと。

[表示]メニューから「分割なし」「左右分割」「上下分割」を選択できます。

左右分割したのが以下の画面です。

このように、左画面でHTMLの編集、右画面でCSSの編集というように作業効率が向上します。

Bracketsでフォントサイズを変更する

Bracketsのデフォルトの状態だと、編集画面のフォントサイズが若干小さいです。フォントサイズは簡単に変更できるので、必要に応じて変更しましょう。

[表示]メニューからフォントサイズを自由に変更可能です。

編集したHTMLファイルをプレビューする方法

Bracketsの凄いところは、編集したHTMLをすぐにプレビューできるところです

[ファイル]メニューから[ライブプレビュー]を選択するか、下記画像右側の「稲妻マーク」をクリックでプレビューできます。

ちなみにライブプレビューはブラウザGoogle Chromeで起動するので、インストールされていない方はインストールしてみましょう。

まとめ:Bracketsを使ってみた感想

最高!!この一言に尽きますね。

フリーのテキストエディタ「Brackets」の使い方の紹介をしてきました。

使ってみた感想としては、フリーとは思えないくらい便利な機能を備えていて、Web制作の効率が非常に上がると感じています。とくにHTMLを編集してすぐライブプレビューが見れるところに魅力を感じます。

余計な機能がごちゃごちゃしているということもなく、Web制作をこれから始められる方にとっては始めやすいエディタであると感じます。

また拡張機能がたくさんあるので、自分にあった機能を1つ1つ選ぶ楽しみもあり、成長していくエディタだな、、と感じました。

より高度な機能を備えた有料版のエディタに手を出すのはやりたいことが増えてからで問題ないかと思います。

おすすめのプログラミングスクール

本気でプログラミングを学び、IT企業転職、フリーランスで稼ぎたい方向け。元プログラマーおすすめのプログラミングスクールを4社(無料体験あり)ご紹介します。

プログラマーおすすめのプログラミングスクール4社:無料体験あり!