だいぶ前より自分自身zen-codingの話は耳に挟んでいましたが、つい先日ようやく触れ始めたので共有します。
※以前はzen-codingというプロジェクト名でしたが、最近になってEmmetとプロジェクト名が変わったようなので、以後はEmmetとします。
そもそもEmmetって何ぞや？という話ですが、下記のEmmet記法例をご覧ください。
div#header>ul#navigation>li*3>a
コイツを展開すると下記のようになります。
<div id="header"> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div>
HTML/CSSが出来る人なら、なんとな～く意味は分かると思います。
コーディングがかなり速くなると思いませんか？
速くなるだけでなく、閉じタグ忘れや入れ子間違いなど、人的ミスも無くすことが出来るので総合的に生産性が上がります。
Emmetの利用方法
http://www.myu-zin.com/webridge/archives/663.html
DreamweaverでEmmetが利用できるプラグインがあったのですが、これはCS5以降専用で、私用のDWはCS4で社内のDWもCS3のため使えず…
しかし下記の「WebStorm」では標準実装されているようで、インストールしてすぐEmmetを利用することができます。
http://www.jetbrains.com/webstorm/
WebStormのエディタでHTMLを開き、Emmet記法で書いた後にtabキーを押せばHTMLに展開されます。
ちなみにHTMLからEmmet記法へ戻すことはできないので、Sassのようなメタ言語というわけではなく、HTMLコーディングを超高速にするためのテクニックだと考えてもらえばと思います。
応用
多少の記法さえ覚えてしまえば、よくあるサイトの大枠構造は一発で作れてしまいます。
div#wrapper>(div#header>ul.navigation>li*3>a)+(div#contents>div.box*3)+(div#footer>ul.navigation>li*3>a)
上記例は「wrapper」を親に「header」「contents」「footer」のレイヤーが兄弟で並ぶ形です。兄弟として隣接しあう要素は「()」で囲い「+」で連結する形になります。
このようにあらかじめ構造ベースで考えることになるので、必然的に文書構造としてもセマンティックなHTMLになります。
他にも連番を振ったりするなど色々記法がありますが、構造の基本さえ覚えてしまえば簡単に扱えると思いますので、ぜひ試してみてください。
