Zen Coding

Zen Codingという素晴らしい拡張機能（エクステンション）を偶然発見。
何で今まで知らなかったんだろうって思ってしまうくらいコーディングにおいてとても便利。
もっと情報のアンテナを広く保っとかないとなぁ～ということを痛感しました。
色々なエディターに対応してるのも凄い。

使い方は以下の通り

自分はDreamweaverCS3を使っているので、
http://code.google.com/p/zen-coding/downloads/list
でCS4対応版の拡張機能（エクステンション）のファイルをダウンロードし、解凍します。
Dreamweaverを起動して[コマンド]→[拡張機能の管理]を開きます。
そして[ファイル]→[拡張機能をインストール]を開き、解凍したファイルの中にある.mxpファイルを選択します。
これでZenCodingはインストール完了です。

CS3を使用している方はその後、
http://code.google.com/p/zen-coding/issues/detail?id=121
から、CS3対応用修正版js（zen_editor.js）をダウンロードして、

ローカルの

該当ドライブ:\Documents and Settings\該当ユーザー名\Application Data\Adobe\Dreamweaver 9\Configuration\Commands\ZenCoding

を開いて、その中にあるjsをさっき落とした「zen_editor.js」で上書きしてあげるだけで使えるようになります。
一連のインストール作業が終わったらDreamweaverを再起動することをお忘れ無く。

そしてHTMLファイルを開いて、

div#wrap>div#contents>ul#gNav>li*3

と記述した後、Windowsの場合は[ Ctrl ]+[ , ]を押すことで以下のHTMLソースに！

<div id="wrap">
  <div id="contents">
    <ul id="gNav">
    <li></li>
    <li></li>
    <li></li>
    </ul>
  </div>
</div>

ちなみに*で個数、+で前のタグの下に要素の追加ができます。

div.box>p.img+p.txt

<div class="box">
  <p class="img"></p>
  <p class="txt"></p>
</div>

という感じでCSSのように書くことでザクザクとコーディングできちゃいます。