デザイナーでも超簡単！Bracketsで楽々コーディング 第1回 デザイナーにも優しいエディタ、Bracketsの基本を知っておく

連載

デザイナーでも超簡単！Bracketsで楽々コーディング

この連載は、デザインをHTMLのコードに落としこんでいく際のワークフローを通じて、 デザイナーの方にコーディングという作業を理解してもらうことを目的としています。コーディングを知れば、開発者にとって作業がしやすいデザインを作れ、 結果として作業効率化も図れます。

今回は、連載を通して利用する無償のテキストエディタ、Bracketsの基本的な機能を、サンプルを編集することで体験していただきます。

Bracketsをダウンロードする サンプルファイルをダウンロードする

デザイナーにもBracketsを勧める理由

Bracketsは拡張性に優れたテキストエディタですが、高機能なコードヒント機能や、クイックエディット機能などにより素早く、正確に、そして何よりも楽にコードを記述していくことができるように設計されています。

そのため、Bracketsはコードをバリバリと書いていくタイプのコーダーの方にはもちろんですが、HTMLやCSSをちょっと触ってみたいとい うデザイナーの方にもおすすめできます。もしこれを読んでいるあなたが少しでもコーディングに興味を持っているなら、Bracketsはこれまでにない コーディングの世界を見せてくれるでしょう。それは以下のような特徴があるからです。

  1. 正しいコードを知らなくてもよい
  2. 負荷が高めのアプリケーションをインストールしなくても良い
  3. PSDから情報や画像アセットを取り出せる
  4. オープンソースのフリーウェア（初期投資が少なくて済む）

本稿ではデザインをHTMLに落としこんでいく様々なフローを例に、Bracketsの基本的な使い方を学習します。まずは、Bracketsの概要と特徴を紹介します。

Bracketsを体験する

Bracketsはファイル単体を開いて編集することができますが、ディレクトリを指定することでファイルツリーを表示させることもできます。 ディレクトリを指定すれば、階層内のすべてのファイルを走査してくれます。たとえば、css ファイルが複数のディレクトリに分散しても、Bracketsに「これはここにありますよ」とわざわざ教えなくてもいいということです。このメリットは後 述するクイック編集などで体感できます。特に事情がない限りはディレクトリを指定して作業するのがいいでしょう。

今回はサンプルを用意していますので、サンプルのディレクトリを開いて作業してみましょう。

Bracketsを起動して、ファイル→フォルダを開くを選択し、サンプルのディレクトリを開きます。(Shift+Command+O/Shift+Crtl+O)

※筆者の環境とはファイル構成、メニュー構成が異なる可能性がありますが、開くファイルは変わりません

ファイルを新規作成する

早速Bracketsの機能に触れていきましょう。ここでは機能に触れられれば良いので、複雑なコードを書く必要はありません。HTMLの知識 がある方なら先ほど作ったファイルに書き込んでもいいですし、HTMLに慣れていない方はこちらでシンプルなサンプルを用意しましたので、それを書き換え る形でBracketsに触れてみましょう。

新しいHTMLを置いてみます。右クリックして「新しいファイル」を選択し、ファイル名はtest.htmlとしておきます。ファイルメニューから新規作成を選択しても同じ事ができます(Command+N/Ctrl+N)

右クリックして新しいファイルを作成

サンプルファイルのindex.htmlを開くとすでにコードが書かれています。フォルダ内のファイルを開くには、ファイル名をダブルクリックします。

サンプルファイルのindex.htmlを開いたところ

この状態でどのような表示になるのか、確認しておきましょう。Bracketsから直接ブラウザを起動することができるようになっています。

Bracketsウインドウの右上にある「ライブプレビュー」ボタンをクリック

画面右にある稲妻のマークをクリックすると、ブラウザが起動して開いているファイルを表示してくれます。

Brackets内のコードをChromeでプレビュー

どこかで見たことがあるファッションブランドのタグのようなものが表示されれば、大丈夫です。次のステップへ進みましょう。

Bracketsからのプレビューは現在はGoogle Chromeを利用する形になっていますが、将来は好きなブラウザを利用することができるようになるそうです。 http://cuaoar.jp/2015/01/-web-brackets-11.html

ファイルの編集をする

index.htmlを早速編集してみましょう。先ほどプレビューしてみたところ、画面全体がグレーでメリハリがありません。数字が書かれた矩形の部分は白くしてみようと思います。

Bracketsの画面でタグを一つ一つクリックしてみてください。するとプレビュー上で青いハイライトが表示されると思います。これは、 Bracketsとブラウザが連携してタグと表示位置の関連を表示してくれているのです。これを利用すると、これから編集する部分がどの範囲で影響するの かを予想することができます。そして、間違った編集をすることを未然に防ぐことにもつながります。

矩形の部分は

<section id="caltag" class="cf">

と書かれたタグのようですので、ここのスタイルシートを編集してみます。

id=”caltag”にカーソルを置いて、メニューのクイック編集を選択します（⌘＋E/Ctrl+E）。

HTMLコードの中にインラインでCSSコードの簡易エディタが表示される

エディタの中にサブエディタが開き、そこでCSSが表示されました。クイック編集はこのようにわざわざファイルを切り替えなくても関連しているファイルを編集することができるというものです。

背景色が指定されていませんので、指定してみましょう。22行目の最後で改行して、23行目に

background-color と打ち込みます。

コードヒントが表示されたところ

打ち込んでいる途中でヒントが表示されました。もちろん最後まで打ち込んでも構いませんが、ヒントを活用して項目を選択しましょう。

スペルミスしてスタイルが反映されないとか、記法を間違えてスタイルが反映されないとか、筆者でもたまにするミスですがこれでもうその心配もありません。

色はあとで変えられますから、とりあえず#fffでいいでしょう。

テキストエディタではこのようなカラー情報をキーボードで手打ちすると思われがちですが、Bracketsには色指定のウインドウが用意されて います。この場合はCSSファイルを選択する必要があります。クイック編集ウインドウの左上にファイル名と行数が書かれている部分がありますので、これを クリックしましょう。

CSSファイル名をクリック

するとウインドウが切り替わってcssファイルの編集画面になります。

CSSファイルの該当箇所がエディタに読み込まれた

先ほど入力した入力した#fffにカーソルを置いて、クイック編集（⌘＋E/Ctrl+E）を選択してください。 カラーピッカーが開きます。クイック編集 はショートカットから開く方法がお勧めですので、是非ショートカットを覚えてくださいね。（⌘＋E/Ctrl+E）です。

色がプレビュー表示された状態から、クイック編集でカラーピッカーを表示

色が変えられることがわかったので、#fffのままでひとまず編集を終えます。クイック編集は同じショートカット（⌘＋E/Ctrl+E）で閉じることができます。では、プレビューはどのように変わったでしょうか。

プラウザーに編集したスタイルが即座に反映される

矩形の部分が白くなって、衣服に付いているタグっぽくなりました。

このように、コードを詳しく知らなくても何ができるのかを知っているだけで、Bracketsではコーディングしていくことができます。

ちょっとした修正でも慣れないコードを書くのは緊張するものです。しかし、コード補完があれば少なくともスペルミスしてレイアウト崩壊という事態は避けられます。

ライブプレビューを試す

先ほどの体験で簡単にコードの修正ができることがわかったと思います。色の編集もカラーピッカーを利用してデザインツールを使うように変更することができました。今度はこれを利用してライブプレビューしながら編集してみましょう。

Bracketsで起動するブラウザは、Bracketsと直接通信できる機能を持っています。わざわざファイルを保存しなくても、変更を随時アップデートして表示してくれるのです。

それでは今度はページ全体の背景色を変更してみましょう。Bracketsからブラウザを立ち上げてライブプレビューしながら、CSSを変更してみます。

先ほど編集していたstyles.cssの2行目に背景色を指定している行がありますので、その#以降をクリックしてクイック編集で色を選択してみます。

カラーピッカーで背景色を変える

カラーピッカーを操作するとリアルタイムで背景色が変わってゆきます。ちょっと濃い目の色を選んでみましょう。

文章が読めなくなってしまいました。これは困るので次の行にあるcolorを変えます。同じように明るめの色を選んでみます。

カラーピッカーで文字色も変える

矩形の字が消えてしまいました。なぜなら、矩形には文字色が設定されていなかったからです。矩形にもcolorを設定しましょう。

矩形内の文字色を変えた

矩形の中の文字色は黒（#000）にしました。全体を見てみるとこんな感じになりました。

Bracetsとブラウザーの組み合わせはデザインツールのように色の修正が行える

このように、Bracketsはコーダーでなくても十分に使えることがわかっていただけたと思います。次回からはBracketsの様々な機能を活用して、 デザインをコード化する際に遭遇するケースに対応する方法をご紹介します。