注：とても残念なことにAdobeは2021年9月にBracketsのサポートを中止することになりました．それに伴い，BracketsのサイトからBracketsのインストーラをダウンロードすることはできなくなっています．（Web上にはまだBracketsのインストーラをダウンロードできる場所が探せばあるようです．）後継ソフトとして，無料の統合開発環境であるVisual Studio Codeが推薦されていますが，Visual Studio CodeはBracketsよりできることが遥かに大きなソフトなのでWeb開発には高性能すぎる気がします．

Bracketsは元はAdobeが開発していたWeb用のエディタです．オープンソースで無料なエディタでWindowsでもMac OS Xでも使用できます．BlueGriffonのようなGUIベースの開発はできませんが，中級以上のWeb作成，特にWebアプリ開発に便利な下記のような機能を持っています．

Bracketsからインストーラをダウンロードしてください．

初期設定

Bracketsの設定

特に必要なし．インストール後に立ち上げると「Getting Started」の編集画面になるので，Brackets右端上端の稲妻マーク（ライブプレビュー）をクリックして，ブラウザで読むと良い．

拡張機能のインストール

Baracketsを使いやすくするために，「ファイル」メニューの下にある「拡張機能マネージャー」で拡張機能（プラグイン）をインストールできます．拡張機能マネージャー右上にある検索窓で検索して，下記の拡張機能をインストールしておいてください．

簡単な使い方

Bracketsは，同じフォルダーの下にあるファイルを同じプロジェクトのファイルとみなします．フォルダを開いてからその中にあるファイルを編集することもできるし，すでにあるファイルを開いた場合は，左ペインの上側の「作業中ファイル」にファイル名が表示されます．左ペインの下側には同じフォルダにある他のファイルのリストが表示されます．（作業中のフォルダを切り替えることもできます．）

BlueGriffonで作成したファイルを編集する場合

BlueGriffonで作成したHTMLファイルとその外部スタイルシート（CSSファイル）をBracketsで編集する場合は，下記手順で編集することになると思います．

  1. 「ファイル」メニューの下の「フォルダを開く」で，編集したいHTMLファイルが含まれているフォルダを開く．
  2. Bracketsの左ペインに，そのフォルダの下にあるファイルやフォルダの一覧が表示されるので，編集したいHTMLファイルをクリックする．
  3. するとそのファイルを編集できるようになる．
  4. HTMLファイルにlinkされた外部スタイルを編集したい時は，要素やclass属性やid属性の上にカーソルを置いてからクイック編集キー(Ctrl+E，Mac OS Xなら Command+E)を押すと，該当するCSSをその場で編集できる．「新規ルール」をクリックして新しいCSSのルールを作成することもできる．修正したり新規作成したりしたCSSルールはクイック編集画面内で「保存」操作（Ctrl+S，MacならCommand+S）をする．（複数のCSSファイルを使っている時は，どのCSSにルールを作っているかに注意．）

新規作成する場合

  1. 「ファイル」メニューの「新規作成」で空のファイルが作成される．
  2. 「名前をつけて保存」でhtmlファイルとして保存．
  3. "!"と一文字入力して展開キー（Tabキー）を押すとHTMLのひな形が作成される．（HTMLファイルとして保存していないとひな形が作成されないことに注意．）
  4. lang="en"となっているので，en（英語）を消してja（日本語）にする．
  5. head要素の中でlinkと書いて展開キーを押すと<link rel="stylesheet" href="">と展開される．（CSSファイルは自動作成してくれないので，新規作成メニューから作成する．）

便利な機能たち

BracketsはHTMLやCSS（やJavaScript）の入力を容易にする機能が満載です．その一部を紹介します．

ブラウザでライブプレビュー：
Brackets右端上端の稲妻アイコンをクリックするか，「ファイル」メニューの下の「ライブプレビュー」を選ぶとChromeブラウザで表示される．HTMLやCSSを編集するとリアルタイムにブラウザの表示も変わる．ブラウザ表示がおかしくなったらブラウザ画面で再読み込みしてみる．
フォントサイズ調整：
「表示」メニューの下の「フォントサイズを大きく（小さく）」で編集画面のフォントの大きさを調整可能．
コード補完：
閉じタグを入力しかけると自動的に完全な閉じタグが入力されるなどする．
コードヒント：
<fと入力するとfで始まる要素が一覧表示され，そこからfooterを選ぶと閉じタグまで自動で入力される．
コードカラーのクイックビュー：
CSS編集時に色名（例 #00ff00）の上にカーソルを置くと，その色がポップアップ表示される．色の指定の上でクイック編集するとカラーパレットが表示されるので，その中から好きな色を選ぶことができる．
文法チェック：
右下のステータスバーに，常にW3CのValidatorでValidationした結果が表示されている．緑色のチェックマークが表示されていたらエラーなし．（「編集」メニューの下に「W3C検証の更新」機能がある）
ソース整形：
「編集」メニューの下の「保存時にBeautifyする」がチェックされていれば，保存するたびにソースが整形されてきれいなインデントがつく．それ以外でも，「編集」メニューの下の「Beautify」機能を実行するたびに整形される．
Emmetの機能例：
body要素の中でh2と書いて展開キーを押すと<h2></h2>と展開される．ul>li*3と書いて展開キーを押すと3アイテムの箇条書きになるよ．詳しくは下記「Emmetを使いこなす」参照．

Emmetを使いこなす

「Emmet Documentation」のSyntaxにまとめてあります．これを覚えれば覚えるほどソース入力が早くなると思います．

関連資料