HTMLを書いていると、<、>、閉じタグ……と、同じ記号を何度も打つのがだんだん面倒になってきます。そこで登場するのが Emmet（エメット）。短い合言葉を打って Tab を押すと、長いタグにパッと展開してくれる魔法です。しかも VSCodeには最初から入っているので、何も入れなくてすぐ使えます。
まずはこれ！ HTMLの雛形を一発で
新しい .html ファイルで、半角の ! を1文字だけ打って Tab。すると——
! → Tab<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html><!DOCTYPE html> から <html>・<head>・<body> まで、HTMLの“骨組み”がまるごと出てきます。毎回手で書いていた雛形が、たった1文字で完成です。
中身の文字も一緒に
{} の中に書いた文字は、そのままタグの中身になります。
h1{はじめての見出し}→<h1>はじめての見出し</h1>a{もっと見る}→<a href="">もっと見る</a>
つなげて、まとめて作る
Emmetの本領は、記号でタグを“組み立て”られること。
| 記号 | 意味 | 例 |
|---|---|---|
> | 子（中に入れる） | ul>li |
+ | 兄弟（となりに並べる） | h1+p |
* | くり返し | li*3 |
() | グループ | (li>a)*3 |
たとえば ul>li*3 と打って Tab：
ul>li*3 → Tab<ul>
<li></li>
<li></li>
<li></li>
</ul>リストの箱と中身3つが、一瞬で出そろいます。
クラスやIDも記号で付けられる
CSSと同じ書き方で、class や id も一緒に指定できます。
| 記号 | 意味 | 例 |
|---|---|---|
. | class | div.card |
# | id | div#header |
div.card → Tab<div class="card"></div>. と # は組み合わせもできます。div.card#main なら <div class="card" id="main"></div> が一発で出ます。タグ名は省略もOKで、.card とだけ打っても div.card と同じ結果になります。
属性も [] で一緒に書ける
href や type のような属性は、[] の中に書きます。
a[href="https://example.com"]{れんしゅうサイト} → Tab<a href="https://example.com">れんしゅうサイト</a>input[type="checkbox"] → <input type="checkbox"> のように、フォーム部品を作るときにも便利です。ちなみに img は1文字ずつ属性を書かなくても、img とだけ打てば <img src="" alt=""> と、必要な属性の枠つきで展開されます。
記号を組み合わせて“ひとかたまり”を作る
ここまでの記号は、ぜんぶ混ぜて使えます。たとえばカードのパーツをまるごと1行で。
div.card>h2{タイトル}+p{せつめいの文章} → Tab<div class="card">
<h2>タイトル</h2>
<p>せつめいの文章</p>
</div>「箱の中に、見出しと段落」という構造を、日本語で考えた順番のまま書けるのがミソです。慣れてくると、頭の中の設計図をそのまま1行に落とせるようになります。
実はCSSでも使える
EmmetはHTML専用ではありません。CSSファイルの中でも、プロパティの省略形が使えます。
| 打つ | 展開される |
|---|---|
m10 | margin: 10px; |
p20 | padding: 20px; |
df | display: flex; |
tac | text-align: center; |
c | color: #000; |
覚え方はかんたんで、プロパティ名の頭文字＋値。全部暗記しなくても、それっぽく打てば候補が出てくるので、当たったらもうけものくらいの気持ちで試してみてください。
連番をつけて一気に量産する
$ を使うと、繰り返しの中で連番を振れます。
li.item$*3 → Tab<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>同じクラス名を1つずつ手で打ち直す必要がなくなります。$$（$を重ねる）にすると item01 のように0埋めの連番になります。
まとめ
!→TabでHTMLの雛形を一発で出せるh1{...}の中身、a[href="…"]の属性もまとめて書けるul>li*3のように>*でタグを組み立てられるdiv.card#mainでクラス・IDも、li.item$*3で連番も一発で出せる- CSSでも
m10→margin: 10px;のように省略形が使える
タグ打ちの手間が減ると、その分「何を作るか」に集中できます。