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="">

1	<img src="" alt="">

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

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

<ul>
    <li></li>
</ul>

<ul>

</ul>

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

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

<ul>
	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
</ul>

<ul>

</ul>

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

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

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

Javascriptを使ってカーソルが触れると画像を変更する。

第三十回「WordPressにファビコンを設定するプラグインFavicon by RealFaviconGenerator」