前回の記事でzen-cordingのことを書きましたが、実は恐ろしいほど簡単にコーディングができる方法があるんです!
それがZen-Codingです!!
現在はEmmetとしてバージョンアップして開発されているようです。かなり使いやすくなっています!!
スポンサーリンク
html:5とかけば
と展開してくれる。
div#containerとかけば
と表示してくれますし、
div#container>ul.list>li*3>a>imgと記述して展開すれば
としてくれる。なんともありがたいことで
table > thead > tr > th.title + th.author << tbody > tr*3 > td{タイトル} + td{著者}ここまで書いて展開!
タイトル | 著者 |
タイトル | 著者 |
タイトル | 著者 |
さらに
select[name=sample][id=test]>option[value=$$$]{$$$}*10
とかけば
連番までつけてくれます!!
さらにこんなことまで。。
リスト
リスト
リスト
リスト
リスト
リスト
このテキストを選択した状態でctrl+hで
囲む要素を指定すると(例えばli*とします)
としてくれます~!
これはすごいじゃないか~といことで早速ドリームウィーバーにも入れました。使い方は簡単!
先ほどのコードを記述してCtrl+,(カンマ)をすればよい。そうすると展開しました。私の環境ではうまくできなかったので、コードの展開をCtrl+:(コロン)で表示するように設定しました。メニューの編集-キーボードショートカット-コマンド-zen-codingのExpand Abbreaviationを選択して変えてやればよいです。
詳しくはココをご覧あれ!知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた