初心者にオススメのテキストエディタ・Bracketsのインストール方法

Bracketsは初心者の方にオススメのテキストエディタです。無料で使えて、魅力的な機能も盛りだくさん!そのおすすめポイントやインストール方法を解説していきます。

Bracketsを初心者にオススメする5つのポイント

  1. 日本語対応している
    デフォルトで日本語メニューになっています。
    Sublime Textなど他のエディタでは自分で日本語化の設定が必要なものもありますが、Bracketsなら初期設定の手間が省けます。
  2. ライブプレビュー
    HTMLやCSSを編集&保存すると自動でブラウザに反映されます。ブラウザリロードの手間いらず!
  3. コードのハイライト
    HTMLやCSSを編集中、該当箇所がブラウザ上でハイライトされます。今どこを編集しているのかわかりやすいので、ミスも防げますね。
  4. 動作が軽量
    さくっと起動してさくっと編集できる!多機能なのに軽いって素敵です。
  5. クイック編集が便利
    クイック編集が何かと便利!
    例えばCSSで色コードを右クリック→クイック編集を選択すると、カラーピッカーがあらわれ、簡単に色の変更をすることができます。
    ちなみにショートカットは【Ctrl + E】です。

 

Bracketsのインストール方法

Bracketsの公式サイト( http://brackets.io/index.html )にアクセスします。
「Brackets 1.13をダウンロード」ボタンを押すとすぐにダウンロードが始まります。
(※1.13というのはバージョン名です。ダウンロード時期によって数字が変わりますが、問題ありません。)
ファイルサイズが大きい(約73MB)ので、ネットワーク環境の良いところでダウンロードしましょう。

 

「Brackets.Release.1.13.msi」というファイルがダウンロードされていると思います。

 

ダブルクリックするとインストールが始まります。
インストール先フォルダや、オプションが聞かれますが、特に変更はしなくて大丈夫です。
チェックボックスにはチェックを入れたまま、「Next」ボタンを押します。

 

次の画面では「Install」ボタンを押してください。
ユーザーアカウント制御画面が出た場合(「このアプリがデバイスに変更を加えることを許可しますか?」などと聞かれた場合)、「はい」を押して次に進みます。

 

インストールが始まります。

 

最後に「Finish」ボタンを押してください。これでBracketsのインストールは完了です。
Windowsの場合、スタートメニューやスタート画面にBracketsが追加されていると思います。

 

起動してみよう

初回起動時、サンプルのHTMLファイルが開かれます。
右上の「Bracketsの正常性レポート」は「×」ボタンで閉じてしまってOKです。

 

早速、画面右上のアイコンをクリックして、Bracketsオススメ機能のひとつであるライブプレビューを使用してみましょう。
※ライブプレビュー機能を利用するためには、指定のブラウザ(Google Chrome)が必要です。あらかじめGoogle ChromeをPCにインストールしておいてください。

 

「ようこそ」のポップアップが表示されたら、「OK」ボタンを押します。

 

自動でGoogle Chromeが立ち上がります。Google Chromeに表示されているページは、BracketsのサンプルHTMLの内容です。

 

サンプルHTMLを編集してみます。
ここでは<h1>を編集していますが、編集箇所がブラウザ上で自動でハイライトされます。なおかつ、リアルタイムに修正が反映されます!
これがライブプレビュー機能です。

 

まとめ

今回は初心者にオススメのテキストエディタ・Bracketsを紹介しました!どのテキストエディタを入れようか迷っている方、他のテキストエディタからの乗り換えを検討している方、ぜひ一度入れてみてください。
私はSublime TextからAtomを一瞬経てBracketsにたどり着きました!

HTMLやCSS、JavaScriptの学習をしている方に向けて無料のコーディング課題をKROWLサイトで配布中!
難易度別に用意してあるサンプルサイトのデザインデータを元に、サイト制作のスキルを磨こう!

関連記事