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

BLOG Editor

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

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

本記事の内容

  • Bracketsの使い方

こんにちは、ヒデハルです。
ブログ歴は2年以上。

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

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

本記事の内容

Bracketsとは?

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

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

テキストエディタの外観と公式サイトへのリンクは以下のとおり。

» Bracketsの公式サイト

Bracketsの特徴的な機能は以下の2つ。

  • ライブプレビュー:編集内容をブラウザでリアルタイムで確認できる
  • 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ブログの始め方を初心者に解説。アフィリエイトで稼ぐ!