もしも10分の1の行数でHTMLが書けたら:Zen-Codingで高速HTML&CSSコーディング(1)(2/2 ページ)
Zen-Codingのテキストプラグイン使うと、効率的にHTMLが書けます。特定の省略された記法や展開を試そう
構造化された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 ExtensionやGreasemonkeyのUserScriptを作っているので、よかったら使ってみてください。
twitter : http://twitter.com/sada_h
blog : techlog
Copyright © ITmedia, Inc. All Rights Reserved.