このロゴの部分にファイルが展開されていきます。フォルダーを開く何気に感動した機能。Bracketsは、通常の「(ファイルを)開く」に加えて「フォルダーを開く」コマンドがあります。このコマンドや、似たような機能があるエディタは他にもありますが、通常のファイルメニューの中に普通に入っているのが分かりやすい。「フォルダーを開く」を選ぶと、指定したフォルダ内に入っているファイルとフォルダが左側の黒い部分に全て追加されます。ホームページを作る時って、1つのフォルダにファイルをどんどん追加していって、そのファイルをちまちま触っていくので、一気に開けて、必要に応じて切り替えができるのは嬉しいです。左側に追加されたファイルは、ダブルクリックすると「作業中ファイル」と書いてある下の部分に追加されます。「作業中ファイル」に追加されたファイルは「control+tabキー」を押せば、ファイルの切り替えができます。使うファイルは「作業中ファイル」に登録しておいて、あまり使わないものはそのままで、使うものは適宜切り替えして書いていきます。それで、まぁ、タグを書いていくわけです。HTMLコードを書くファイルを選ぶと、右側のグレーの画面にコードが出てきます。色分けされていますし、色もあまりキツくないので可愛い。便利と思ったのは、タグを書くと閉じタグを自動で挿入してくれたり(例・<h2>って打つと</h2>って自動で入力される)、開始タグと閉じタグをハイライトしてくれるところですかね。私のような初心者は「あれ、このタグ閉じたっけ?」とか、閉じタグを探して迷子になったりとかするんですが、この機能のお陰でそれが回避できます。開始タグもしくは閉じタグにカーソルを持っていくと、緑色にハイライトしてくれます。src=””>とかで他のファイルや画像を読み込むタグを書くことがよくあると思うんですが、フォルダ名、ファイル名などの頭文字を入れていくと...こうやってリスト出してくれるんですよ...!これ助かりました。無料なのにこんなことまでしてくれるなんて。「あの画像名なんだっけ?」とか「ファイル名はコピペで貼り付け!」とかしなくてもいいので、スペルミスも軽減できますね。挿入した画像ファイルは、ファイル名にマウスカーソルを乗せる(マウスオーバーさせる)と、どんな画像かをポップアップ表示しれくれます。サイズも書いてあります。HTMLタグの補完もしてくれます。打ってるそばから候補を表示してくれます。CSSを書くCSSも色分けされて書くことができます。補完機能もあるので、文字を打ってるそばからコードの候補が挙がってきます。それ以外に便利な機能が。これも、HTMLの画像のポップアップ表示と同じで、色名(コード)にマウスカーソルをあてると、その色がポップアップ表示されます。どんな色か確認ができますね。色コード部分にカーソルを持ってきて「command(WindowsならWindowsキー)+E」を押すと、カラーピッカーが表示されます。色の調整もパパっとできてしまいます。名物機能、CSSを編集するときの「command+E」Bracketsを使う上で、覚えておきたいのが「command(WindowsならWindowsキー)+E」で呼び出せる機能。これがBracketsさんもゴリゴリ推してる大きな特徴です。先ほどのように、カラーピッカーを表示させる他、HTMLファイルを編集しながらCSSも編集できるのが魅力。HTMLの編集画面で、CSSの記述があるところ。idとかclassとか、CSSの指定が書いてあるところにカーソルを持っていって「command+E」を押すと、下からにゅるっとCSS編集画面が出てきます。ここで、ファイルを切り替えることなくすぐにその箇所のCSSを編集して、保存することができます。これ便利ですよね...ちょっとマージン広げたい、とか、線をもう1px太く...とか、ちょっとした修正をサクッとできます。href=”ファイル名.css”>などと、対応するCSSファイルを読み込むタグを書いておかなければいけません。それでCSSファイルを読み込み、そのCSSファイルの中に対応するCSSの記述があれば、下ににゅるっと出してくれます。CSSファイルの中に対応する記述がなければ、新規ルールとして追加することができます。追加したルールは、対応するCSSファイルの一番下に追加されます。初心者で、そんなにゴリゴリコーディングしないよーって方なら、こんだけ機能があれば快適にHTMLやCSSを書けるんじゃないでしょうか...?ライブプレビューBrackets画面の右側にある稲妻マークをクリックすると、ライブプレビュー機能が使えます。これをオンにしておくと、GoogleChromeが立ち上がり(すでに立ち上がってる場合は再起動されます...)、今開いているファイルをプレビューすることができます。すごいのは、HTMLやCSSを書いたすぐそばから反映してくれること。保存とか、再読み込みとかしなくてもすぐに反映されるので、見ながらコード書いたりもできます。欠点が...GoogleChromeでしか使えないことと、Chromeのデベロッパーツール(コードが正しく書けているかどうかを確認する、Chromeに最初からついている機能)との併用ができないこと...などがあって、私は使ってないです...。ブラウザが再起動されるのも地味に痛かったり。拡張機能のインストールちょっと慣れてきたら「拡張機能」なるものをインストールして、機能を追加することができます。拡張機能のインストールは、稲妻マークの下のレゴブロックみたいなマークをクリックするとできます。こんな画面が出てくるので、インストールしたい拡張機能を検索したりします。私はよく分からないので、Emmet(長いタグを短い記号の羅列で効率よく書けるようにした機能)しか入れてないです。そんなにゴリゴリ使ったりしませんしおすし。拡張機能も充実しているようです。インストールも、インストールボタンを押せばサクッとできちゃいます。Text使ってる人が多い...。Textは高機能なエディタですが、有料です。Bracketsは無料でその割に結構高機能なのに、イマイチ流行らない理由としてツイッターで憶測された理由が「サーバーサイド言語に弱い」。サーバーサイド言語っていうのは、PHPとかですね。HTML/CSS/JavaScriptを書くんだったらいいんですけど、PHPなどは、そのままでも書けることは書けますが、拡張機能を入れて環境を構築するなど、一手間必要なようです。拡張機能って英語だし。WordPressのコードとかめっちゃ書く人だったら、使いづらいのかなぁ...。私はWordPressのPHP構文はコピペなので、今のところ不自由は感じていませんが...。コード書くエンジニアさんには、そんなことしなくても、もっと良いエディタがあるので、Bracketsよりもそっち使った方がいいんでしょうかね...。毎日使うものだったら、有料でも気に入ったものを入れたいですよね。あとちょっと日本語入力に弱いです。変換候補がちゃんと表示されなかったり...。WEBCRE8.jpで紹介されています。使えないレベルではないですが、ちょっと気になります。これから改善されていくことを祈ります。HTMLやCSS、JavaScriptで事足りるよ!あんまエディタ使わないよ!お金ないよ!という人にはBracketsは良いエディタだと思います。私もまだまだ使いこなせてなくて、もっと便利な機能とか隠れてるかもしれませんが、ざっと使ってみてこんな感じでした。使ってみたいと思います。design!共有:印刷FacebookTwitterメールアドレス関連記事ブログをリデザインしました。コンセプトや参考にしたものなど。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。