連載
» 2011年07月04日 00時00分 UPDATE

Zen-Codingで高速HTML&CSSコーディング(1):もしも10分の1の行数でHTMLが書けたら (2/2)

[ひらいさだあき,@IT]
前のページへ 1|2       

構造化されたHTMLの展開

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

兄弟関係のタグの展開

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

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

親子関係のタグの展開

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

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

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

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

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

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

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

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

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

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

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

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

さまざまな展開

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

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

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

まとめ

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

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

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

著者紹介

ひらいさだあき

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

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

twitter : http://twitter.com/sada_h

blog : techlog



前のページへ 1|2       

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。