前回の記事でzen-cordingのことを書きましたが、実は恐ろしいほど簡単にコーディングができる方法があるんです！
それがZen-Codingです！！
現在はEmmetとしてバージョンアップして開発されているようです。かなり使いやすくなっています！！
スポンサーリンク
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#containerとかけば
1 | <div id="container"></div> |
と表示してくれますし、
div#container>ul.list>li*3>a>imgと記述して展開すれば
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id="container"> <ul class="list"> <li><a href=""><img src="" alt=""></a></li> <li><a href=""><img src="" alt=""></a></li> <li><a href=""><img src="" alt=""></a></li> </ul> </div> |
としてくれる。なんともありがたいことで
table > thead > tr > th.title + th.author << tbody > tr*3 > td{タイトル} + td{著者}ここまで書いて展開！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <table> <thead> <tr> <th class="title"></th> <th class="author"></th> </tr> </thead> <tbody> <tr> <td>タイトル</td> <td>著者</td> </tr> <tr> <td>タイトル</td> <td>著者</td> </tr> <tr> <td>タイトル</td> <td>著者</td> </tr> </tbody> </table> |
さらに
select[name=sample][id=test]>option[value=$$$]{$$$}*10
とかけば
1 2 3 4 5 6 7 8 9 10 11 12 | <select name="sample" id="test"> <option value="001">001</option> <option value="002">002</option> <option value="003">003</option> <option value="004">004</option> <option value="005">005</option> <option value="006">006</option> <option value="007">007</option> <option value="008">008</option> <option value="009">009</option> <option value="010">010</option> </select> |
連番までつけてくれます！！
さらにこんなことまで。。
1 2 3 4 5 6 | リスト リスト リスト リスト リスト リスト |
このテキストを選択した状態でctrl+hで
囲む要素を指定すると（例えばli*とします）
1 2 3 4 5 6 | <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> |
としてくれます～！
これはすごいじゃないか～といことで早速ドリームウィーバーにも入れました。使い方は簡単！
先ほどのコードを記述してCtrl＋,（カンマ）をすればよい。そうすると展開しました。私の環境ではうまくできなかったので、コードの展開をCtrl+:（コロン）で表示するように設定しました。メニューの編集-キーボードショートカット-コマンド-zen-codingのExpand Abbreaviationを選択して変えてやればよいです。
詳しくはココをご覧あれ！知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた
