Lesson1-0：HTML/CSSの開発環境を無料で整備しよう
Lesson1-1：HTML学習の入り口｜Webページの基本構造を理解しよう
Lesson1-2：基本的なHTMLタグを理解しよう
Lesson1-3：Webページにリンクや画像を挿入しよう
Lesson1-4：３種類のリストを理解しよう
Lesson1-5：テーブル（表）の基礎を理解しよう
Lesson1-6：フォームを作成しよう
Lesson1-7：セクションタグとメタタグを知ろう
Lesson1-☆1：HTMLの『属性』とは何か｜詳細に解説
Lesson1-☆2：SEOに強いHTMLの書き方｜検索されやすいWebページを作る方法
Lesson1-☆3：Emmetの使い方完全ガイド ◁今回はココ
HTMLのコードを書く際、毎回タグを手入力するのは手間がかかりますよね？
特に、基本的な構造や繰り返しの多い要素を記述するのは時間がかかるものです。
そこで「Emmet（エメット）」 という便利な機能を活用することで、HTMLの記述を大幅に効率化できます。
Emmetを使えば短縮したコードを入力するだけで、一瞬でタグを展開できる ので、コーディングのスピードが格段に向上します。
例えば、ul>li*3 と入力して展開すると、以下のようなコードが瞬時に生成されます。
<ul>
<li></li>
<li></li>
<li></li>
</ul>このように、Emmetを使えば最小限の入力で、最大限の効率化を実現できるのです。
本記事ではVisual Studio Code（VSC）でEmmetを活用して、HTMLをスムーズに記述するための時短テクニックを紹介します。
Emmetを使いこなせば、初心者でもすぐにプロ並みのスピードでHTMLを記述できる ようになります。
それでは、Emmetを使うための準備から、実際の活用法まで順を追って見ていきましょう！
この記事は以下の４つの内容で構成されています。
- Emmetを使う準備（無料）
- 基本的なEmmetの記述（会員向け）
- テキストの自動入力と数値のインクリメント（会員向け）
- テーブルやフォームを一瞬で作る方法（会員向け）
<<前のページ
HTML/CSSの記事一覧
次のページ>>
Emmetを使う準備
EmmetはVisual Studio Code（VSC）ではデフォルトで有効になっているため、特別な設定をしなくてもすぐに使うことができます。
しかし、うまく動作しない場合や設定を確認したい場合には、以下の手順をチェックしましょう。
Emmetが有効かどうかを確認する
VSCでは、通常HTMLファイルを作成してEmmetの入力を行うと、自動的に展開されます。
試しにHTMLファイル（拡張子 .html）を作成し、html:5 と入力して Tab キーを押してみましょう。
正しく動作していれば、以下のようなHTMLの基本構造が自動で展開されます。
<!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>このように一瞬でコードが生成されれば、Emmetが正常に機能しているということになります。
Emmetが動作しない場合の対処法
もし Tab キーを押しても展開されない場合は、次の設定を確認しましょう。
① ファイルの種類（拡張子）を確認する
Emmetは .html という拡張子のファイル でないと動作しないことがあります。
例えば、index.txt ではなく index.html という名前で保存してください。
② VSCのEmmet設定を確認する
VSCの設定からEmmetが有効になっているかをチェックできます。
- VSCの「設定」を開く
- Windows：
Ctrl+,（カンマ） - Mac：
Cmd+,（カンマ）
- Windows：
- 検索ボックスに
emmetと入力する - 「Emmet: Trigger Expansion On Tab」のチェックを確認する
- これが
ONになっていればTabキーでEmmetが展開される設定になっています。 OFFの場合は、チェックを入れてONにしてください。
- これが
Emmetを使う基本ルール
Emmetは、HTMLのコードを簡潔な記述で展開できるルールに基づいています。
例えば、div タグを簡単に入力したいときに、以下のような書き方をすると自動的に展開されます。
| 入力（省略形） | 展開後のHTML |
|---|---|
div | <div></div> |
p | <p></p> |
h1 | <h1></h1> |
このように、タグ名をそのまま入力するだけで、対応するHTMLタグが生成されるのがEmmetの基本的な仕組みです。
次のステップへ
これでEmmetを使う準備は整いました！
次の章では、実際に使えるEmmetの基本テクニック を紹介していきます。
少しずつ試しながら、Emmetの便利さを実感していきましょう！