emmetを使ってコーディングのスピードアップを目指す。


今回はコーディングソフトで使用するプラグイン「emmet」についてです。
emmetを導入することで短文で構造を指定することができます。

■DreamweaverでのEmmetのインストール
http://emmet.io/download
emmet1

GitHubに転送されるのでEmmet.zxpの所をクリックするとダウンロードできます。
emmet2
ADOBE EXTENSION MANAGERを起動して「ファイル>拡張機能をインストール」を選択し
先ほどダウンロードしたEmmet.zxpを選ぶとインストールが始まります。
emmet3

■emmetの使い方

Emmetをインストールしている状態で

Ctrl+Eで展開

たとえばimgと入力して展開してみます。

img
展開(Ctrl+E)すると

一瞬でimgタグの中にsrcとaltが生成されました。

次にこの短縮系
ul>li
展開(Ctrl+E)すると

ul内にliが生成されました。
>を使う事で下層に対して指定ができます。

最後に少し難しい短縮系
ul>li.item$*5
展開(Ctrl+E)すると

ul内のliにクラス.itemに$で連番を指定し、*でliに対しての数を指定しています。

面倒くさい構造とクラス指定がたった1行でできてしまいました。

最後に参考サイトとしてチートシートが公開されているので載せておきます。

http://docs.emmet.io/cheat-sheet/