Emmetとは

Emmetは HTML や CSS を省略記法で簡潔に記述するためのプラグインツールです。
VS Code や SublimeText、Atom 等の様々なエディタで使用することができます。
特にVS Codeでは、Emmetが標準搭載されているのでVS Codeを使ってます！
という人もいるくらい、便利な機能です。

使えるようになると、コードを 1 から全部記述しなくてもよくなるので、
非常にコーディングの効率化が図れるようになリます。
そんなEmmetについて、少しまとめてみました。

HTMLでの書き方

Emmetの記述方法はとても簡単です。
VS Codeを使ってる人は無意識に使ってるものもあると思います。

基本の形

「h2」や「p」など要素を入力した後に、「 Enter 」キーか「 Tab 」キーを押すと要素のタグと閉じタグが自動で入力されます。

同じ要素を増やしたいときは
要素・数字 で増やしたい数だけ掛け算するとめちゃ便利！大活躍！！

div は 　.　 だけで出てきます。

階層の形

>（入れ子）
リストやテーブルなどで使う機会が多いです。
階層があるコードを記述したい時にこの形で記述すると楽です。

例）リストの中のテキストにリンク設定するとき

よく見る形に変換されます。
さらに複製も加えるとあっという間にリストが出来上がります。

id・classも付けれちゃう

「 . 」でclass付与

class付与したい要素に 　.クラス名　 を付け足します。

「 # 」でid付与

同様にid付与したい要素に 　#id名　 を付け足します。

連番のクラス名も付けれちゃう

連番にしたい部分に 　$　 をつけると連番にできます。
$を増やすと桁数が増えます。

その他

+　 同じ階層に並べることができる

()　 括弧でくくると要素のまとまりを指定できます。

^　 一つ上の階層に戻ります。
下の例では2回打ってるので2階層分戻ってます。

{}　 テキストを挿入させる。

lorem ダミーテキストが入力されます。

CSSでの書き方

CSSもHTML同様に省略記法を記述したあと「 Enter 」キーか「 Tab 」キーを押すと展開されます。

例えば、「 margin-bottom: 60px; 」を出力したいときは
「 margin-bottom: 60px; 」と値の頭文字が省略記法となることが多いです。

値の複数指定する場合は、「 – 」で値をつなぎます。

CSSもHTML同様に一気に書くこともできます。

このようなCSSを出したいとき
それぞれのプロパティを「 + 」でつなげて書きます。
個人的にこの書き方は自分が分かりにくいのであまり使ってません。

CSSはなんとなくでおっけい

Emmetの前のバージョンでは「Zen-Coding」と呼ばれ、記述方法が正確に書かないといけなくどこか一文字でも間違ってると展開されないものでした。
そしてバージョンアップされた「Emmet」ではあいまいな書き方でもそれに近いプロパティを見つけて展開してくれます。
なので、記述方法など完璧に覚えなくてもなんとなくで展開されるすんばらしいものなのです。

例えば、display: flex;を出力するには、正しい記述は「 df 」ですが、「d:f」や「 dfl 」など
それっぽいことを書けば見つけて出力してくれます。

最初は慣れず普通に書いた方が早いと感じていましたが、
慣れるとすごく便利でコーディングの効率化にもつながるためおすすめです。