Dreamweaver使いなら必ず覚えたいZen Codingの使い方

dw_zencoding

Zen Codingとは?

HTMLとCSSをショートカットや短縮記法でコードを書くことができるライブラリです。
たとえばul>li*5と記述してZen CodingをExpand Abbreviationを実行すると下記のコードが書き出されます。

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Dreamweaver Zen Codingのインストール方法

下記のサイトからダウンロードしてインストールする。

Zen Coding for Dreamweaver
http://code.google.com/p/zen-coding/downloads/list

HTML,CSSの記法に関してはYahoo! Tech Blogで詳しく解説されている。Zen Codingはインストールするエディタやオーサリングツールによって使用できるメニューが異なる。今回はDreamweaverのZen Codingで使えるメニューに関して解説。

Expand Abbreviation (Ctrl+,)

Zen Coding記法の展開。p>spanなどを<p><span></span></p>のように展開する。

Wrap with Abbreviation (Ctrl+H)

選択範囲のテキストを指定したタグで括る。
たとえば以下のように3行のテキストがあるとする。

あああ
いいい
ううう

この3行を選択してul>li*を実行すると以下のようにタグで括ることができる。

<ul>
    <li>あああ</li>
    <li>いいい</li>
    <li>ううう</li>
</ul>

Reflect CSS Value (Ctrl+R)

プロパティの値を他のプレフィックスと関連のあるプロパティに反映する

.test {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 5px;
}

border-radiusのところでCtrl+Rを押すと他のプレフィックス付きのプロパティが5pxになる。

.test {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Balance Tag

カーソルがある部分のタグ部分を選択

Balance Tag Outward (Alt+[)

カーソルがある部分のタグ部分の外側を選択

Balance Tag Inward (Alt+])

カーソルがある部分のタグ部分の内側を選択

Next Edit Point (Ctrl+Alt+右矢印キー)

次の編集ポイントへ移動

Previous Edit Point (Ctrl+Alt+左矢印キー)

前の編集ポイントへ移動

Go to Matching Pair (Alt+/)

カーソルがある場所のタグの先頭と閉じタグの直前を交互に選択

Select Next Item (Alt+右矢印キー)

次の項目を選択

Select Previous Item (Alt+左矢印キー)

前の項目を選択

Insert Formatted Newline (Ctrl+入力)

フォーマットを適用した状態で改行

Select Line (Ctrl+K)

行選択

Merge Line (Ctrl+\)

複数行のテキストを1行にする。

Toggle Comment (Ctrl+/)

カーソルがある位置のタグのHTMLコメントを付けたり消したりする。

Split/Join Tag (Ctrl+Shift+\)

閉じタグを付けたり消したりする。

Rename Tag (Ctrl+Shift+B)

タグをリネーム

Remove Tag (Alt+-)

タグを除去

Evaluate Math Expression

四則演算が可能に。padding:1+2がpadding:3になる。

Increment number by 1 (Ctrl+上矢印キー)

数字を1増やす。

Decrement number by 1 (Ctrl+下矢印キー)

数字を1減らす。

Increment number by 10 (Ctrl+Alt+上矢印キー)

数字を10増やす。

Decrement number by 10 (Ctrl+Alt+下矢印キー)

数字を10減らす。

Increment number by 0.1 (Alt+上矢印キー)

数字を0.1増やす。

Decrement number by 0.1 (Alt+下矢印キー)

数字を0.1減らす。