CSSやJavaScriptが多用されるようになり、一般的なオーサリングツールでは求めるデザインが容易にはうまくいかなくなっている。そのため技術者の場合は手打ちでHTMLを描く人も多いはずだ。だが、面倒なのは確かだ。

各種エディタで利用可能

もっとシンプルにタグ入力を行いたい、そう考える方に使ってみて欲しいのがZen-codingだ。

今回紹介するオープンソース・ソフトウェアはZen-coding、各種エディタと連携するHTML/CSS補完ライブラリだ。

Zen-codingは単なる入力補完ではない。その書き方が変わっていて、div#headerと書けば、<div id=“header”></div>に展開される。もちろんクラスの場合はドットでつなげば良い。複数のクラス指定も可能になっている。詳しくは下記のチュートリアル動画を参考にされたい。なおTextMateで試したところ、一部うまくいかないことがあった。

また、div.header+pなどと書けば<div id=“header”><p></p></div>に展開される。JavaScriptなどでDOMの操作に慣れている方であれば直感的で分かりやすいだろう。さらにリストのような場合、li*5といった形で計算式を埋め込んで展開することもできる。

他にもaタグの補完はhrefが必ず付くようになっていたり、imgタグで画像を指定すれば幅と高さを自動で算出して補完する機能もある。プログラマ向けの各種エディタに対応しているので、HTMLを手打ちしていた方にはとても便利に使えるはずだ。

まるでZen-coding用のタグ打ちを覚えるような感覚だ。最初はその形式に若干戸惑うかもしれないが、一度慣れてしまえば都度打っていた「id」や「class」、メタタグなどが魔法のように入力できるようになるだろう。

zen-coding - Google Code

　http://code.google.com/p/zen-coding/