Zen Coding導入編(Dreamweaver CS5の場合)

20120613_123121_3

まず、コードを下記より入手します。

Downloads – zen-coding – Set of plugins for HTML and CSS hi-speed coding – Google Project Hosting

Zen Coding for Dreamweaver v.0.7.5 Featured」を選択。

ダウンロードしたファイルをクリックすると、Adobe Extension Manager が開きます。画面の指示に従って進めば、あっというまにインストール完了。

こんな感じで表示されればOKです。
20120613_123121_3.png

このときDreamweaverを起動していたら、再起動。

では、試しに使ってみます。適当に以下のような記述を・・・。

(ul>li.menu*5>a)+(div#content>section.section1>h1.content-header>p)+dl>(dt+dd)*5

Dreamweaverでのショートカットは「Ctrl + ,(カンマ)」なんですね。(Aptanaでは「Ctrl+E」だったので。)
では、ちゃんと行末にカーソルを合わせて・・・「Ctrl + ,」を入力。

20120613_123121_2.png

↓こんな感じ。便利ですね。
20120613_123121.png

それにしても、拍子抜けするくらい簡単に導入できちゃいますね。ありがたや、ありがたや。

備忘録 | , , , |