Emmetで爆速でHTMLを書く

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*3と打ってTab：

ul>li*3  →  Tab

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

リストの箱と中身3つが、一瞬で出そろいます。

クラスやIDも記号で付けられる

CSSと同じ書き方で、classやidも一緒に指定できます。

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ファイルの中でも、プロパティの省略形が使えます。

覚え方はかんたんで、プロパティ名の頭文字＋値。全部暗記しなくても、それっぽく打てば候補が出てくるので、当たったらもうけものくらいの気持ちで試してみてください。

連番をつけて一気に量産する

$を使うと、繰り返しの中で連番を振れます。

li.item$*3  →  Tab

<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>

同じクラス名を1つずつ手で打ち直す必要がなくなります。$$（$を重ねる）にするとitem01のように0埋めの連番になります。

まとめ

1. ! → TabでHTMLの雛形を一発で出せる
2. h1{...}の中身、a[href="…"]の属性もまとめて書ける
3. ul>li*3のように> *でタグを組み立てられる
4. div.card#mainでクラス・IDも、li.item$*3で連番も一発で出せる
5. CSSでもm10 → margin: 10px;のように省略形が使える