2017年7月18日
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>
コメントを書く