結論
慣れたらめちゃくちゃ使いやすくて、戻らずにはいられなくなる。
Emmetとは
Emmet(元 Zen-coding)は、HTMLやCSSの編集を効率化してくれるプラグインです。ここではSublime Textでのプラグインを紹介しますが、Atomにもあるようです。（ほかのエディタはわからないです...。）
省略記法によって記述されたHTML, CSSを展開することで、コードを記述することができます。
Emmetの使い方
Emmetのチートシートが以下にあります。基本的な記法から応用的な記法まですべて書いてあります。 Cheat Sheet
Emmetの基本的文法
Emmetの基本的な文法としては
タグ情報 メタ情報 テキスト 構造情報
です
タグ情報 div, p, aなどのタグ。<>は記述しません。
メタ情報 タグに付随する、class, id, typeなどです。classの場合は「.（ドット）」idの場合は「#」typeの場合には「:」でそれぞれ表現します。そのほかのメタ情報は「[属性名=値]」で表します。
テキスト タグの要素部分。「{}」で表現します。
構造情報 次に続くタグとの関係性を表します。入れ子の場合は「>」並列の場合は「+」階層が上位（現在のタグ要素から抜ける）場合は「^」で表現します。
例 省略記法から展開するには、tab, ctrl + Eを用います。
<!-- div.cotainer#main>h1{タイトル}+a[href=/ target=_black]{トップページ} --> <div class="container" id="main"> <h1>タイトル</h1> <a href="/" target="_blank">トップページ</a> </div>
その他文法
- 繰り返し 「*」で繰り返し数を指定します
<!-- li*3 --> <li></li> <li></li> <li></li>
- 連番 「$」と繰り返しを組み合わせます。
<!-- li#list$$*3 --> <li id="list01"></li> <li id="list02"></li> <li id="list03"></li> <!-- ul>li.item$$$*5 --> <ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul>
- グルーピング 「^」で階層を調整できますが、ネストが深くなると見づらくなるので「()」でまとめます。
<!-- html>(head>meta[charset=utf8]+title{テストタイトル})+(body>div.container) --> <html> <head> <meta charset="UTF-8"> <title>テストタイトル</title> </head> <body> <div class="container"></div> </body> </html>
- テンプレ 「!」を展開するとHTMLのひな型が展開されるそうです。テンプレは変更できるようです。
<!-- ! -- > <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
