BracketsとはAdobeが提供する、HTML、CSS、JavaScript用のコードソースエディタです。無料で使えて導入も簡単に行えるので、初心者の方にも触れやすいソフトです。拡張性に優れているので、慣れてきた頃に機能を増やす事も可能です。今回はBracketsについて、簡単なサンプルとともに基本的な使い方をご紹介します。
Bracketsの始め方
こちらのサイトからダウンロード、インストールして本体を導入します。起動すると、こちらのようなサンプルとして入っているindex.htmlが開きます。詳しく知りたい方は以下の記事をご覧ください。
今回は、htmlファイルを新規作成し、プレビューで確認、保存という流れでご説明します。
新規作成から保存まで
まずは、作業フォルダを選択します。Getting Startedを選択してください。続いて「フォルダーを開く」と出ますので、任意のフォルダを選びます。これから始める場合は、新しく作ったフォルダで構いません。既にあるものを使う場合は、フォルダを選びます。
今回はサンプル用というフォルダを作りました。左端にサンプル用と表示されています。
続いてファイルの新規作成を選びます。
すると、名称未設定-1という名前が表示されます。名称未設定の後の数字は「１」にならなくても大丈夫です。
ここで1度、名前をつけてファイルを保存します。そのまま保存すると「名称未設定」のままになってしまい、コーディングに使う機能が使えなくなってしまいます。任意の名前に変更して保存ください。
サンプルでは「index.html」で保存します。
htmlをコーディング
ここで先ほど作ったindex.htmlにコードを打ち込みます。今回は初期から入っているものを流用していますので、以下のようになります。
プレビューで確認する
実際に作ったサイトが、オンライン上ではどのように表示されるのかを確認するため、プレビュー機能を使います。右端の一番上にある稲妻マークのアイコンをクリックすると、直接ブラウザを立ち上げることができます。尚、現在はファイルの仕様でGoogle Chromeでプレビューが出ます。
オンライン上で見たindexファイルは、このようになっています。見本とコードを比べると、どのタグがどのように作用しているか、などが良く分かると思います。
ファイルを保存する
コード入力と確認が終わったらファイルを保存します。コーディングする前と同じように名前をつけて保存、でもいいですが、index.htmlだけを保存するのであれば、ファイルを選択した状態で「保存」をクリック、「Ctrl＋S」でも保存可能です。
まとめ
以上が基本的な作りはじめから保存までの流れになります。今回はhtmlファイルを例にとりましたが、cssファイルやJavaなども使えるので、保存する際に拡張子を変更することで簡単に変更が可能となっています。自分の作りたいファイルで応用してみてください。
