Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

Zen-Coding標準コマンド

Zen-Codingの標準的コマンドを紹介

  • Ctrl+EでZen-Coding実行

html

展開後

<html></html>
  • id指定は『#』で行う

div#id

展開後

<div id="id"></div>
  • class指定は『.』で行う

div.class

展開後

<div class="class"></div>
  • classの並列指定は『.』でつなげて行う

div.class1.class2

展開後

<div class="class1 class2"></div>
  • 子要素の追加は『>』

table>tr>td

展開後

<table>
    <tr>
        <td></td>
    </tr>
</table>
  • 同階層に要素を追加は『+』

html>head+body>div.id

展開後

<html>
    <head></head>
    <body>
        <div class="id"></div>
    </body>
</html>
  • 『[]』で属性を指定

input[type="text" name="name" value="value"]

展開後

<input type="text" name="name" value="value">
  • 連番属性を作成

input[type="text" name="list$"]*20

展開後

<input type="text" name="list1" value="">
<input type="text" name="list2" value="">
<input type="text" name="list3" value="">
<input type="text" name="list4" value="">
<input type="text" name="list5" value="">
<input type="text" name="list6" value="">
<input type="text" name="list7" value="">
<input type="text" name="list8" value="">
<input type="text" name="list9" value="">
<input type="text" name="list10" value="">
<input type="text" name="list11" value="">
<input type="text" name="list12" value="">
<input type="text" name="list13" value="">
<input type="text" name="list14" value="">
<input type="text" name="list15" value="">
<input type="text" name="list16" value="">
<input type="text" name="list17" value="">
<input type="text" name="list18" value="">
<input type="text" name="list19" value="">
<input type="text" name="list20" value="">

HTML+CSSコーディングが10倍速くなるZen Coding

HTML+CSSコーディングが10倍速くなるZen Coding