Zen coding　がスゴイ。

2010年02月23日

導入

導入した環境は

Windows VISTA + Dreamweaver CS4

です。
  1. まずは、下記サイトのDonwnloadsから、「Zen Coding for Dreamweaver v0.6」をダウンロード。

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

  2. zipファイルを解凍。「Zen Coding v.0.6.mxp」を確認（これをDreamweaverに組み込みます）。
  3. Dreamweaver Cs4 を起動
  4. プルダウンメニューの[コマンド]　→　[拡張機能の管理]で、Adobe Extension Manager を起動。
  5. 製品　Dreamweaver CS4　を選択して、インストールボタンから、「Zen Coding v.0.6.mxp」を選択してインストールします
  6. Dreamweaver Cs4 を再起動。
  7. プルダウンメニューの[コマンド] に [Zen Coding]のメニューが現れていればOK。
WindowsVISTA + Dreamweaver8 では、
Zen Coding for Dreamweaver v0.5 で動作確認しました。

Zen coding

Zen coding の展開は、「Ctrl + ,（カンマ）」です。
html:5
div#contents>ul>li.name$*5>a
div#main>div#header+div#menu+div#contents+div#footer
table>tr*5>th+td*4

ショートカット

ショートカットは下図を参考に（Alt+矢印キーが便利）。

便利

タグの削除が、「Ctrl+\」
「Ctrl+H」もスゴイ。

※補足

zen_settings.js （langやcharsetの修正）のファイルバス

C:\Users\_username_\AppData\Roaming\Adobe\Dreamweaver CS4\ja_JP\Configuration\Commands\ZenCoding\zen_settings.js

偉大なる参照サイト

Archive