emmetでのHTMLコーディング

昔はZen-codingという名称だった、HTMLやCSSコーディング補助ツールです。
Dreamweaverや各種テキストエディタのプラグインとして利用できます。

特長としては、省略記法での記述と、ショートカットキーによる生成です。
タグを省略記述し、終タグの記述も不要なためかなり効率化できます。

■ネストによる記述
>を入力することでネストになります。

記述例

nav>ul>li

HTML

<nav>
  <ul>
    <li></li>
  </ul>
</nav>

■同列
タグとタグを+でつなぐことで同列記述になります。

記述例

dl>dt+dd

HTML

<dl>
  <dt></dt>
  <dd></dd>
</dl>

■上に戻る
1つ上に戻るタグの次に^を記述

記述例

div>p^div>p

HTML

<div>
  <p></p>
</div>
<div>
  <p></p>
</div>

■繰り返し
繰り返すタグの後ろに*と繰り返し回数を入力

記述例1

ul>li*3

HTML

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

記述例2

dl>(dt+dd)*2

HTML

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

■連番表示
$で連番表示ができる$の数が桁数になる。

記述例

ul>li.case$$$*2

HTML

<ul>
  <li class="case001"></li>
  <li class="case002"></li>
</ul>

■属性割当
タグ内の属性を記述する場合に[]を利用する。

記述例

input:t[title]

HTML

<input type="text" name="" id="" title="">

■文字挿入
文字を挿入するタグの後ろに{}で囲んで記述

記述例

p{hello world}

HTML

<p>hello world</p>

コメントを書く