Zen Codingの基本的な使い方 | Zen Coding 3-1

Zen Codingを使ってHTML/CSSコーディングするには、Zen Codingを導入した環境でそれぞれのHTML/CSSタグの「省略形」（Abberiviation）といわれる略語を入力し、「展開」を実行（［Expand Abberiviation］メニューを選択、あるいは ＋キーを押す^※）します。入力した省略形を「展開」（Expand）すると、統合開発環境のスニペット（統合開発環境から短いプログラムコードを呼び出す機能）のように、一連のコードが生成されるしくみになっています。

省略形を覚えるのはたいへんだと思うかもしれませんが、1章で述べたとおり、すべてを覚える必要はありません。自分がよく使うタグの省略形だけを覚えればじゅうぶんです。

また、Zen Codingの省略形は、HTMLの場合はHTMLタグの名前の、CSSの場合はスタイル指定のためのプロパティ名の頭文字などになっています。いつもHTML/CSSを書いているなら、覚えるのはそれほどむずかしくありません。ここで紹介したもの以外の省略形については、4章、5章を参照してください。

※ショートカットキーは環境によって異なる。秀丸エディタは本書の手順では＋キー。以降は、自分の環境に合わせて読み替えを。

Zen CodingでHTMLタグを入力する

ここでは、HTMLの見出し1のタグ「<h1></h1>」をZen Codingで入力してみます。 HTMLの見出し1のタグ「<h1></h1>」を入力するには、「h1」と入力して、＋キーを押します。すると、省略形が展開され、「<h1></h1>」というタグが生成されます。タグが入力できたら、ページのコンテンツ（内容）を入力します。

1. 省略形の入力

   Zen Codingを導入したエディタで省略形「h1」を入力する。

   
2. 省略形の展開

   ショートカットキーで省略形を展開する。

3. コードが展開された

   「h1」が「<h1></h1>」と展開されている。開始タグと終了タグの間に見出しの内容を入力する。

   

Zen CodingでCSSのスタイル指定を入力する

CSSタグを記述する場合も同じように、省略形を入力して展開していきます。

ここでは、Zen Codingを使って、CSSで色指定ののプロパティと値を入力してみます。

1. 省略形の入力

   Zen Codingを導入したエディタで省略形「c」を入力する。

   
2. 省略形の展開

   ショートカットキーで省略形を展開する。

3. コードが展開された

   「c」が「color:#000;」と展開された。 色指定の「#000」の部分は、指定したい色に書き換える。

   

テキストを省略形でラップしてタグを入力する

Zen Codingには、タグを入力してからコンテンツ（内容）を入力していく方法のほかに、まずコンテンツを入力しおいて、そこにあとからHTML/CSSタグを付けていく方法もあります。コンテンツを入力しておいてタグを付けていくほうが親しみやすい場合は、こちらの方法を利用しましょう。

あとからHTML/CSSタグを入力するには、Zen Codingを導入したエディタ上でテキストの範囲を選択し、その状態で省略語で「ラップ」（［Wrap Abberiviation］メニュー、または＋キーを押す^※）します。［Enter zen coding abbreviation］（省略形入力）ダイアログボックスが表示されるので、ここで省略形を入力し、［OK］をクリックします。

※秀丸エディタは本書の手順では＋＋キーだが、環境によって異なる。

1. 範囲選択

   Zen Codingを導入したエディタで、入力したテキストのHTMLタグを適用したい範囲を選択する。ここでは、「適用したいテキスト」を全部選択する。

   
2. 省略形でのラップの選択

   ＋キー（秀丸エディタは＋＋）を押して、省略形入力ダイアログボックスを呼び出す。

3. 省略形の入力

   ［Enter zen coding abbreviation］ダイアログボックスが表示されるので、入力欄に省略形を入力して［OK］をクリックする。ここでは、「p」と入力する。

   
4. HTMLタグでラップされた

   選択した範囲のテキストを囲んでタグが入力された。