Emmet: Emmetとは？HTML/CSSを高速化する究極の省略記法エンジン
最終更新：2026-10-13
Emmetは、HTMLとCSSのための「入力補完のショートカットフレーズ」のようなものです ― 数文字を入力してTabを押せば、瞬時に完全なコードへ展開されます。
1. この章で学ぶこと
- Emmetとは何か ― そして何ではないか
- 中核となる機能：HTML省略記法、CSS省略記法、エディタ操作
- Emmetと手書きの比較：速度、エラー率、学習曲線
- Emmetをいつ・どこで使うか：エディタ選び、対応ファイル形式
- 残り17回分の学習ロードマップの予習
2. フロントエンド開発者の実話
(1) 課題：手書きのHTMLは遅すぎる
Aliceはフロントエンド開発者で、最近会社のトップページのリニューアルを任されました。ナビゲーションバーを書くたびに、彼女は30行を超えるHTMLを手入力することになります。ulの中に5つのli、各liの中にさらにaタグ。ナビゲーションの後には、6枚のdivスライドからなるカルーセルがあり、それぞれに画像とテキストが入ります。一日が終わるころには指が痛くなり、120行のHTMLページに丸々40分かかっていました。さらにCSSです。margin: 10px 20px、padding: 5px、font-size: 16px ― 1行ごとに完全なプロパティ名とセミコロンを入力しなければなりません。Aliceは思いました。「自分のコーディング時間の半分は"タイピング"に消えている。エディタが自動で補完してくれないものか」
(2) Emmetの解決策
Emmetの答えはシンプルです。よく使うHTML/CSSのパターンを省略記法（abbreviation）に圧縮し、エディタがそれを瞬時に完全なコードへ展開します。Emmetを学んだ後のAliceは、同じ30行のナビゲーションバーをわずか16文字で書きます。
ul.nav>li.item*5>a{リンク $}
Tabを押すと、エディタは瞬時にそれを30行の完全なHTMLへ展開します。カルーセルのスライドが6枚必要ですか？ 一行で div.slider>div.slide*6>img です。CSSを書きますか？ m10-20 は自動で margin: 10px 20px に、fz16 は font-size: 16px になります。以前は40分かかっていたページを、Aliceはわずか12分で仕上げました。
(3) メリット
Emmetはフロントエンド開発者に即効性のある明確なメリットをもたらします。HTMLを書く速度は3〜5倍、CSSは2〜3倍になります。手書きでよくある閉じタグの抜けや属性の引用符の不一致といったミスは、Emmetがすべて自動生成するため、ほぼゼロになります。さらに重要なのは、開発者が繰り返しのキー入力ではなく構造とスタイルの設計に集中できることです。学習コストもわずかです。本課で5分かけて第一印象をつかみ、残り17回をそれぞれ5〜10分ずつ学べば、1つずつ核心的な概念を習得できます。全18回を修了すると、Aliceは完全なECサイトのトップページを、以前の2時間から30分以内で書き上げられるようになります。
3. Emmetの核心的な定義
Emmet（旧称 Zen Coding）は、HTMLとCSSのための省略記法展開エンジンであり、2009年にSergey Chikuyonokによって最初に公開され、2013年に正式にEmmetへと改名されました。CSSセレクタに似た省略記法の文字列を解析し、完全なHTMLまたはCSSコードへリアルタイムで展開します。VSCode、WebStorm、Sublime Textなどの主要エディタに統合されています。
| 観点 | 手書きのHTML | Emmetの省略記法 |
|---|---|---|
| 速度 | 30行のナビに約8分 | 30行のナビに約30秒 |
| エラー率 | 閉じタグの抜け、引用符のズレ | 自動生成でエラーほぼゼロ |
| 学習曲線 | 直感的だが繰り返しが多い | 約8個の中核演算子の暗記が必要 |
| 再利用性 | 毎回書き直す | 一度覚えれば永続的に再利用 |
| エディタ依存 | どんなエディタでも | エディタ統合が必要 |
ヒント： Emmetは新しいプログラミング言語でもフレームワークでもありません。エディタプラグインであり、本質的には「省略記法の文字列」を「完全なコード」に翻訳するものです。
4. Emmetでできること
Emmetの機能は4つに分類できます。HTML省略記法、CSS省略記法、エディタ操作、そしてそれらを組み合わせた使い方です。直感をつかむために、いくつかの例を見てみましょう。
(1) HTML省略記法
HTML省略記法はEmmetで最もよく使われる機能です。CSSセレクタに似た省略記法を入力し、Tabを押すと、すぐに完全なHTMLタグツリーへ展開されます。
▶ サンプル: 基本的なタグの省略記法（難易度：★）
省略記法：
ul.nav>li.item*5>a{リンク $}
展開結果：
<ul class="nav">
<li class="item"><a href="">リンク 1</a></li>
<li class="item"><a href="">リンク 2</a></li>
<li class="item"><a href="">リンク 3</a></li>
<li class="item"><a href="">リンク 4</a></li>
<li class="item"><a href="">リンク 5</a></li>
</ul>
出力：
ブラウザは、5つのリンク付きリスト項目を持つ順序なしリストを描画します。`$` 記号は自動的に1から5までの連番に置き換えられます。
(2) CSS省略記法
CSS省略記法はEmmetのもう一つの核心的な強みです。EmmetはCSSプロパティ名から頭文字を借用し、よく使うプロパティと値を短い文字列に圧縮します。
▶ サンプル: CSS省略記法のプレビュー（難易度：★）
省略記法：
m10-20
展開結果：
margin: 10px 20px;
省略記法：
p10 fz16
展開結果：
padding: 10px;
font-size: 16px;
出力：
`m` は `margin` の頭文字で、`10-20` は上下10px・左右20pxを意味します。`p` は `padding` の省略、`fz` は `font-size` の省略です。詳細なCSS省略記法のルールは第11〜13回で扱います。
(3) エディタ操作
Emmetは「省略記法を入力 → コードに展開」だけではありません。カーソル移動、コードのラップ、対応タグのマッチングを一打鍵で可能にする一連のエディタ操作（Actions）も提供します。
▶ サンプル: 省略記法の展開アクション（難易度：★）
VSCodeで任意の .html ファイルを開き、div.container>ul>li*3 を入力した後で：
# Step 1: Type the abbreviation
div.container>ul>li*3
# Step 2: Press Tab (default keybinding)
# Triggers the "Expand Abbreviation" action
# Step 3: The editor expands it to:
# <div class="container">
# <ul>
# <li></li>
# <li></li>
# <li></li>
# </ul>
# </div>
# Step 4: The cursor jumps to the first <li></li>
# You can start typing immediately
出力：
一行の省略記法が瞬時に6行の完全なHTMLになり、カーソルは最初の編集可能な位置に配置されます ― 手動でのクリックは不要です。Actionsの詳細な使い方は第14〜16回で扱います。
(4) 組み合わせデモ
HTML省略記法 + CSS省略記法 + エディタ操作を組み合わせれば、1行で完全なログインフォームを書くことができます。以下は簡略化した例です。
▶ サンプル: 完全なログインフォーム（難易度：★★）
HTML省略記法：
form#login>(input[type=text name=user placeholder="ユーザー名"])+(input[type=password name=pwd placeholder="パスワード"])+(button.btn{ログイン})
展開結果：
<form id="login">
<input type="text" name="user" placeholder="ユーザー名">
<input type="password" name="pwd" placeholder="パスワード">
<button class="btn">ログイン</button>
</form>
対応するCSS省略記法：
#login{w400 bg:#f5f5f5 p20}
.btn{bg:#3b82f6 c:#fff bd:none p10-20 cur:pointer}
展開結果：
#login {
width: 400px;
background: #f5f5f5;
padding: 20px;
}
.btn {
background: #3b82f6;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
出力：
ブラウザは、2つの入力欄と青いログインボタンを持つ幅400pxのログインカードを描画します。省略記法の入力から完全に機能するフォームまで、わずか2ステップ（HTML一行 + CSS一行）、約5秒です。
5. 学習パスの予習
本チュートリアルは全18回で、6つのフェーズに分かれています。
| フェーズ | 課数 | 核心内容 | 難易度 |
|---|---|---|---|
| Phase 1 - 入門 | 3 | Emmetの概念、エディタ統合、基本タグの省略記法（現在のフェーズ） | ★ |
| Phase 2 - HTML省略記法 | 5 | ネスト >、爬升 ^、乗算 *、グループ化 ()、ID/Class、属性と番号付け |
★-★★ |
| Phase 3 - テキストと応用 | 2 | テキストコンテンツ、Lorem Ipsumプレースホルダー、暗黙タグの詳細 | ★-★★ |
| Phase 4 - CSS省略記法 | 3 | 単位推論、ベンダープレフィックス、グラデーションとファジーマッチング | ★★ |
| Phase 5 - Actions | 3 | Expand、Wrap、Balance、Next Edit Point | ★-★★ |
| Phase 6 - 実践プロジェクト | 2 | ログインページ + レスポンシブランディングページ | ★★-★★★ |
全18回を終えると、1行の省略記法から複雑なHTML構造を組み立てられ、よく使うCSSを省略記法で書けるようになり、5つの中核Actionsで編集速度を3〜5倍に高められます。
❓ よくある質問
html:5 がHTML5の骨組みに展開）で、パラメータ化できません。Emmetの省略記法は動的に生成され、省略記法の文字列から任意の構造をリアルタイムに構築できます。Emmetは実質的にスニペットの上位集合です。📖 まとめ
- EmmetはHTML/CSSの省略記法展開エンジンで、2009年に公開され、主要エディタに統合されている
- 中核機能：HTML省略記法（CSSセレクタ風の省略記法）+ CSS省略記法（プロパティ名の頭文字）+ エディタ操作
- 手書きとの比較：3〜5倍高速、エラー率はほぼゼロ、ただし約8個の中核演算子の暗記が必要
- 組み合わせ活用：HTML省略記法1行 + CSS省略記法1行 = 5秒でログインフォーム
- チュートリアルは全18回・6フェーズ。本課は入門フェーズの第1回。以降の課では各演算子とユースケースを深掘りする
📝 練習問題
- 基礎（難易度：★）：お使いのエディタで新しい
.htmlファイルを作成し、divと入力してTabを押してください。結果を記録します。次にdiv.boxを試して再度Tabを押し、2つの展開結果を比較してください。 - 中級（難易度：★★）：エディタで省略記法
ul>li*3>a{項目 $}を入力してTabを押し、結果を観察してください。次に*3を*6に変えて再展開し、違いを記録してください。 - 挑戦（難易度：★★★）：1つのEmmet省略記法で、ナビゲーションバー、カルーセル、3枚のカード、フッターを含むトップページの完全なHTML構造を書いてください（CSSは不要）。展開前後の比較を4枚のスクリーンショットで記録してください。
