Bracketsの使い方|初心者用にダウンロードからわかりやすく解説

BLOG Editor Tool

Bracketsを使いたい人「テキストエディタのBracketsを使えるようになりたい。初心者の私に使い方の基本を教えて下さい。」

こういった疑問に答えます。

本記事の内容

こんにちは、ヒデハルです。
ブログ歴は1年ほど。

本記事では、テキストエディタ「Brackets」の使い方を解説します。

初心者向けに分かりやすく書きましたので、ぜひご覧ください。

Bracketsとは?

» Brackets

Bracketsは、Webサイトの設計が簡単にできる、軽量で強力なオープンソースのテキストエディタです。

標準で基本機能が備わっていて、使いやすいので、初心者には最適でしょう。

Bracketsの特徴的な機能

  • ライブプレビュー:編集内容をブラウザでリアルタイムで確認できる
  • CSSクイック編集:HTMLエディタ内で、関連するCSSを同時編集できる

補足情報

Mac、Winの両OSに対応で、38種類以上の言語をサポート。拡張機能も豊富で、中上級者まで使える万能のエディタ。Adobe社提供。

これで「無料」とは、アンビリーバボー!

Bracketsの使い方①|ダウンロード

まずはセットアップから。
本記事では「Mac」を使った時の画像です。ご了承ください。

Bracketsのダウンロード

» Brackets

上記の公式サイトにアクセスしたら、ダウンロードボタンをクリックしましょう↓

Bracketsのインストール

ダウンロードしたファイル(xx.dmg)をクリックすると、以下の画面が出るので、ドラッグ&ドロップ↓

インストール完了後に、Bracketsのアイコンをクリック↓

以下の画面が出たら「開く」をクリック↓

Bracketsが起動し、以下の画面が表示されるでしょう↓

以上でセットアップは完了!

Bracketsの使い方②|ファイル管理

ファイル管理について。

作業するフォルダの指定

これからあなたが作業するフォルダを指定しましょう。

まずデフォルトでは、サンプルファイル(index.html、main.css)が表示されてます↓

このファイルはどこに置かれているんでしょうか?ファイルの上で2本指クリック > [Finderで表示]をクリックしてみましょう↓

すると、サンプルファイルが置いてあるフォルダが開きます↓(2020/8月時点では、赤字の場所)

上記のフォルダとは別に、今後あなたが作業するフォルダを作って、そのフォルダを指定しましょう。

やり方は2通り。

方法①:サイドバーから開く

左サイドバーにある[▼マークのついた所]をクリック > [フォルダを開く]をクリック↓

方法②:メニューから開く

PC上部のメニューで、[ファイル] > [フォルダーを開く]をクリック↓

方法①②のどちらでもOK。全くの新規フォルダ(例:BracketsWork)を指定すると、こんな感じに↓

新規にファイルを作る

次にファイルを作ってみましょう。

メニューで[ファイル] > [新規作成]をクリック↓

左サイドバーのファイル名称が「名称未設定-1」に変わり、エディタにテキストを入力できるようになります↓

ファイルを保存する

文字を適当に入力したら、ファイルを保存してみましょう。やり方は2通り。

方法①:拡張子を直打ちする

メニューで[ファイル] > [名前をつけて保存]をクリック↓

ファイル名を拡張子つきで直打ちします。HTMLファイルならば「.html」を、 CSSファイルならば「.css」を付けて、[保存]ボタンをクリック↓

ファイルが保存され、左サイドバーにファイル名が表示されます。黒ポチ(上部中央のファイル名の横)が消えると、保存された証拠です↓

方法②:ファイル種類を先に指定する

右下の赤枠の「Text」ボタンをクリックして、メニューの中から該当するファイル種類を選びます↓(例:HTML)

表示が変わり、HTMLファイルと認識されました↓

この状態で、方法①と同様に、PC上部のメニューから[ファイル] > [名前をつけて保存]をクリックします。

すると今度は、デフォルトで拡張子が表示されているので、ファイル名だけ入力して[保存]ボタンをクリック↓

ファイルの保存は、ファイル作成時にまずやっておきましょう。

ファイルの種類を設定すると、入力補助機能(後ほど紹介)が使えて効率的ですから。

以上、ファイル管理でした。

Bracketsの使い方③|ライブプレビュー

いよいよBracketsの売りである「ライブプレビュー機能」の使い方について。

今回はデフォルトで用意されてるサンプルファイル(index.html、main.css)を使って説明しますね。

なお、ライブプレビュー対応のブラウザはCromeだけなので(2020/8月時点)、事前に準備ねがいます。

ライブプレビューを表示する

index.htmlを開いた上で、画面右上にあるライブプレビューボタン(イナズマの形)をクリックしましょう↓

ブラウザが別ウィンドウで立ち上がり、コード内容が表示されます↓

たったこれだけ。めちゃカンタン!

しかも、このライブプレビューは、エディタでコードを変更すると、即座にブラウザに反映されるのがすごいところ!

ファイルの保存も、リロード用のボタンを押す必要もないので、サイト設計がスピードアップします。

なお、ライブプレビューの表示中は、イナズママークがオレンジになってます↓

ライブプレビューで強調表示させる

Bracketsのライブプレビューは、強調表示もすごいんです。

例えば、HTMLファイルのh1タグの行にカーソルを移動させると↓

ライブプレビュー画面で、その箇所が青枠で強調表示されます↓

この強調表示の機能は「ライブプレビューハイライト」と呼ばれ、HTMLファイルだけでなくcssファイルも対応してます。

強調表示は、逆も可能です

ライブプレビューしているブラウザで、例えばh2タグの箇所をクリックすると↓

エディタ画面でそれに該当するタグが、ハイライト表示されます↓(リバースインスペクトとよばれる機能)

Bracketsは、なんといってもこの「ライブプレビュー機能」が秀逸で、作業効率がめっちゃ上がりますよ。

ライブプレビューを終了する

イナズママークをもう一度クリックすれば、マークがオレンジから白に戻り、ライブプレビューは終了します。

※ライブプレビュー側をいきなり閉じると、エラーが出る仕様みたい…。

以上、ライブプレビューの使い方でした。

Bracketsの使い方④|CSSのクイック編集

次は、CSSクイック編集の使い方について。
この機能もBracketsの売りですね。

CSSのクイック編集を使う

まずHTMLファイルを開いて下さい。

「タグ/class/id」のいずれかの上にカーソルを置き(例としてh1タグ)、2本指クリックをして、メニューの中から[クイック編集]をクリックします↓

すると、クイック編集用のインラインエディタが開き、関連するCSSが全て表示されます

このインラインエディタ上でCSSを直に編集できるのがBracketsのスゴイところ!

試しに、以下のCSS記述で、カラーコードを黒から赤に変更すると↓

ライブプレビューにCSSの編集がすぐ反映されました↓

カンタンすぎでしょ!

クイック編集画面を閉じるには、左上の[×]もしくはEscキーを押すこと。(別に開いたままでも構いません)

CSSを新規に作ることもできる

このクイック編集は、CSSコードの編集だけでなく「新規作成」も可能です。

先ほどと同じ手順で、CSS編集画面を開き、[新規ルール]をクリックすると↓

h1の記述枠が新規に作られました↓

このように、BracketsのCSSクイック編集は、関連するCSSコードがHMTLファイル内に自動で表示されるため、

CSSファイルを開いたり、対応するCSSコードを探したりする必要がなく、作業効率が向上します。

ぜひ活用してみて下さい。

Bracketsの使い方⑤|クイックビュー


クイックビューの使い方について。

色のクイックビューを使う

CSSファイル(またはHTMLファイル)を開いて下さい。

色コードを記述した箇所にカーソルを当てると、色のクイックビュー(小窓)が表示されます↓

もし色を変更したい時は、[クイック編集]をクリックして下さい↓

すると、色の編集画面がエディタ内に表示されましたね↓

ここで決定した色が、すぐさまコードに自動反映されます。

このように、「色のクイックビュー」を使えば、カラーコードを覚えていなくても、カンタンに色の設定が可能です。

画像のクイックビューを使う

画像のクイックビューも同様。

エディタ上で、画像リンク上にカーソルを当てると、その画像のプレビューがサムネイルで表示されます↓

このクイックビューを使えば、Webサイトの設計がグッと捗りますね。

Bracketsの使い方⑥|その他

最後にいくつか、便利な機能をご紹介。

入力補助を使う

他のエディタと同様、Bracketsにも入力補助が備わってます。

HTMLファイルの場合

例として「h2タグ」で説明します。エディタ上で と入力すると、タグの候補が表示されます↓

<h まで入力すると、「hで始まるタグ」に絞りこまれましたね↓

その表示をヒントに直打ちを続けてもいいし、該当する表示(今回はh2)をクリックして、残りのタグを自動入力してもOK。

消えた入力補助を再表示するには、「Ctrl+Space」を打ち込みましょう。

開始タグのを入力すると、終了タグの</h2>が自動入力されるので楽ちんです↓

CSSファイルの場合

テキストを入力した時点で、候補が表示されます↓

こんな感じ。

画面を2分割して使う

2つのファイル(例:HTMLとCSS)を見比べながら作業できるので便利です。

左右に分割する

左サイドバーの上部にあるボタンをクリックし、表示されたメニューの中で、[左右分割]をクリックしましょう↓

すると、エディタが左右に2分割されます。左サイドバーには、「左/右」の表示が登場します↓

「左」グループのファイルの中から、エディタの右半分に表示させたいファイルをつまんで、「右」にところに移動させます↓

すると、そのファイルがエディタの右半分に表示されました↓

画面の上下分割も同様です。

カーソル行をハイライトする

メニューから [表示] > [アクティブな行をハイライト] をクリック↓

すると、カーソル行がハイライトされて、視認性がアップします↓

背景色を変える

背景色を変えたい人向け。
メニューから [表示] > [テーマ] をクリック↓

デフォルト以外(例:Brackets Dark)を選択して [完了] をクリック↓

がらりと雰囲気が変わりましたね↓

以上、Bracketsの使い方でした。

まとめ:Bracketsの使い方|初心者用にダウンロードからわかりやすく解説

記事のポイントをまとめます。

上記の感じ。

冒頭で述べたとおり、Bracketsの良いところは、デフォルトでメイン機能が備わっていること。

そのまま使っても充分ですけど、プラグインを入れると、さらに使いやすくなりますよ。プラグインを入れるのはカンタンなので、以下の記事もあわせてご覧下さい。

参考になれば幸いです😌

参考HTMLエディタのおすすめ3選【初心者も使いやすい無料版】

参考WordPressブログの始め方を初心者に解説。アフィリエイトで稼ぐ!