Zen-Coding、まだ基本的な使い方しかしていないのだけど、他にも便利な方法があるのかな。
新しく知ったら、ここに追加していくことにしよう。
Zen-Coding
http://code.google.com/p/zen-coding/
私の場合は、MacでDreamweaverを使っているので、ショートカットを入力して、展開はcontrolキーと,(カンマ)キーを一緒に押すだけ。
1. 基本的なショートカット
html:5
と入力すると、以下のように展開される。
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html> |
はじめから文書の構造がわかっていれば、とても便利。
div#wrapper>(div#header>h1)>ul#navi>li*5>a
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="wrapper">
<div id="header">
<h1></h1>
</div>
<ul id="navi">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div> |
同じ事の繰り返しは「*」、数字を付けるなら「$」
ul#navi>li.item$*5
|
1 2 3 4 5 6 7 |
<ul id="navi">
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul> |
属性の値もあらかじめ指定できる。
a[href="#"]*5
|
1 2 3 4 5 |
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a> |
div#name>p.one+p.two
|
1 2 3 4 |
<div id="name">
<p class="one"></p>
<p class="two"></p>
</div> |
その他、基本的なショートカットは以下のPDFを参照できます。
Zen Coding cheat sheet (PDF)
http://code.google.com/p/zen-coding/downloads/detail?name=ZenCodingCheatSheet.pdf
2. Wrap変換 (Wrap with Abbreviation) 機能
さらに、Wrap変換 (Wrap with Abbreviation) という機能も便利そう。
要するに、流し込んである原稿や文章を、任意のタグで囲むモードのことを言うらしい。
たとえば、
|
1 2 3 |
りんご
みかん
ばなな |
という文章を<li>タグで囲みたいとする。
Dreamweaverの場合は、対象の文章を選択して、
メニュー「コマンド」> 「Zen Coding」の 「Wrap with Abbreviation」
（ショートカットキーは「command + h 」）
Generic Prompt Dialogというポップアップが表示されるので、そこに、ul>li* と入力する。
すると、以下のように、指定したタグで囲んでくれる。これも便利そう。
|
1 2 3 4 5 |
<ul>
<li>りんご</li>
<li>みかん</li>
<li>ばなな</li>
</ul> |
