zen-coding導入【Dreamweaver CS3】

ちょっとずっと気になっていたzen-codingを導入してみたので導入方法をメモ。

1. 「Zen Coding for Dreamweaver v0.6」をダウンロード
2. 解凍して「Zen Coding v.0.6.mxp」を実行してインストール
3. 次にIssues121ページから「zen_editor.js」をダウンロード
4. C:\Documents and Settings\【ユーザ名】\Application Data\Adobe\Dreamweaver 9\Configuration\Commands 内にあるzen_editor.jsを3でダウンロードしたものに差し替える
5. Dreamweaverを起動し、［コマンド］に［Zen Coding］の項目が追加されていることを確認して導入完了！

イエェーーイ！

(#header>h1)+#content+#footer

とコードビューで入力し、テケテーンっとるんるん気分で「Ctrl+,（カンマ）」を入力したが音沙汰なし！

がーん…

とりあえず、[コマンド]→[Zen Coding]→[Expand Abbreviation]でやってみるとうまく展開されるので、ショートカットが悪いのか…

と思い、ショートカットを設定しなおしてみる…

「Ctrl+Alt+Z」があいていたので設定！

チャカチャーーン

<div id="header">
  <h1></h1>
</div>
<div id="content"></div>
<div id="footer"></div>

うまく展開されました！

ちなみに括弧なしの場合、

#header>h1+#content+#footer

↓

「Ctrl+Alt+Z」

↓

<div id="header">
  <h1></h1>
  <div id="content"></div>
  <div id="footer"></div>
</div>

ってなるよ！

さらに…

li.step$*6

って書くと、、、

<li class="step1"></li>
<li class="step2"></li>
<li class="step3"></li>
<li class="step4"></li>
<li class="step5"></li>
<li class="step6"></li>

いやー、感動。これすごい。

Dreamweaverにもコードヒントはあるけれど、このzen-codingを使いこなせればスピードアップ間違いなしだね！

【参考】
Zen-Codingで楽々コーディング! + コツ1つ
Zen Coding cheat sheet (PDF)　←Elements一覧PDFがある

関連記事

• Dreamweaver CS5でなくなったバリデート機能を復活させたい！
• エラーのため次のトランスレータがロードされませんでした。の対処法【Dreamweaver】