HTML を書くとき、開始タグと終了タグを対にして打ち、同じ形のリストを何行も書き写すのは手間がかかります。Zen Coding は、CSS のセレクターに似た短い省略記法を書いて展開すると、HTML がまとめて出来上がる、というエディター向けの仕組みでした。のちに Emmet という名前に変わり、今では VS Code をはじめ多くのエディターに標準で組み込まれているか、拡張機能で使えるようになっています。

使い方 (VS Code の場合)

VS Code では、HTML や CSS のファイルで省略記法を書くと、入力候補に Emmet の展開結果が表示されます。Tab キーか Enter キーで候補を選ぶと展開されます。コマンドパレットから「Emmet: Expand Abbreviation」を実行して展開することもできます。

試しに、HTML のファイルで ! と書いて展開すると、ページのひな形が出来上がります。

<!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>

lang の値は、設定 (settings.json) の emmet.variables で変えられます。

{
  "emmet.variables": {
    "lang": "ja"
  }
}

1 行目の DOCTYPE の役割は、DOCTYPE とレンダリングモード で説明しています。

基本の記号

  • >: 子要素にする
  • +: 兄弟要素として隣に並べる
  • ^: 1 つ上の階層に戻る
  • *: 繰り返す
  • $: 繰り返しの番号に置き換わる。$$ と重ねると 01、02 のように桁をそろえる
  • . と #: class と id。タグ名を省くと div になる
  • [ ]: 属性を付ける
  • { }: 要素の中に文字を入れる
  • ( ): まとまりにする

例と展開結果

子要素と兄弟要素、中の文字を組み合わせた例です。

header>h1{サイト名}+nav

<header>
  <h1>サイト名</h1>
  <nav></nav>
</header>

class と id は、CSS のセレクターと同じように続けて書けます。

#main.container.wide

<div id="main" class="container wide"></div>

繰り返しと番号、属性を組み合わせると、リンクの一覧が 1 行で書けます。$ は { } の中でも番号になります。

ul.menu>li.menu-item*3>a[href="#"]{項目$}

<ul class="menu">
  <li class="menu-item"><a href="#">項目1</a></li>
  <li class="menu-item"><a href="#">項目2</a></li>
  <li class="menu-item"><a href="#">項目3</a></li>
</ul>

ul>.item*3 のように、ul の中でタグ名を省くと、div ではなく li になります。番号を 3 から始めたいときは li.item$@3*3 のように @ で始まりの数を指定します。

^ を使うと、子要素を書いたあとで 1 つ上の階層に戻れます。

section>h2{見出し}+p{本文}^footer

<section>
  <h2>見出し</h2>
  <p>本文</p>
</section>
<footer></footer>

階層が深くなるときは、( ) でまとまりにすると、見通しよく書けます。

(header>h1)+(main>article*2>h2+p)+footer

<header>
  <h1></h1>
</header>
<main>
  <article>
    <h2></h2>
    <p></p>
  </article>
  <article>
    <h2></h2>
    <p></p>
  </article>
</main>
<footer></footer>

注意したいのは、省略記法の途中に空白を入れないことです。空白があると、そこで省略記法が区切られ、意図したとおりに展開されません。空白は { } の中と、属性の値の中にだけ書きます。

CSS でも使える

CSS のファイルでも、プロパティ名と値を短く書いて展開できます。

m10     → margin: 10px;
p10-20  → padding: 10px 20px;
w100p   → width: 100%;
df      → display: flex;

書いた文字をあとから囲む

すでにある文字を、あとから HTML で囲むこともできます。VS Code では、囲みたい行を選んでコマンドパレットから「Emmet: Wrap with Abbreviation」を実行し、ul>li* と入力すると、選んだ各行が li で囲まれ、全体が ul に入ります。

りんご
みかん
ぶどう

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>

テンプレートの言語など、標準では Emmet が効かない種類のファイルでも、設定の emmet.includeLanguages で HTML として扱うように指定すると使えるようになります。

まとめ

  • Zen Coding は、今は Emmet という名前で、VS Code などのエディターで使える
  • > 子、+ 兄弟、^ 上の階層、* 繰り返し、$ 番号、.・# class と id、[ ] 属性、{ } 文字、( ) まとまり
  • 省略記法の途中には空白を入れない
  • CSS の省略記法や、選んだ文字をあとから囲む機能もある

参考