BracketsはAdobeが提供する、無料のオープンソースコードエディターです。HTML、CSS、JavaScript等の言語を扱うことができ、操作も容易なので初心者にもおすすめです。また、拡張機能が豊富で、HTML、CSS、JavaScript以外のシンタックスハイライトにも対応しているので、上級者になっても機能が不十分になることはないでしょう。
今回はダウンロードの仕方から初歩的な部分までをご紹介します。
Bracketsとは
Bracketsは、Adobeが提供する、無料のオープンソースコードエディターです。HTML、CSS、JavaScriptによって開発されているプロジェクトで、日々新機能や機能拡張の開発が進められています。
導入が容易で、操作も軽快なので素早くコードを書くことができます。ちょっと興味を持った学生や、触ってみたいというデザイナーの方にもおすすめできるソフトです。その一方で、拡張機能が豊富に存在し、自在にカスタマイズできるので、これから勉強を始めるWeb制作初心者の方から上級者の方まで、幅広く使うことができるでしょう。
ダウンロードの仕方
まずこちらのサイトにアクセスし、ダウンロードを開始します。「Down load Brackets 1.8」と書かれたボタンがあるのでダウンロードしましょう。バージョンはダウンロードする時期によって数字が変わる可能性があります。
インストール
ダウンロードされたファイルをダブルクリックすると、インストーラーが立ち上がるので任意の場所にインストールします。
ファイルの起動
インストールして最初に起動すると、サンプルで入っているindex.htmlが立ち上がり、以下のような画面になります。メニューは既に日本語環境で、難しい初期設定もありません。
準備はこれだけ。あとは思うままWeb制作をすることができます。
基本機能
Bracketsで使える基本的な機能をご紹介します。
１．ファイルメニュー
ファイルメニューには新規作成、開く、保存、などの機能が揃っています。
２．コードの折りたたみ
コードの左隅にある、▼をクリックすると、折り畳んだり開いたりできます。
当分使わない部分を折りたたんで編集することができ、全体像を簡単に把握できる便利な機能です。
３．カラーコード
また、デフォルトでカラーがついているのですが、右クリックで編集を選ぶと、カラーピックを使って任意の色に変更することも可能です。
４．イメージファイルの確認
イメージファイルなどがある場合は、カーソルをファイル文字列に持ってくると、自動でポップアップされて確認できるようになっています。
５．機能を拡張する
右端にあるフォルダのようなアイコンをクリックすると、拡張機能マネージャーを利用できます。こちらからさまざまな機能をインストールして拡張することができます。
拡張したい機能をダブルクリックすれば、すぐにダウンロードを始めることができます。
まとめ
今回はBracketsで使える基本的な部分についてご紹介してみました。無料で使えるうえに、最初の状態で既に充分な機能が入っています。プラグインも豊富なので、慣れてきたら好みのスタイルに拡張することでさらに使い勝手が良くなりそうですね。
ぜひBracketsを使ってWeb制作の勉強を進めてみてください。
