記事一覧 Emmetで爆速コーディング【HTML編】
コーディング

Emmetで爆速コーディング【HTML編】

Emmetで爆速コーディング【HTML編】
この記事は2021年9月に公開しました。
動きの画面は、当時の VS Code のものです。
今の版では、見た目や展開の結果が少し違う場合があります。
p と打って、Tab キーを押す。
それだけで、<p></p> というコードが出ます。
これが、Emmet（エメット）という機能です。

「ショートカットは聞いたことがあるけど、Emmet は初めて」という人もいるかもしれません。
知らずに使っていた、という人もいると思います。

Emmet を使うと、打つ文字が減り、打ち間違いも減ります。
その分、コーディングがぐっと速くなります。
目次

Emmetとは？

Emmet は、HTML や CSS を省略記法で短く書くためのプラグインです。
元々は、Zen-Coding という名前でした。

この記事では、Visual Studio Code（VS Code）を使って紹介します。
VS Code なら、初めの設定のままで Emmet を使えます。
他のテキストエディタ（Sublime Text／Dreamweaver など）でも、同じように使えます（プラグインを入れるものもあります）。

Emmetの基本的な使い方

基本は、要素の名前を打って、Tab キーを押すだけです。
省略した要素が、きちんとした HTML の形に変わります。
この記事では、これを「展開」と呼びます。

次の画面では、h1／section などを打ってから、Tab キーを押しています。
img／a／link などは、最低限の属性も一緒に出ます。
打つ文字が、大きく減ります。
VS Code で h1／section／img／link と打ち、Tab キーで1つずつ HTML のタグに展開していく画面

「!」HTMLのひな形を出力する

「!」を打って Tab キーを押すと、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>

「.」クラスをつける

「要素.任意の名前」で Tab キーを押すと、要素にクラスが付きます。
展開前
div.box
展開後
<div class="box"></div>

「#」idをつける

「要素#任意の名前」で Tab キーを押すと、要素に id が付きます。
展開前
section#form
展開後
<section id="form"></section>

「+」兄弟要素にする

「要素+要素」で Tab キーを押すと、+ で繋いだ要素が同じ階層に並びます。
展開前
dt+dd
展開後
<dt></dt>
<dd></dd>

「>」ネストさせる

「要素>要素」で Tab キーを押すと、入れ子（ネスト）になります。
展開前
ul>li
展開後
<ul>
    <li></li>
</ul>

「*数字」同じ要素を繰り返す

「要素*数字」で Tab キーを押すと、数字の数だけ、同じ要素が並びます。
展開前
li*3
展開後
<li></li>
<li></li>
<li></li>

「$」連番をつける

「$」を使うと、クラス名に連番が付きます。
展開前
li.item$*3
展開後
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>

「{}」テキストを入れる

「{}」を使うと、要素の中にテキストが入ります。
展開前
p{ここにテキストが入るよ}
展開後
<p>ここにテキストが入るよ</p>

「[]」属性をつける

「[]」を使うと、要素に属性を付けられます。
展開前
img[alt="メイン画像"]
展開後
<img src="" alt="メイン画像">

「()」グループ化する

「()」を使うと、要素を1つのグループにまとめられます。
次の例では、section の中に h2、h2 の中に span が入ったかたまりが、2つ並びます。
展開前
(section>h2>span)*2
展開後
<section>
    <h2><span></span></h2>
</section>
<section>
    <h2><span></span></h2>
</section>

「^」1つ上の階層に戻る

「^」を使うと、1つ上の階層に戻ります。
次の例では、div の後の「^」で section の外に戻ります。
そのため、footer は section と同じ階層に並びます。
展開前
section>div^footer>p
展開後
<section>
    <div></div>
</section>
<footer>
    <p></p>
</footer>

まとめ

HTML の Emmet を、11 の記号で紹介しました。
記号と、できることをまとめると、次の通りです。
記号 できること 例
! HTML のひな形を出す !
. クラスを付ける div.box
# id を付ける section#form
+ 同じ階層に並べる（兄弟要素） dt+dd
> 入れ子にする（ネスト） ul>li
*数字 同じ要素を繰り返す li*3
$ 連番を付ける li.item$*3
{} テキストを入れる p{ここにテキストが入るよ}
[] 属性を付ける img[alt="メイン画像"]
() グループにまとめる (section>h2>span)*2
^ 1つ上の階層に戻る section>div^footer>p
IMG-flowで働くという選択
この記事を書いているIMG-flowは、大阪のWeb制作会社です。
どんな人と、どんな進め方で仕事をしているのかは、採用ページにまとめています。
クリエイター採用を見る
この記事は参考になりましたか？
ご回答ありがとうございました
前の記事 【初心者向け】RYB、CMYKとRGBの違い ～ 色・配色の基本知識 次の記事 Photoshopのテキストエフェクト【20選】‐ Part1
関連記事
Git とは？ GitHub との違いと、コミット／プッシュ／プル／マージの意味 2026.11.05 Git とは？ GitHub との違いと、コミット／プッシュ／プル／マージの意味 Windows の Git をアップデートする方法　winget で他のアプリの更新と整理も 2026.11.02 Windows の Git をアップデートする方法　winget で他のアプリの更新と整理も フォームのメールは mail() と SMTP のどちらで送るか　Google Workspace を使っている時の注意 2026.10.20 フォームのメールは mail() と SMTP のどちらで送るか　Google Workspace を使っている時の注意
記事一覧へ戻る