Emmetとは?
Emmet とは、HTML や CSS を省略記法で入力できるプラグインです。Visual Studio Code や SublimeText、Atom など多くエディタで利用できます。
Emmentを使うことで、キー入力を減らしコーディングの大幅な効率化ができます。
特に Visual Studio CodeはEmmet が標準搭載されているので、拡張機能を入れずに利用できます。
Visual Studio CodeでHTML、CSSを書く人は記法を覚えてまず損はないです。
Visual Studio CodeでEmmetを使う方法
EmmetでHTML、CSSを省略記法した後にTABキーをクリックするだけです。
HTMLのEmmetの記法例
いくつかピックアップして紹介します。
細かく知りたい人はチートシートもあるので参考にしてみてください。
-
Cheat Sheet
docs.emmet.io
以降は具体的な記法と結果をまとめていきます。上段のコードを入力しTABキーで下段のコードが展開されます。
HTML5ひな形
HTML5のひな形を出力します。
!
↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
タグ
各種タグを展開します。
h1
↓
<h1></h1>
タグ(class付き)
タグにクラスを付けた状態で展開します。
h1.test
↓
<h1 class="test"></h1>
タグ(id付き)
タグにID付けた状態で展開します。
h1#test
↓
<h1 id="test"></h1>
兄弟要素で展開
「+」を使って複数の要素を同じ階層で展開します。
div+h1+p
↓
<div></div>
<h1></h1>
<p></p>
要素をネストして展開
大なり記号「>」を使って要素をネストして展開します。
div>p>span
↓
<div>
<p><span></span></p>
</div>
兄弟要素とネストの組み合わせで展開
もちろん組み合わせもできます。
下記の場合、「div」の中に「p」と「span」を展開します。
div>p+span
↓
<div>
<p></p>
<span></span>
</div>
要素を繰り返して展開
「*」を使って同じ要素を任意の個数展開します。
div*5
↓
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
連番を付与して展開
「$」を使って連番をつけて展開もできます。
以下のように書くとclassにtest1~test5を連番で振ることができます。
div.test$*5
↓
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
コメント
個人的にはこれが地味に便利です。
c
↓
<!-- -->
CSSのEmmetの記法例
いくつかピックアップして紹介します。
CSSはプロパティ、プロパティ値の短縮になるので、表形式でいくつか紹介します。
細かく知りたい人はチートシートもあるので参考にしてみてください。
-
Cheat Sheet
docs.emmet.io
CSSのEmment
以下のような感じです。
記法 | 展開後 |
---|---|
p | padding: ; |
w | width |
w50 | width: 50px; |
まとめ
Emmetは、コーディング作業を効率よく行うために非常に強力な機能です。
全部覚える必要は無く、必要に応じて調べるのもアリです。
初めは慣れないかもしれませんが、慣れてしまうとコーディングがとても楽になるので使えるようになりましょう!