【初心者】VS CodeのEmmetでコーディングを効率化【HTML編】

2026年1月12日

当ページのリンクには広告が含まれています。

コーディングを効率化したいなら、まずマスターすべきはタイピングの速さではなく「Emmet」です。

VS Codeの標準機能であるEmmetを使えば、打ち間違いを防ぎながら、圧倒的なスピードでコードを組み上げることができます。

この記事では、初心者の方が今日からすぐに使えるEmmetの基本テクニックをわかりやすく解説します。

Emmet【HTML基本】

【Emmetの使い方】

略語を入力してEnterキーまたはTabキーを押すだけです。

HTMLの雛形作成

HTMLで一番最初に書く、あの長い定型文（Doctype宣言やheadタグなど）を入力する必要はありません。

【入力】

入力後、EnterキーまたはTabキーを押します。

【展開】

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

言語設定を「ja」に固定する方法

HTMLの雛形を作成する際、! で展開すると初期設定では必ず lang="en" になってしまいます。

毎回書き換えるのは面倒なので、最初から lang="ja" と表示されるように設定を変更しましょう。

【設定手順】

1.F1キーを押して、コマンドパレットを開きます。

2. 検索窓で「user settings json」と入力します。

3.「基本設定: ユーザー設定を開く (JSON)」を選択します。

4. 開いた settings.json の中（{ } の内側）に、以下のコードを追加して保存します。

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

※すでに他の設定が書かれている場合は、末尾に ,（カンマ）を付けてから追記してください。

タグ名だけで展開

要素名を入力するだけでタグが展開されます。

【入力】

h2

入力後、EnterキーまたはTabキーを押します。

【展開】

<h2></h2>

クラス名・IDを指定

divタグの場合は、要素名を省略して書くこともできます。

クラス名をつける場合.

【入力】

.container

入力後、EnterキーまたはTabキーを押します。

【展開】

<div class="container"></div>

IDをつける場合#

【入力】

#main

入力後、EnterキーまたはTabキーを押します。

【展開】

<div id="main"></div>

入れ子構造を作成

要素名と要素名の間に>を入れることで入れ子構造が展開されます。

【入力】

ul>li

入力後、EnterキーまたはTabキーを押します。

【展開】

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

隣り合う要素を作成

要素名と要素名の間に+を入れることで同じ階層に展開されます。

【入力】

h1+p

入力後、EnterキーまたはTabキーを押します。

【展開】

<h1></h1>
<p></p>

繰り返し

リスト項目など、同じタグを繰り返し作りたい時は、*の後に繰り返す回数を入力します。

【入力】

li*3

入力後、EnterキーまたはTabキーを押します。

【展開】

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

Emmet【HTML応用】

テキストを挿入

タグの中に最初から文字を入れておきたい時に便利です。

【入力】

h2{タイトル}

入力後、EnterキーまたはTabキーを押します。

【展開】

<h2>タイトル</h2>

階層を上げる

階層を上げるには、^を使います。

【入力】

ul>li^p

入力後、EnterキーまたはTabキーを押します。

【展開】

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

連番を振る

リストやカード型レイアウトで、クラス名を連番にしたい時は、$を使います。

【入力】

li.item$*3

入力後、EnterキーまたはTabキーを押します。

【展開】

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

属性をあらかじめ指定

リンク先（href）や画像のパス（src）、alt属性などをあらかじめ指定します。

【入力】

img[alt="image"]

入力後、EnterキーまたはTabキーを押します。

【展開】

<img src="" alt="image">

【実践】商品リストを作る

基本と応用を組み合わせると、商品リストも1行で作成できます。

【入力】

ul.product-list>li.item$*3>img[src="img$.jpg"]+h3{商品名$}+a{詳細はこちら}

入力後、EnterキーまたはTabキーを押します。

【展開】

<ul class="product-list">
    <li class="item1">
        <img src="img1.jpg" alt="">
        <h3>商品名1</h3>
        <a href="">詳細はこちら</a>
    </li>
    <li class="item2">
        <img src="img2.jpg" alt="">
        <h3>商品名2</h3>
        <a href="">詳細はこちら</a>
    </li>
    <li class="item3">
        <img src="img3.jpg" alt="">
        <h3>商品名3</h3>
        <a href="">詳細はこちら</a>
    </li>
</ul>