Bracketsのインストールと使い方

プログラミングする際にもっとも重要な仕事道具が「テキストエディタ」です。Brackets(ブラケッツ)のインストールと基本的な使い方、効率を高めるショートカットについて解説します。

テキストエディタとは

HTMLやCSSのファイルは、文字データだけで構成されているため「テキストファイル」と呼ばれており、このファイルを扱うためには「テキストエディタ」というソフトを使用します。パソコンにはじめから入っているメモ帳などもこれにあたり、実際メモ帳だけで仕事することもできます。しかし、HTMLやCSSのファイルのために最適化された高性能なテキストエディタのほうが、より簡単に仕事することができます。
いろいろなテキストエディタがありますが、今回はAdobe社から提供されている「Brackets」を使用します。

Bracketsの特徴

Bracketsのアイコン
無料(提供:Adobe社)
WindowsとMacに対応
標準で日本語化されている
拡張機能あり(複雑な大規模サイトの開発も可能なほど高機能)

Bracketsの画面

インストール_Windows編

インストーラーをダウンロードします。
オフィシャルサイトでインストーラーをダウンロードします。
[colored_box color=”gray” corner=”sq”]http://brackets.io/[/colored_box]

インストーラーを実行する
ダウンロードしたインストーラーファイルをダブルクリックして実行し、ファイルのインストール先を指定します。

インストールを開始する
「このアプリがPCにソフトウェアをインストールすることを許可しますか?」と聞かれるので「はい」をクリック。
インストールすることを許可する

起動のしかた
Windowsメニューの「すべてのプログラム」からBracketsを起動します。

基本的な使い方

インストールが完了したら、Bracketsの基本的な使い方を習得しましょう。

作業フォルダを設定する
左上の「Getting Started」>「フォルダーを開く」をクリック。前に作成したフォルダ「sample」を選択します。Brackets画面の左側に作業フォルダの中身が表示されます。

HTMLファイルを作成する
作業フォルダが設定できたら、HTMLファイルを作成してみましょう。
メニューバーの「ファイル」>「新規作成」をクリックすると「名称未設定-1」というファイルが作成されます。

HTMLファイルを保存する
作成できたら、メニューバーの「ファイル」>「名前を付けて保存」をクリックし、ファイルを保存します。保存場所は作業フォルダで、ファイル名は「sample.html」としてみましょう。左側の「作業中ファイル」の下に水色で「sample.html」と表示されていれば、HTMLファイルの作成は完了です。

Bracketsの便利な機能

■効率的な入力を補助する自動入力機能
スマートフォンで文字を書く際、「おは」と書けば「おはようございます」と出る予測変換機能は便利ですよね。
Bracketsも同じように効率的に書くための入力補助機能があります。

HTMLでは「タグ」と呼ばれるコードを使用しますが、このタグを入力する際に頭文字を打ち込むだけで、それに該当するタグの一覧を表示してくれます。
例えば、というタグを使う際、入力した文字から始まるタグ一覧が表示されます。
入力候補が表示される
その中からbodyをクリックすれば、自動的に選択した文字が書き込まれます。
自動的に入力される
これに続けて「>」と入力すれば、終了タグなどの必要なコードが自動的に書き込まれ、タグ入力の手間が大幅に軽減されます。
終了タグが書き足される

■誤入力を指摘するシンタックスハイライト
タグの綴りが間違っていたり構造がくずれていたりするときに、そこだけタグの色を変えて知らせてくれる「シンタックスハイライト」機能を備えています。
「表示が崩れているけど、どこでまちがえたかわからない」場合にすばやく解決できます。
タグの誤入力

コメント