Zen CodingでよりスマートにHTMLを書く | Zen Coding 3-4

前章までは、Zen Codingの基本である省略形を使って、ふだんよく使うHTMLのタグを書いてみました。

Zen Codingでは、コードを入力してからテキストを入力する方法と、テキストを先に入力しておいて、HTMLタグを適用する方法があります。また、同じタグをくり返すコードを一気に書くこともできるのです。

ここからは、Zen CodingでHTMLをよりスマートに書くために覚えておきたい入力方法について説明します。

• 同じタグをくり返し入力する
• Zen Codingで複数の要素をグループ化する
• Zen Codingでid属性を指定する
• Zen Codingでclass属性を指定する
• Zen Codingでid属性とclass属性を指定する
• Zen Codingでid属性とclass属性を付与したdivタグで囲む

同じタグをくり返し入力する

HTMLタグで属性を指定したり、同じタグを続けて入力したりを手で入力していると、HTML文書が複雑になればなるほどコードも煩雑になり、思わぬうっかりミスもふえてしまいます。

Zen Codingを使ってくり返し指定をすれば、そのようなミスを防ぐことができます。

たとえば、表のデータのくり返しをZen Codingで指定して展開すると、表組みのHTMLが作成できます。

tableタグで表を作成するのはとても煩雑ですが、Zen Codingを使えばこのように、1行記述するだけで表組に必要なコードをまとめて入力できます。

一見むずかしそうに見えますが、「*3」のようにくり返すタグを回数をしているだけです。さっそくひとつひとつ確認してみましょう。

1. 省略形の入力

   Zen Codingを導入したエディタで、タグのくり返し指定の省略形を入力する。 ここでは「tr*3」として、表の列を3回くり返し、また「td.item+td.price」としてそれぞれの列にアイテム、価格のデータのタグも入力する。

   table#pricelist[summary]>tr*3>td.item+td.price

2. 省略形の展開

   ショートカットキーで展開する。

3. コードが展開された

   アイテム、価格を入れる列のコードが3回くり返して展開され、表組が作成できた。 続いて内容を入力する。

   <table id="pricelist" summary="">
   <tr>
    <td class="item"></td>
    <td class="price"></td>
   </tr>
   <tr>
    <td class="item"></td>
    <td class="price"></td>
   </tr>
   <tr>
    <td class="item"></td>
    <td class="price"></td>
   </tr>
   </table>