DreamweaverでEmmetを利用し高速コーディング

ほんの少しの時短も、日々コーディングをしているコーダーにとっては大きなスピートアップにつながります。
そんな時短につながる、Emmetを利用する方法を紹介します。

[adsense]

Emmetとは

Emmet(エメット)はHTMLやCSSの入力を高速化することができるプラグインです。
DreamweaverCC 2014以降、Emmetをサポートをするようになったため、
高速な入力ができるようになりました。

Emmetを使ってみる

何よりも実際に入力する方が理解しやすいと思います。
例えば、ナビメニューのコーディングをする場合、
下記の入力をすればいいだけ。

idがnavのulタグの中に、liタグを4つ、
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の入力例は、
こちらから確認できます。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

*