06 ホームページ中級講座便利なEmmet!

2020年4月11日2025年4月13日

Emmetとは？

Emmetは、HTMLやCSSのコーディングを効率化するためのツールです。コードのテンプレートを簡単に生成できる「ショートカット機能」があり、ほとんどのモダンなエディタ（VS Code、Sublime Text、Atomなど）に対応しています。Emmetを使うことで、数秒で複雑なHTML構造を楽に生成できます。

`!`から始める基本操作

まず、HTMLの基本構造をすばやく生成するために、Emmetの!を使ってみましょう。

エディタを開く
使用するエディタ（例: VS Code）で、新しいHTMLファイルを作成します。
!を入力
ファイル内に ! を入力します。
タブキーを押す
タブキーを押すと、以下の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>

headerにh1と文字を入れる場合

Emmetのショートカットで　header>h1{Hello World}　と入力し、タブキーを押します。

<header>
    <h1>Hello World</h1>
</header>

header<header>タグを生成します。主に見出しやナビゲーションなど、ページのヘッダー部分を定義します。
>子要素を生成することを示します。
h1<h1>タグを生成します。ページやセクションの主要な見出しに使用します。
{Hello World}{}の中に入力した文字列が、生成されるタグの中身として追加されます。

liを３行作成　ナビゲーションメニュー

Emmetのショートカットで　nav>ul>li*3>a{リンク$}　と入力し、タブキーを押します。

<nav>
        <ul>
            <li><a href="">リンク1</a></li>
            <li><a href="">リンク2</a></li>
            <li><a href="">リンク3</a></li>
        </ul>
</nav>

nav
- <nav>タグを生成します。
- ナビゲーションメニューを定義するために使用されるHTML要素です。
>
- 子要素を作成することを指定します。
- ここでは、<nav>の中に<ul>を生成します。
ul
- <ul>タグ（無秩序リスト）を生成します。
- リスト項目をまとめるために使用されるHTML要素です。
>li*3
- <li>タグ（リスト項目）を生成し、それを3つ作成します。
- *3は繰り返し回数を指定する部分です。
>a
- 各<li>の中に<a>タグ（リンク）を生成します。
- <li>は親要素で、<a>はその子要素となります。
{リンク$}
- {}の中に入力した文字列が<a>タグの中身として出力されます。
- **$**は、繰り返しの回数をインクリメントして数字を挿入します。
  例えば、リンク$とすると、以下のように番号付きのテキストが自動生成されます：
  - リンク1
  - リンク2
  - リンク3

Emmentが動かない時

「コピペ」の場合、文字列に不要な空白や隠れた文字（不可視文字）が混入していることが原因で、Emmetが正しく動作しないことがあります。コピペではなく、直接 div.box などと入力してTabキーを押すことで正しく展開されるか確認してください。

またエディタ側で無効化されていたり、ファイルの種類が対応してなかったりすると使えません。Emmet は対応する言語モード（HTML、CSS、JavaScript、PHP など）でしか機能しません。

練習してみよう

練習 1: シンプルなボックス

div.box

<div class="box"></div>

練習２: 見出しと段落

h1{タイトル}+p{説明文}

<h1>タイトル</h1>
<p>説明文</p>

練習３: リストの生成

ul>li*3{項目$}

<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

練習４:ナビゲーションメニュー

nav>ul>li*5>a[href=”#”]{リンク$}

<nav>
    <ul>
        <li><a href="#">リンク1</a></li>
        <li><a href="#">リンク2</a></li>
        <li><a href="#">リンク3</a></li>
        <li><a href="#">リンク4</a></li>
        <li><a href="#">リンク5</a></li>
    </ul>
</nav>

練習５: カードレイアウト

div.card*3>h2{タイトル$}+p{コンテンツ$}

<div class="card">
    <h2>タイトル1</h2>
    <p>コンテンツ1</p>
</div>
<div class="card">
    <h2>タイトル2</h2>
    <p>コンテンツ2</p>
</div>
<div class="card">
    <h2>タイトル3</h2>
    <p>コンテンツ3</p>
</div>