Zen Coding を使いこなそう！

しろうさぎのwebnotebook

行の末尾で、「Ctrl+カンマ（,）」で変換する。

html：変換前

  1. div

html：変換後

  1. ＜div＞＜/div＞

html：変換前

  1. #header+#wrapper+#footer

html：変換後

  1. ＜div id="header"＞＜/div＞
  2. ＜div id="wrapper"＞＜/div＞
  3. ＜div id="footer"＞＜/div＞

html：変換前

  1. div.box

html：変換後

  1. ＜div class="box"＞＜/div＞

html：変換前

  1. #wrapper.box

html：変換後

  1. ＜div id="wrapper" class="box"＞＜/div＞

html：変換前

  1. #wrapper.box.text01

html：変換後

  1. ＜div id="wrapper" class="box text01"＞＜/div＞

・構造化を含めた記法

html：変換前

  1. #wrapper>#mainContent+#sideContent

html：変換後

  1. ＜div id="wrapper"＞
  2. 　＜div id="mainContent"＞＜/div＞
  3. 　＜div id="sideContent"＞＜/div＞
  4. ＜/div＞

・複数個まとめてタグを追加

html：変換前

  1. .box*5

html：変換後

  1. ＜div class="box"＞＜/div＞
  2. ＜div class="box"＞＜/div＞
  3. ＜div class="box"＞＜/div＞
  4. ＜div class="box"＞＜/div＞
  5. ＜div class="box"＞＜/div＞

・連番を付与しながら複数個まとめてタグを追加

html：変換前

  1. div.box$*5

html：変換後

  1. ＜div class="box1"＞＜/div＞
  2. ＜div class="box2"＞＜/div＞
  3. ＜div class="box3"＞＜/div＞
  4. ＜div class="box4"＞＜/div＞
  5. ＜div class="box5"＞＜/div＞

・けたを指定した連番を付与しながら複数個まとめてタグを追加

html：変換前

  1. div.box$$$*5

html：変換後

  1. ＜div class="box001"＞＜/div＞
  2. ＜div class="box002"＞＜/div＞
  3. ＜div class="box003"＞＜/div＞
  4. ＜div class="box004"＞＜/div＞
  5. ＜div class="box005"＞＜/div＞

html：変換前

  1. table+

html：変換後

  1. ＜table＞
  2. 　＜tr＞
  3. 　　＜td＞＜/td＞
  4. 　＜/tr＞
  5. ＜/table＞

html：変換前

  1. dl>dt+dd

html：変換後

  1. ＜dl＞
  2. 　＜dt＞＜/dt＞
  3. 　＜dd＞＜/dd＞
  4. ＜/dl＞

html：変換前

  1. ul>li*3

html：変換後

  1. ＜ul＞
  2. 　＜li＞＜/li＞
  3. 　＜li＞＜/li＞
  4. 　＜li＞＜/li＞
  5. ＜/ul＞

html：変換前

  1. .box>ul#global.nav>li*3>a

html：変換後

  1. ＜div class="box"＞
  2. 　＜ul id="global" class="nav"＞
  3. 　　＜li＞＜a href=""＞＜/a＞＜/li＞
  4. 　　＜li＞＜a href=""＞＜/a＞＜/li＞
  5. 　　＜li＞＜a href=""＞＜/a＞＜/li＞
  6. 　＜/ul＞
  7. ＜/div＞

html：変換前

  1. .box>ul#global.nav>li*3>a

html：変換後

  1. ＜div class="box"＞
  2. 　＜ul id="global" class="nav"＞
  3. 　　＜li＞＜a href=""＞＜/a＞＜/li＞
  4. 　　＜li＞＜a href=""＞＜/a＞＜/li＞
  5. 　　＜li＞＜a href=""＞＜/a＞＜/li＞
  6. 　＜/ul＞
  7. ＜/div＞

html：変換前

  1. .box>ul#global.nav>li*3>a

html：変換後

  1. ＜div class="box"＞
  2. 　＜ul id="global" class="nav"＞
  3. 　　＜li＞＜a href=""＞＜/a＞＜/li＞
  4. 　　＜li＞＜a href=""＞＜/a＞＜/li＞
  5. 　　＜li＞＜a href=""＞＜/a＞＜/li＞
  6. 　＜/ul＞
  7. ＜/div＞

html：変換前

  1. .box>ul#global.nav>li*3>a

html：変換後

  1. ＜div class="box"＞
  2. 　＜ul id="global" class="nav"＞
  3. 　　＜li＞＜a href=""＞＜/a＞＜/li＞
  4. 　　＜li＞＜a href=""＞＜/a＞＜/li＞
  5. 　　＜li＞＜a href=""＞＜/a＞＜/li＞
  6. 　＜/ul＞
  7. ＜/div＞

IE用出し分けコメントアウトを追加

html：変換前

  1. cc:ie6

html：変換後

  1. ＜!--[if lte IE 6]＞
  2. 　
  3. ＜![endif]--＞