もしも10分の1の行数でHTMLが書けたら：Zen-Codingで高速HTML＆CSSコーディング（1）（2/2 ページ）

[ひらいさだあき，＠IT]

構造化されたHTMLの展開

　Zen-Codingでは記号を組み合わせることによって、構造化されたHTMLを一度に展開できます。この記号を覚えると、複数のタグを展開できるためとても便利になります。

兄弟関係のタグの展開

　兄弟関係のタグを展開では、＋を付けます。それぞれの行末で、「Ctrl＋E（Macの場合はCommand＋E）」を押してください。

• サンプル7リンク

　それぞれのタグが同じ階層で展開されます。異なるタグを同じ階層に記述する場合に便利です。

親子関係のタグの展開

　親子関係のタグを展開では、「>」を付けます。それぞれの行末で、「Ctrl＋E （Macの場合はCommand＋E）」を押してください。

• サンプル8リンク

　それぞれのタグが階層化されて展開されます。タグが入れ子になっている場合に便利です。

同じタグを繰り返した展開

　同じタグを繰り返した展開では、 * を付けます。それぞれの行末で、「Ctrl＋E（Macの場合はCommand＋E）」を押してください。

• サンプル9リンク

　同じ内容のタグを複数回繰り返して記述する場合に便利です。

グループ化したタグの展開

　グループ化したタグの展開では、グループ化するタグを、()でくくります。それぞれの行末で、「Ctrl＋E （Macの場合はCommand＋E）」を押してください。

• サンプル10リンク

　「ul>li*3+p」といったグループ化を行わない省略形の場合、以下のように展開されるので、注意が必要です。

  <ul>
    <li></li>
    <li></li>
    <li></li>
    <p></p>
  </ul>

連番を付与したタグの展開

　連番を付与したタグの展開では、 $ を付けます。それぞれの行末で、「Ctrl＋E（Macの場合はCommand＋E）」を押してください。

• サンプル11リンク

　連番はidを付ける場合に便利です。

さまざまな展開

　これまでの記法を組み合わせることで、複雑な構造を持ったHTMLを展開したり、既にあるテキストのマークアップが効率的に行えます。

　簡単なHTMLのひな型であれば、以下の省略形から展開できます。ある程度HTMLの構造を考えてから、省略形を記載することがポイントになります。

• サンプル12リンク

　用意されたテキストをマークアップする場合は、idやclassを簡単に付けることができて便利です。

• サンプル13リンク

まとめ

　今回は以下の4つの機能をご紹介しました。

• 省略形の展開（Expanded Abbreviation）
• 囲んでからの展開（Wrap with Abbreviation）
• idとclassと属性の付け方
• 構造化されたHTMLの展開（+<> * () $ ）

　これはZen-Codingの機能の一部ですが、これだけでもマークアップをかなり効率化できます。より高度な使い方については、英語ですがZen-Coding Projectでチャートシートが公開されていますので参考にしてください。

• ZenCodingCheatSheet.pdf - zen-coding
• ZenHTMLElementsEn - zen-coding
• ZenCSSPropertiesEn - zen-coding

著者紹介

ひらいさだあき

仕事ではSIerでJavaの開発やトラブルシューティングを行っています。また最近ではブラウザやHTML5に興味を持っています。

Zen-Codingについては、Chrome ExtensionやGreasemonkeyのUserScriptを作っているので、よかったら使ってみてください。

twitter : http://twitter.com/sada_h

blog : techlog

「次回」へ

「Zen-Codingで高速HTML＆CSSコーディング」バックナンバー

• Zen-Codingを使いこなして、らくらくマークアップ
• もしも10分の1の行数でHTMLが書けたら