zencodingを使うには

zencodingは便利だ。という声を聞きつつ、私もなかなか試せなかったのですが、やっと決心がついたのでチャレンジしました。

zencodingとは

簡単なコマンドを書き込むとタグを展開してくれるという、要はキーボードで打ち込む文字数を減らせるプラグインのようなものです。ただその簡単なコマンドというものを自分で打つためには、その決まりを覚えて使いこなせなくてはなりません。

DreamweaverCS5でインストールする方法

まずはダウンロードしてこなくてはなりません。
ダウンロードはこちら
Zen.Coding-Dreamweaver.v0.7.2.zip – zen-coding – Zen Coding for Dreamweaver v.0.7.2 – Set of plugins for HTML and CSS hi-speed coding – Google Project Hosting
http://code.google.com/p/zen-coding/downloads/detail?name=Zen.Coding-Dreamweaver.v0.7.2.zip

DreamweaverCS5にインストールする方法です。
WindowsXPで試しました。
①先程ダウンロードしたファイルを解凍します。
②Dreamweaverを起動します。
③メニューから「ヘルプ」-「拡張機能の管理」を選択。
④Adobe Extention Manager CS5が起動するのでインストールボタンを押す。
⑤解凍してできた「Zen Coding v.0.7.2.mxp」ファイルを選択し、「開く」ボタンを押す。
⑥指示に従いインストールを続ける。
⑦インストールが終わったらDreamweaverを再起動する。
⑧メニューの「コマンド」に「Zen Coding」というのができていればインストール成功。

zencodingを体験するには

早速サンプルです。
コードビューで<body>の後ろに打ち込んでみましょう。

div#sample

打ち込み終わったらメニュー「コマンド」-「Zen Coding」-「Expand abbreviation」を選択します。ショートカットキーは「CTRL」キーと「,」キーです。

<div id="sample"></div>

に展開されました。

zencoding記法を調べるには

こちらのサイトがわかりやすく実例を載せています。
秀丸マクロでZen-Coding
http://exoego.net/archives/zencoding-in-hidemaru

このサイトのサンプルをいくつか試したのですが
入力時半角スペースで書いてあるところは、Dreamweaverでは代わりに>を入れるとうまくいくことがあります。
通常モードの変換は「Ctrl」キーと「,」キーですが、Wrapモードは範囲選択した後「Ctrl」キーと「H」キーがショートカットです。

広告