目次
- Zen Codingとは?
- Dreamweaver Zen Codingのインストール方法
- Expand Abbreviation (Ctrl+,)
- Wrap with Abbreviation (Ctrl+H)
- Reflect CSS Value (Ctrl+R)
- 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+\)
- Toggle Comment (Ctrl+/)
- Split/Join Tag (Ctrl+Shift+\)
- Rename Tag (Ctrl+Shift+B)
- Remove Tag (Alt+-)
- Evaluate Math Expression
- Increment number by 1 (Ctrl+上矢印キー)
- Decrement number by 1 (Ctrl+下矢印キー)
- Increment number by 10 (Ctrl+Alt+上矢印キー)
- Decrement number by 10 (Ctrl+Alt+下矢印キー)
- Increment number by 0.1 (Alt+上矢印キー)
- Decrement number by 0.1 (Alt+下矢印キー)
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減らす。