コーディングが4倍早くなる「zen-coding」をDreamweaver CS5に導入してみる

遅ればせながら、巷で話題の「zen-coding」を導入してみました。zen-codingはHTMLやCSSやらをショートカットなどの簡略化したコードだけで複雑なタグを1発で生成できちゃうプラグインです。そう単体のエディターではなくDreamweaverやNotepad++ などのテキストエディターのプラグインとして動作します。

ちょっとわかりづらいですがデモンストレーションの動画を見てみてください。やってることわかるかな??

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Zen-Codingのダウンロード

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

下記のようにエディター別にダウンロードするファイルが分かれています。今回はDreamweaverの環境にインストールしたいので「Zen Coding for Dreamweaver v.0.7.2 Featured」をダウンロードしました。

圧縮されていますので、解凍してできたファイル「Zen Coding v.0.7.2.mxp」をクリックして実行します。

するとADOBEのEXTENTION MANAGERが起動し自動でインストールが完了します。あとはDreamweaverを起動、もしくは再起動で動作を確認してみてください。

たとえば


div#content>ul#global.nav>li*3>a

と入力します。こんな感じ。

それで末尾にカーソルを合わせ、「Ctrl+,」(コントロール+カンマ)を打つと

一瞬でこんなタグが展開されます。どう?すごくない?

是非、いろんなショートカットを試してみましょう!

その他のショートカットが一覧になったシートで確認してみてください。⇒Zen Coding cheat sheet (PDF)

以下のページが参考になります。
http://designblog.ecstudio.jp/htmlcss/zen-coding-aptana.html