コーディングが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

6 Responses

  1. 2011年4月19日

    […] RL+「?fb_xd_fragment=」のパラメータを付加したページが生成されてページビューとしてカウントするといったバグのようなものがあります。 http://www.myu-zin.com/webridge/archives/663.html?fb_xd_fragment= […]

  2. 2011年7月19日

    […] ドリームウィーバープラグイン […]

  3. 2011年7月19日

    […] ドリームウィーバープラグイン […]

  4. 2013年1月21日

    […] studio デザインブログ Zen-Codingでできるあんなことこんなこと | gaspanik weblog コーディングが4倍早くなる「zen-coding」をDreamweaver CS5に導入してみる « We… もしも10分の1の行数でHTMLが書けたら(1/2) ─ @IT zen […]

  5. 2013年6月27日

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

  6. 2013年9月12日

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

コメントを残す

メールアドレスが公開されることはありません。