Dreamweaver CCでコーディングしてたら、チュートリアル的なやつが出てきて、私の知らないコーディング方法を教えてくれた。
その名も「Emmet」！
主要なIDEにインストール可能なコーディング時間短縮が目的のプラグインらしい。
HTMLのコーディング中に、以下のように入力して、
ul>li.item$*2「Tab」キーを押すと、
<ul>
<li class="item1"></li>
<li class="item2"></li>
</ul>となる。
ショートコード（チートコード）を書いてTabキーを押すと、一気にHTMLタグが生成されるというわけだ。
なるほど、これは『オレ、パソコン詳しい』な人が必要ないのにわざわざコマンドプロンプトで操作するみたいな調子こいた使い方が出来そうだ！
使い方もっと詳しく
というわけで、バリバリ使えるようになるように使い方をちょっとまとめてみた。
- > ： 親要素の下に子要素を書く
- . ： クラスやIDを書く
- *x ： x回繰り返し書く
- $ ： 連番を振る
- {} ： 内容テキストを書く
- + ： 続けて書く
- () ： グループ化する
- ^ ： 1階層上に戻る
> ： 親要素の下に子要素を書く
ショートコード
div>ul>li
結果
<div>
<ul>
<li></li>
</ul>
</div>
. # ： クラスやIDを書く
ショートコード
div#abc>ul.def>li
結果
<div id="abc">
<ul class="def">
<li></li>
</ul>
</div>
*x ： x回繰り返し書く
ショートコード
ul>li*3
結果
<ul>
<li></li>
<li></li>
<li></li>
</ul>
$ ： 連番を振る
ショートコード
ul>li.item$*3
結果
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
$$と2つ書くと、01、02のように2桁の連番になる。
{} ： 内容テキストを書く
ショートコード
p{テキスト}
結果
<p>テキスト</p>
[属性=値] ： 属性と値を書く
ショートコード
a[href=#]
結果
<a href="#"></a>
+ ： 続けて書く
ショートコード
ul>li.abc+li.def
結果
<ul>
<li class="abc"></li>
<li class="def"></li>
</ul>
() ： グループ化する
ショートコード
ul>(li.abc+li.def)*2+li.ghi
結果
<ul>
<li class="abc"></li>
<li class="def"></li>
<li class="abc"></li>
<li class="def"></li>
<li class="ghi"></li>
</ul>
^ ： 1階層上に戻る
ショートコード
div>ul>li^p>a^^p
結果
<div>
<ul>
<li></li>
</ul>
<p><a href=""></a></p>
</div>
<p></p>
ひとまずこんなところか。
他のショートコード（チートコード）は、以下のリンクを参照。
→ Emmet チートシート（http://docs.emmet.io/cheat-sheet/）
新人コーダーの前でEmmet使ってタララッと華麗にコーディングして「何ソレ！先輩カッコいい～！」とか言われたい人は覚えるべし。
