ZenCodingでHTML記述速度を上げる2

続き
Part1では基本WinのEclipseでの検証だったけれど
今回は事情でMacのNetBeansから動作検証。

展開キーは
Win ……Ctrl +E
Mac……comand +E

---

* 属性の指定

img.html

/* img */
<img src="" alt="" />

/* img[width=100][height=200] */
<img src="" alt="" width="100" height="200" />

デフォルトでついてくる属性もある。
ない場合は [属性名= 値] 指定で追加できる。
デフォルトの属性は変えられないのかな？

• リスト

list.html

/* ul+ */
<ul>
  <li></li>
</ul>

ul+でリスト項目をセットに出力。
ddタグなどにも使用可能

table.html

/* table+ */
<table>
  <tr>
    <td></td>
  </tr>
</table>

最低限の形はこれでよいけど

table.html

/* table#test>tr*3>td.sample1+td.sample2 */
<table id="test">
  <tr>
    <td class="sample1"></td>
    <td class="sample2"></td>
  </tr>
  <tr>
    <td class="sample1"></td>
    <td class="sample2"></td>
  </tr>
  <tr>
    <td class="sample1"></td>
    <td class="sample2"></td>
  </tr>
</table>

面倒くさいテーブルもすぐにできる。
tableタグid=test > trを3回繰り返す > tdタグclass=sample1 と tdタグclass=sample2

> は小要素
+は隣接属性の追加

さっきのリストもそうだけど、+がないと単なる<table></table>になるので注意。

• グループ化

priority.html

/* (ul>li*3)+h2+p */
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
<h2></h2>
<p></p>

カッコで括らないと、ulの中にh2とpが括られるので注意

• 連番

increment.html

/* (ul>li[class=test$]*3) */
<ul>
  <li class="test1"></li>
  <li class="test2"></li>
  <li class="test3"></li>
</ul>

$は連番

• ラップ変換（Wrap with Abbreviation） 囲った範囲をタグで括れる。 IDEのショートカットキーの設定されている項目から 「Wrap with Abbreviation」に割り当てられているキーを確認 （参考にした情報と、自分の環境とのキーが異なっていたため。僕の環境だとCtrl+Command+ w）
  

括ってWrap with Abbreviationショートカットキー押すと、以下のダイアログが出るので、
括りたいタグを指定する（存在しないタグだと無理っぽい）

wrap.html

<div>テスト</div>

こうなる。
範囲が広いdivとか、あとからpなんか足したいときに便利そう。

• 参考サイト
  //ぱせらんメモ
  http://d.hatena.ne.jp/pasela/20100223/zencoding

• 参考書籍
  『HTML+CSSコーディングが10倍速くなるZen Coding 』　著こもり　まさあき 、岡部 和昌