こしあん日記 ~写真と猫とサッカーと~

子供たちの記録用にはじめたが、思春期になり写真を撮らせてもらえなくなる。写真と愛猫とサッカーが中心のブログです。

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>