【HTML】レッスン1-S3：Emmetの使い方｜速く書くための時短テクニック
Lesson1：HTML入門編
・Lesson1-1：HTMLの概要と基本構造を理解しよう
・Lesson1-2：基本的なHTMLタグを理解しよう
・Lesson1-3：Webページにリンクや画像を挿入しよう
・Lesson1-4：３種類のリストを作成しよう
・Lesson1-5：テーブルを作成しよう
・Lesson1-6：フォームを作成しよう
・Lesson1-7：セクションタグとメタタグを知ろう
・Lesson1-☆1：HTMLの『属性』とは何か
・Lesson1-☆2：SEOに強いHTMLの書き方
・Lesson1-☆3：Emmetの使い方完全ガイド ◁今回はここ
Lesson2：CSS入門編
Lesson3：CSS応用編
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を使うための準備から、実際の活用法まで順を追って見ていきましょう！
<<前のページ
HTML/CSSの記事一覧
次のページ>>
Emmetの有効化と動作チェック
EmmetはVisual Studio Code（VSC）ではデフォルトで有効になっているため、特別な設定をしなくてもすぐに使うことができます。
しかし、うまく動作しない場合や設定を確認したい場合には、以下の手順をチェックしましょう。
HTML/CSSの用語集 も活用しながら、学習を進めましょう。
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の記述が劇的に速くなります。
ここでは最も頻繁に使う基本テクニックを紹介します。
タグの展開｜タグ名+Tabキー
Emmetの最も基本的な使い方は、タグ名を入力して Tab キーを押すだけで展開できるというものです。
| 入力（省略形） | 展開後のHTML |
|---|---|
div | <div></div> |
p | <p></p> |
h1 | <h1></h1> |
footer | <footer></footer> |
このように、基本的なHTMLタグは名前をそのまま入力するだけで展開されます。
HTMLの基本構造を一瞬で作る｜html:5 + Tabキー
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>たった html:5 だけでここまでのコードが一瞬で入力される のはとても便利ですね！
これはHTML5の標準テンプレートとして、多くの開発環境で活用されています。
兄弟タグを一括生成｜+演算子の活用
複数のタグを連続して書きたいときは、+（プラス記号） を使います。
例えば「h1+h2+h3」と入力すると以下のように開きます。
<h1></h1> <h2></h2> <h3></h3>
このように、+ を使うことで兄弟関係のタグを一括で生成できます。
子要素（ネスト）の作成｜>演算子の活用
HTMLでは、タグの中に別のタグを入れること（ネスト構造） がよくあります。
Emmetでは >（大なり記号） を使うことで、親子関係のタグを簡単に記述できます。
例えば、「div>p」と入力すると以下のように開きます。
<div>
<p></p>
</div>このように、> を使うと div の中に p を自動生成 できます。
繰り返し要素の作成｜*演算子の活用
リストやテーブルのように、同じタグを複数回書く 場面はよくあります。
そんなときは *（アスタリスク） を使うと便利です。
例えば、「ul>li*3」と入力すると以下のように開きます。
<ul>
<li></li>
<li></li>
<li></li>
</ul>このように、* の後に数字を指定すると、その回数分だけタグが自動生成 されます。
Emmet基本記法の要点まとめ
ここまで、Emmetの基本的な使い方を紹介しました。
html:5でHTMLの基本構造を一瞬で作成+を使って兄弟タグを作成>を使って子要素を作成*を使って複数の同じタグを生成#や.を使ってidやclassを指定
このテクニックを活用するだけで、HTMLの記述スピードが格段に向上 します！
次の章では、さらに便利な「テキストの自動入力」や「数値のインクリメント」 について詳しく解説します。
テキストの自動入力と数値のインクリメント
HTMLを記述するとき、見出しや段落の中にテキストを入れる ことが多くあります。
Emmetでは自動でテキストを挿入したり、連番のクラス名を設定したりすることが可能です。
ここでは、テキストの自動入力と数値のインクリメント に関する便利なテクニックを紹介します。
{}（波カッコ）でテキストや見出しを自動入力する方法
通常、HTMLタグを入力したあとに手動でテキストを記述しますが、Emmetを使えばあらかじめテキストを含めたタグ を生成できます。
例えば「p{こんにちは、Emmet！}」と入力すると以下のように展開されます。
<p>こんにちは、Emmet！</p>
このように{}（波カッコ） を使うことで、テキストを含めた状態でタグを展開できます。
また見出し（h1 や h2）を記述するときも、Emmetを使えば一瞬でタイトル入りの見出しを作成 できます。
例えば「h1{Emmetを使って時短しよう！}」と入力すると以下のように展開されます。
<h1>Emmetを使って時短しよう！</h1>
この方法を使えばページタイトルや見出しをすばやく入力できる ので、作業効率が向上します。
$で連番を付ける方法（開始番号・ゼロ埋め・逆順）
同じクラス名を持つ要素を複数作る際に、連番を振る必要があることがあります。
Emmetでは $（ドルマーク）を使うことで、数値を自動的にインクリメント（連番） できます。
例えば「li.item$*5」と入力すると以下のように展開されます。
<li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li>
このように、$ を使うことで、連番付きのクラス名を簡単に付与できるのです。
また、画像を大量に使うとき、ファイル名に連番を付けることがよくあります。
これも $ を利用してファイル名を連番で生成 できます。
例えば「img[src=”image$.jpg”]*3」と入力すると以下のように展開されます。
<img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg">
このように、数値を自動的に増やしながらHTMLを生成 できるので、面倒な入力作業を大幅に短縮できます。
この章のおさらい｜{} と$の要点
ここまでEmmetを使ったテキストの自動入力と数値のインクリメントを紹介しました。
{}を使ってタグの中に直接テキストを挿入$を使ってクラス名やファイル名に連番を付ける
これらのテクニックを使えば、HTMLを効率的に記述できるだけでなく、ミスを減らすこともできる でしょう。
次の章では、さらに便利な「テーブルやフォームを一瞬で作成する方法」を紹介します！
実際に試しながら学んでいきましょう！
テーブルやフォームを一瞬で作成する方法
Emmetを使うと、HTMLのテーブルやフォームの基本構造を瞬時に生成 できます。
手入力で table や form の要素を作成するのは面倒ですが、Emmetの短縮記法 を使えば、たった数秒でコードを完成させることができます。
ここでは、テーブルとフォームをすばやく作成する方法を詳しく紹介します。
テーブルを生成する省略記法
HTMLの table は、通常<table> の中に <tr>（行）と <td>（セル）を作成する必要があり、手入力だと時間がかかります。
しかし、Emmetを使えばたった1行の入力で複雑なテーブルを一瞬で作成 できます。
基本のテーブル構造を作る方法
テーブルの基本構造を作成するには、例えば「table>tr*3>td*2」と入力すると以下のように展開されます。
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>このように、3行 × 2列のテーブルが一瞬で完成 します。
tr*3 で3つの行を、td*2 で各行に2つのセルを自動生成しています。
ッダー付きのテーブルを作る方法
th（ヘッダーセル）を追加したい場合は、「table>(thead>tr>th*3)+(tbody>tr*3>td*3)」と入力すると以下のように展開されます。
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>このように、thead には th（見出しセル）を作成し、tbody には td（データセル）を配置できます。
フォームを生成する省略記法
フォーム要素はHTMLの中でも特に入力が面倒なタグの1つです。
しかしEmmetを使うことで、フォームの基本構造を数秒で生成できます。
基本のフォームを自動で作る方法
最もシンプルな form を作成する場合は、「form>input:text+input:email+input:password+button」と入力します。
<form>
<input type="text">
<input type="email">
<input type="password">
<button></button>
</form>このようにinput の種類（text、email、password）を一括で指定 できるので、手間が大幅に省けます。
ラベル付きのフォームを自動で作る方法
フォーム要素には label を追加することが推奨 されています。
Emmetを使えば、label を含めたフォームも一瞬で作成可能です。
入力は「 form>(label[for=”name”]{名前}+input:text#name)+(label[for=”email”]{メール}+input:email#email)+button{送信} 」です。
<form>
<label for="name">名前</label>
<input type="text" id="name">
<label for="email">メール</label>
<input type="email" id="email">
<button>送信</button>
</form>このようにラベルと入力フィールドの紐付けも簡単にできる ので、フォームの作成が効率的になります。
セレクトボックスやチェックボックスも簡単に自動生成
フォームには select（ドロップダウン）や checkbox（チェックボックス）などの要素もあります。
これらもEmmetを使えば簡単に作成できます。
入力は「form>(label{性別}+select>option*3)+label>input:checkbox+{同意する}」です。
<form>
<label>性別</label>
<select>
<option></option>
<option></option>
<option></option>
</select>
<label>
<input type="checkbox">同意する
</label>
</form>このように、select や checkbox もスムーズに記述 できます。
この章のおさらい｜表とフォームの定番パターン
ここでは、Emmetを使ったテーブルとフォームの高速作成方法 を紹介しました。
table>tr*3>td*2で3行×2列のテーブルを作成theadとtbodyを組み合わせたヘッダー付きテーブルform>input:text+input:email+buttonで基本フォームを作成labelやselectも簡単に生成- チェックボックスやボタンのテキストも一瞬で追加
Emmetを活用すると、HTMLの面倒な構造を最小限の記述で作成 できるため、作業時間を大幅に短縮できます！
まとめ：Emmetを使ってコーディングを効率化しよう！
ここまでEmmetを活用してHTMLを素早く記述するためのテクニックを学んできました。
Emmetを使うことでHTMLの入力時間を大幅に短縮し、よりスムーズにコーディングができるようになります。
Emmetを使いこなすには、実際に手を動かして試してみるのが一番です。
この機会に、VSCでEmmetの入力を実際に試して、どれくらいスピードアップできるか実感してみましょう！
ここまで学習を進めたあなたは、確実に成長しています！
これからもWeb開発のスキルを高めて、どんどん実践していきましょう！
<<前のページ
HTML/CSSの記事一覧
次のページ>>
初めてのWebサイトを作ろう1-☆3
このサイトの Lesson1-1（HTML学習の入り口） から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1の記事下部からダウンロードして下さい。
Lesson1-☆3のまとめノートを追加しよう
下記のHTMLコードは、このLesson1-☆3で紹介した内容を端的にまとめてブラウザ表示するためのコードです。
これをコピーして「MyWebsite1-s3.html」という名前で保存し、「lesson1（学習フォルダ）」の中に保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lesson1-☆3</title> <link rel="stylesheet" href="style/styles-lesson1.css"> </head> <body> <div class="container"> <header> <h1>Lesson1-☆3：Emmetの使い方完全ガイド</h1> </header> <main> <h2>目的・要点</h2> <p>このレッスンでは、HTMLのコーディングを効率化するための「Emmet」について学びました。Emmetを使うことで、短い入力でHTMLコードを瞬時に展開し、作業時間を大幅に短縮できます。</p> <h2>このレッスンで学習した内容</h2> <h3>Emmetの基本</h3> <ul> <li>EmmetはVisual Studio Code（VSC）にデフォルトで搭載されており、特別な設定なしで利用可能。</li> <li><code>html:5</code> を入力し Tab を押すと、HTMLの基本構造が展開される。</li> </ul> <h3>基本的なEmmetの記述</h3> <ul> <li><strong>タグの展開：</strong> タグ名を入力して <code>Tab</code> キーを押すだけで展開可能。</li> <li><strong>兄弟タグの作成：</strong> <code>+</code> を使うと複数のタグを連続して記述可能。</li> <li>例：<code>h1+h2+h3</code> → <code><h1></h1><h2></h2><h3></h3></code></li> <li><strong>子要素の作成：</strong> <code>></code> を使うと親子関係のタグを作成可能。</li> <li>例：<code>div>p</code> → <code><div><p></p></div></code></li> <li><strong>繰り返し要素の作成：</strong> <code>*</code> を使うと複数の同じタグを生成可能。</li> <li>例：<code>ul>li*3</code> → <code><ul><li></li><li></li><li></li></ul></code></li> </ul> <h3>テキストの自動入力と数値のインクリメント</h3> <ul> <li><code>{}</code> を使ってタグの中に直接テキストを挿入可能。</li> <li>例：<code>h1{Emmetを使おう！}</code> → <code><h1>Emmetを使おう！</h1></code></li> <li><code>$</code> を使うとクラス名やファイル名に連番を付けることが可能。</li> <li>例：<code>li.item$*5</code> → <code><li class="item1"></li>...<li class="item5"></li></code></li> </ul> <h3>テーブルやフォームの自動生成</h3> <ul> <li><strong>テーブルの作成：</strong> <code>table>tr*3>td*2</code> で3行×2列のテーブルが一瞬で作成。</li> <li><strong>フォームの作成：</strong> <code>form>input:text+input:email+button</code> で基本的なフォームを作成。</li> <li><strong>ラベル付きフォーム：</strong> <code>form>(label[for="name"]{名前}+input:text#name)+(label[for="email"]{メール}+input:email#email)+button{送信}</code> で、ラベル付きの入力欄を作成可能。</li> </ul> <h2>トピック・豆知識</h2> <ul> <li>Emmetのショートカットを活用すれば、コーディングの手間を大幅に減らせる。</li> <li>繰り返し記述が多いリストやテーブルの作成に特に効果的。</li> <li><code>Tab</code> キーで展開できない場合は、VSCの設定で「Emmet: Trigger Expansion On Tab」をONにする。</li> </ul> <h2>まとめ</h2> <p>Emmetを使えば、HTMLの記述が驚くほど速くなります。特にWeb開発においては、基本的なコードを素早く記述するスキルが求められます。Emmetの基本を押さえ、実際に使いながら効率的なコーディングを身につけましょう！</p> <p><a href="../MyWebsite.html">トップページへ戻る</a></p> </main> <footer> <p>© 初心者のためのプログラミングテキスト＆問題集</p> </footer> </div> </body> </html>これでLesson1-☆3の作業は完了です。
継続は力なり。次のLessonも、引き続き頑張ってください^^
Emmetの疑問解消｜FAQとよくあるトラブル
初心者がつまずきやすいポイントをFAQとしてまとめ、よくあるトラブルとその解決法をわかりやすく整理しました。
理解を深めたいときや、ふと疑問に感じたときに役立ててください。
FAQ｜Emmetに関するよくある質問
今回の記事に関する「よくある質問」とその解答について、以下の内容を参考にしてください。
- Q1. Emmetの記法を覚えるための効率的な方法はありますか？
-
Emmetは多機能なため、すべてを一度に覚える必要はありません。よく使う省略記法から順に実際のコーディングで使ってみることで、自然と身につきます。また、公式チートシートを活用すると効率的です。
- Q2. Emmetのカスタムスニペットはどうやって設定できますか？
-
Emmetでは自分専用のスニペット（独自の展開ルール）を設定できます。VSCodeの場合、ユーザー設定や拡張機能の設定画面からjson形式で追加できます。頻繁に使うパターンを登録しておくと、作業効率が格段に上がります。
- Q3. EmmetをHTML以外のファイルでも使うことはできますか？
-
はい、EmmetはCSSや一部のテンプレートエンジン（Pug, JSXなど）でも利用可能です。ただし、ファイルの種類によっては展開される内容や使える記法に違いがあるため、各言語ごとのドキュメントを確認することをおすすめします。
よくあるトラブルと解決法｜Emmet編
今回の記事に関する「よくあるトラブル」とその原因、解決法について、以下の内容を参考にしてください。
Emmetの省略記法が自動展開されない
- トラブルの原因と対処法を見る
-
・トラブルの原因例
エディタの設定やファイルの種類、または入力モードが適切でない場合、Emmetの展開が効かなくなることがあります。
・トラブルの解決法
エディタがHTMLやCSSファイルとして認識しているかを確認し、入力モードがプレーンテキストになっていないかを探してください。また、拡張機能が有効になっているか設定画面を確認し、必要に応じて再起動してください。
Emmetの「*」や「+」などの記号が意図した通りに動作しない
- トラブルの原因と対処法を見る
-
・トラブルの原因例
省略記法にタイプミスや文法ミスがある場合、正しく要素が展開されません。特に「>」「+」「*」などの使い方にミスが多く見られます。
・トラブルの解決法
記号や省略記法の前後に余計なスペースや不要な文字が入っていないか、文法ミスがないかを探してください。正しい記法になっているか、公式チートシートや展開例を確認しましょう。
Emmet展開後のHTMLが意図しない構造になる
- トラブルの原因と対処法を見る
-
・トラブルの原因例
複雑な省略記法を使った際に、入れ子構造やクラス名・ID名が間違って指定されている場合があります。
・トラブルの解決法
展開したコードの構造やクラス・IDの指定が意図通りになっているか、Emmet入力部分と生成結果を見比べて間違いがないか探してください。特に入れ子や繰り返し部分の記法を再チェックしましょう。
<<前のページ
HTML/CSSの記事一覧
次のページ>>