Emmet の使い方を覚えて爆速コーディング

初版: 2024/9/24

更新: 2024/9/24

Visual Studio Code などに標準装備されている、コーディエディター用のプラグイン「Emmet ⧉」の最低限の使い方を覚えて、コーディングの速度を上げましょう。ここで紹介する機能は、以下の 3 つです。

  • HTML の展開
  • CSS の展開
  • HTML の操作

はじめに : ショートカットキーを追加する拡張機能をおすすめします

Visual Studio Code には、Emmet が標準装備されていますが、ショートカットキーが割り当てられていません。自分で設定することもできますが、「Emmet Keybindings ⧉」という拡張機能を導入することでも、ショートカットキーを追加することができます。

このページで紹介しているショートカットは、Emmet Keybindings をインストールしたときの標準のショートカットキーを紹介しています。なにも設定していない Visual Studio Code では反応しません。もちろん、ショートカットキーを設定しなくてもコマンドパレットからコマンドを呼び出すことは可能です。

HTML の展開

HTML が書ける場所で、Emmet 独自の記法を書くことで複雑な HTML を生成 (展開) することができます。独自の記法は CSS セレクタの書き方と似ています。展開するときは Tab や Enter でコードを補完をするときと同じ動作を行います。

タグ名

div <!-- Input -->
<div></div> <!-- Output -->

タグ名を記述するとそのタグの HTML に変換されます。a など、タグによってはあらかじめ属性のプレースホルダが存在することがあります。

クラス名

.class-name <!-- Input -->
<div class="class-name"></div> <!-- Output -->

ドット . でクラス名を記述すると、そのクラス名が付いたタグに変換されます。デフォルトでは div にクラスがつきますが、CSS セレクタのように h1.title とすると <h1 class="title"></h1> になります。

JSX 内で展開した場合も適切に動作し、className になります。

ID 名

#idname <!-- Input -->
<div id="idname"></div> <!-- Output -->

シャープ # で ID 名を記述すると、そのID 名が付いたタグに変換されます。デフォルトでは div にクラスがつきますが、CSS セレクタのように h1#title とすると <h1 id="title"></h1> になります。

タグ、クラス名、ID の組み合わせ

main#main.wrapper.main-contents <!-- Input -->
<main id="main" class="wrapper main-contents"></main> <!-- Output -->

これらを複数組み合わせて展開することが可能です。

属性

a[target="_blank"] <!-- Input -->
<a href="" target="_blank"></a> <!-- Output -->

角括弧 [] で属性とその値を記述すると、その属性と値が付いたタグに変換されます。

タグのネスト

picture>img <!-- Input -->
<picture><img src="" alt=""></picture> <!-- Output -->

大なり > でタグ同士を繋げると、入れ子 (ネスト) になっている HTML を生成することができます。

隣接するタグ

p+p <!-- Input -->
<p></p>
<p></p> <!-- Output -->

プラス記号 + でタグ同士をつなげると、隣接するタグを生成することができます。

親要素への移動

p>span>span^a <!-- Input -->
<p><span><span></span></span><a href=""></a></p> <!-- Output -->

> でネストさせたタグはキャレット記号 ^ を使用して “登る” ことができます。上のサンプルの場合、span で 2 階層ネストして、^ で 1 つ上の階層に移動しているため、このような出力になります。

p>span>span^^p <!-- Input -->
<p><span><span></span></span></p>
<p></p> <!-- Output -->

^ を 2 つ以上連続で使用して、より上の階層に移動することができます。

グループ化

p>span>span^^p <!-- Input -->
<p><span><span></span></span></p>
<p></p> <!-- Output -->

先ほど紹介したこれは、「グループ化」させることで違う書き方でも出力することができます。グループ化には丸括弧 () を使用します。

(p>span>span)+p <!-- Input -->
<p><span><span></span></span></p>
<p></p> <!-- Output -->

内容を入力

h1{Heading}+p{Hello, world!} <!-- Input -->
<h1>Heading</h1>
<p>Hello, world!</p> <!-- Output -->

波括弧 {} を使うと、そのタグの中にあるテキストを記述することができます。

p{詳しくは}>a{こちら}+{、という書き方はアクセシビリティ的に良くない。} <!-- Input -->
<p>詳しくは<a href="">こちら</a>、という書き方はアクセシビリティ的に良くない。</p> <!-- Output -->

このような書き方も可能です。

繰り返し

ul>li*3 <!-- Input -->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul> <!-- Output -->

アスタリスク * を使うことでそのタグを繰り返して出力することができます。

ナンバリング

p.item$${これは $ 番目のアイテム}*3 <!-- Input -->
<p class="item01">これは 1 番目のアイテム</p>
<p class="item02">これは 2 番目のアイテム</p>
<p class="item03">これは 3 番目のアイテム</p> <!-- Output -->

ドルマーク $ を使うと、連番を生成することができます。ドルマークを重ねることで、ゼロ埋めができます。

複雑な展開

div.list>(section.item[data-number="$"]>h2.item__heading+p.item__text)*3

例えば、このような Emmet の記法を書いたとき、

<div class="list">
    <section class="item" data-number="1">
        <h2 class="item__heading"></h2>
        <p class="item__text"></p>
    </section>
    <section class="item" data-number="2">
        <h2 class="item__heading"></h2>
        <p class="item__text"></p>
    </section>
    <section class="item" data-number="3">
        <h2 class="item__heading"></h2>
        <p class="item__text"></p>
    </section>
</div>

このように変換されて出力されます。

CSS の展開

CSS が書ける場所で、Emmet 独自の記法を書くことで CSS プロパティの書き方を簡単にすることができます。

プロパティ名と値の頭文字を入力すると、展開することができます。例えば、display: grid; を展開したい場合、dg と入力します。

例えば、font-weight: bold; のようなハイフン - で繋がっているプロパティ名の場合、fwb と入力することで展開できます。

番外編 : IntelliSense によるプロパティの補完

Emmet 記法ではありませんが、かなり雑にプロパティ名を書いても、Visual Studio Code では IntelliSense が効くため、プロパティ名を楽に入力することができます。

例えば、font-feature-settings: というプロパティ名を入力したいとき、fofese と入力してもコード補完の 1 個目の候補に目当てのプロパティ名が出てきます。

HTML の操作

展開しながらラップ

テキストや HTML 要素を範囲選択した状態で「Emmet: ラップ変換」(Ctrl + M, Ctrl + W) を実行すると、先ほどの「HTML の展開」を行いながら、選択範囲をラップする (囲む) ことができます。

また、選択していない状態での展開とは違い、アスタリスク * のみを使用すると、改行毎にそのタグで囲むようになります。

選択範囲の拡大・縮小 (バランス)

任意の位置にカーソルを置き、「Emmet: バランス (外側)」(Ctrl + M, Ctrl + O) を実行すると、カーソルの位置にある要素を範囲選択します。繰り返し実行すると、どんどん <html> の方向に選択範囲が拡大していきます。

逆に、「Emmet: バランス (内側)」(Ctrl + M, Ctrl + I) を実行すると、先ほどとは逆の方向に選択範囲が縮小していきます。

開始タグ・終了タグへ移動

開始タグ・終了タグの中にカーソルがある状態で、「Emmet: 一致するペアに移動」(Ctrl + M, Ctrl + M) を実行すると、その逆のタグの位置にカーソルが移動します。

タグの更新

任意の要素にカーソルが当たっている状態で、「Emmet: タグの更新」(Ctrl + M, Ctrl + T) を実行すると、要素名を変更することができます。このときクラス名を変更したり、追加したりすることはできません。

単にタグ名を変更するだけでなく、とりあえず Emmet の展開で div だらけの HTML を組んでから、後で適切なタグに変更する。というような使い方ができますね。