ほんの少しの時短も、日々コーディングをしているコーダーにとっては大きなスピートアップにつながります。
そんな時短につながる、Emmetを利用する方法を紹介します。
[adsense]
Emmetとは
Emmet（エメット）はHTMLやCSSの入力を高速化することができるプラグインです。
DreamweaverCC 2014以降、Emmetをサポートをするようになったため、
高速な入力ができるようになりました。
Emmetを使ってみる
何よりも実際に入力する方が理解しやすいと思います。
例えば、ナビメニューのコーディングをする場合、
下記の入力をすればいいだけ。
idがnavのulタグの中に、liタグを４つ、
classがlinkのaタグで連番の画像を配置します。
ul#nav>li*4>a.link>{<img src="00$.jpg">}
tabキーを押すとEmmetが適用され、下記のコードに変換されます。
<ul id="nav"> <li><a href="" class="link"><img src="001.jpg"></a></li> <li><a href="" class="link"><img src="002.jpg"></a></li> <li><a href="" class="link"><img src="003.jpg"></a></li> <li><a href="" class="link"><img src="004.jpg"></a></li> </ul>
そのほかのEmmetの入力例は、
こちらから確認できます。