HTML書くのが、めちゃラクに。Emmet を使えばコーディングが爆速になる話

「HTML 書くのが、正直めんどくさい…」

Web サイトを作ろうと思ったことがある人なら、一度は感じたことがあるのではないでしょうか。

< や > を何度も入力し、閉じタグを忘れ、クラス名を一つひとつ打ち込んでいく…。地味で、単調で、時間がかかる作業ですよね。

僕もそうでした。Web 制作を学び始めた頃、<div> を開いては閉じ、<li> をひたすらコピー＆ペーストする毎日。だんだん入れ子でわけわからなくなってくるんですよね。

HTML の入力支援があるエディタなら少し便利に書くことはできるんですが、「もっと楽な方法はないのかな」と思ったりしました。でも、その悩み、一瞬で解決できる方法があります。

もしあなたが、

  • HTML のコーディングをもっと速く、効率的にしたい
  • 面倒な手作業から解放されたい
  • AI 時代でも役立つコーディングの基礎スキルを身につけたい

そう考えているなら、「Emmet（エメット）」という機能を使いこなせば、HTML を書くのがすごくラクになりますよ。

この記事でわかること

  • HTML コーディングが爆速になる「Emmet」とは何か
  • これだけは覚えたい、Emmet の基本的な使い方 5 選
  • AI と Emmet を組み合わせた、最新の Web 制作ワークフロー
  • なぜ今、Emmet を学ぶべきなのか

HTML コーディングの常識を変える「Emmet」とは？

Emmet とは、一言で言えば 「短い略語を展開して、複雑な HTML や CSS のコードを素早く入力するためのツール」です。

これがヤバイくらいに便利なんです。

例えば、HTML の基本的なテンプレート構造。これを手で入力したら、何行も書かなければいけませんよね。でも Emmet を使えば、たった 1 文字入力してキーを押すだけ。

! + Tabキー

これだけで、以下のような HTML5 の基本テンプレートが一瞬で展開されます。

<!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>

すごくないですか？

この Emmet は、今や多くのコードエディタに標準で搭載されています。特に、僕が愛用している Visual Studio Code (VSCode) では、特別な設定なしにすぐに使い始めることができます。

面倒な繰り返し作業を自動化し、僕たちが「創造的な作業」に集中できるようにしてくれる。それが Emmet の本質なんです。

これだけは覚えたい！Emmet 基本の型 5 選

5 冊の魔法の呪文書が並んでいるイラスト。それぞれの本には、「!」や「\*」などの異なる Emmet の基本記号が輝いており、Emmet の基本的な型を表現している。

Emmet にはたくさんの機能がありますが、全部を一度に覚える必要はありません。わからないことはその都度調べる。そのスタンスで問題ないですよ。まずは、日常のコーディングで頻繁に使う、基本的ないくつかの「型」を覚えるだけで、作業効率は劇的に向上します。

1. ! で作る HTML5 テンプレート

先ほども紹介しましたが、これは絶対に外せません。新しい HTML ファイルを作ったら、まず最初にやること。それが「!」と入力してTabキー。これだけで、Web 制作のスタートラインに一瞬で立てます。もう、定型文をどこかからコピーしてくる必要はありません。

2. . でクラス名を指定する

CSS でおなじみの「.」は、Emmet ではクラス名を指定するのに使います。

例えば、divタグにcontainerというクラスをつけたい場合。

div.container + Tabキー

と入力すると、

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

に変換されます。ちなみに、divは省略可能なので、単に.containerと打つだけでも同じ結果になります。めちゃくちゃ楽ですよね。

3. > で子要素を作る

親子関係のある HTML 構造も、Emmet なら直感的に書けます。「>」記号を使って、要素の入れ子を表現するんです。

例えば、ulタグの中にliタグを入れたい場合。

ul>li + Tabキー

と入力すると、

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

が生成されます。簡単すぎてもはや笑えてきます。

4. * で要素を複製する

リスト項目（li）のように、同じ要素をたくさん作りたい時ってありますよね。そんな時は「*」（アスタリスク）の出番です。

li*5 + Tabキー

と入力すれば、

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

と、liタグが 5 つも一瞬で出来上がります。もう、<li></li>を必死にコピペしていたあの頃には戻れません。

5. 組み合わせの応用技

そして、Emmet の真骨頂は、これらの記号を組み合わせられることです。

例えば、「headerというクラスがついたdivの中に、logoというクラスのh1と、navタグがあり、そのnavの中にはitemというクラスのliが 5 つ入ったulを配置したい」…なんて複雑な構造を考えてみましょう。

手で書いたら、何分かかるでしょうか？Emmet ならこうです。

div.header>h1.logo+nav>ul>li.item*5 + Tabキー

これを入力してTabキーを押すと、以下のコードが一発で生成されます。

<div class="header">
	<h1 class="logo"></h1>
	<nav>
		<ul>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
		</ul>
	</nav>
</div>

どうですか？もはや魔法じゃないですか？

たった一行の呪文で、これだけの構造が一瞬で組み上がる。これが Emmet の力です。この組み合わせをいくつか覚えておくだけで、HTML コーディングの速度は数倍、いや数十倍に跳ね上がります。

あ…、きっと今「めんどくせ」と思ったでしょう？ｗ　僕も最初は「めんどくせ」でした。
でもこれは慣れですよ。使い始めればすぐに慣れてきますし、慣れたらもう手放せなくなってしまいます。

AI 時代だからこそ Emmet が輝く理由

「でも、最近は AI がコードを全部書いてくれるんじゃないの？」

そう思うかもしれません。確かに、僕も先日、Gemini の canvas 機能で「架空の化粧水の LPを作って」とお願いして、ベースとなる HTML を生成しました。

実際にやった例がこれです。

  1. Gemini canvas に指示:
    「架空の化粧水の LP を作成してください。清潔感のあるカラーで、シンボリックなアイキャッチや女性が化粧水をつけている写真なども入れて、適当な文章も入れて、それっぽく作成してください。」
  2. AI が生成:
    ベースとなる HTML と CSS のコードが出力される。
  3. 画像生成:
    Imagen で化粧水のボトル画像と女性の画像を生成し、それぞれの画像を Nano-Banana に渡して、女性にボトルを持たせた画像を生成。
  4. 画像差し替え:
    生成した画像を AI が生成したコードのプレースホルダー部分（画像のパスなど）と差し替え。

このワークフロー、めちゃくちゃ強力です。アイデアが一瞬で形になる。まさに未来の Web 制作ですよね。

実際にこんなページがすぐできます。

でも、ここで Emmet が活きてくるんです。

AI が生成したコードは、あくまで「たたき台」。完璧ではありません。「ここのリスト、もう 2 つ増やしたいな」「このセクションに、もう一つdivを追加して囲みたい」といった微調整が必要になります。

そんな時、どうやって修正しますか？

  • A さん:
    AI にもう一度、細かい指示を出し直して再生成してもらう。
  • B さん:
    手作業でタグをコピーしたり、一つひとつ打ち込んだりする。
  • C さん:
    Emmet を使って、li*2やdiv.new-section>といった略語で、一瞬で修正する。

一番速くてストレスがないのは C さんかなと思います。

もちろん A さんの方法で、そのままバイブコーディング的に進めてもいいんですけど、それだと AI にうまく指示を伝えるプロンプト能力も必要になりますし、AI は気まぐれなところもあるので、最初から作ったほうが早い！と深みにハマることもありますからね。

AI にすべてを「丸投げ」するのではなく、AI を優秀なアシスタントとして使いこなし、最終的な仕上げや微調整は人間がスピーディーに行う。 この「AI との共同作業」において、Emmet は最強の武器になると思うんです。

AI が大まかな設計図を描き、Emmet で細部を瞬時に組み立てる。このハイブリッドな制作スタイルこそ、これからのスタンダードになっていくと僕は確信しています。

まとめ：面倒な作業は Emmet に任せて、創造的な時間を手に入れよう

HTML のコーディングは、Web 制作の基本でありながら、最も時間のかかる作業の一つでした。でも、Emmet の登場によってその常識は覆ったと感じます。

  • ! で一瞬でテンプレートを呼び出し、
  • . や >、* を組み合わせて、複雑な構造も呪文のように書き上げ、
  • AI が生成したコードの微調整も、ストレスなく瞬時にこなす。

Emmet を覚えると、タイピングの手間を省けます。面倒な作業から解放され、デザインを考えたり、新しいアイデアを試したりといった「創造的な時間」を増やせます。…と、ちょっとそこまでは言い過ぎかもしれないけれど、慣れればすごくラクになるのは間違いないです。

もし Emmet に興味が出てきたなら、新しい HTML ファイルを作って、ぜひ試してみてください。

! と打って、Tabキーを。

きっと「おお！」となりますよ。

そうそう、VSCode の導入も忘れずにｗ　超便利ですから。

「メモ帳」からの卒業！初心者こそVisual Studio Codeを使うべき4つの理由
https://tele-commuter.com/tool/vscode-first-editor-choice/
メモ帳での作業に限界を感じているあなたへ。Visual Studio Codeを使えば、文章作成やコーディングが驚くほど快適になります。初心者がつまずかないための4つのメリットと、その活用法を紹介します。
https://tele-commuter.com/tool/vscode-setup-guide-for-beginners/
【初心者向け】「自分で作れた！」が味わえる。HTML & CSSで作るWebサイトの作り方
https://tele-commuter.com/website/html-css-beginner-guide/
Web制作の第一歩を応援！本記事では、HTMLとCSSの役割から、ファイルの作成、ブラウザでの表示、簡単なカスタマイズまでを完全ガイド。専門知識不要で「創る楽しさ」を実感できます。

このブログではテレワークやパソコンを使って自宅で仕事をするために役立つ小ネタを多数紹介しています。Twitterでも情報発信していますので、今回の記事が役立ったよ！と思ったらTwitterでいいね＆フォローお願いします！

Twitter: @tele_commuter