【爆速コーディング】HTML/CSSを10倍速く書けるEmmetのチートシートと使い方

こんにちは！かたすけです。

ウェブ制作の学習を始めたばかりの人にとって、HTMLやCSSのコーディングは地道な作業に感じられるかもしれません。しかし、もしあなたが魔法のように一瞬で大量のコードを生成できるツールを知ったらどうでしょうか？それが、Emmet（エメット）です。

Emmetは、HTMLやCSSを短縮記法で書くだけで、複雑なコードを自動で展開してくれる、まさに「コーディングの魔法」です。この記事では、Emmetの基本的な使い方から、知っておくと便利なテクニックまで、初心者向けに徹底的に解説します。これを読めば、あなたのコーディング速度は劇的に向上するでしょう。

VScodeをインストール前の方はこの記事へ！

Emmetとは何か？
Emmetの基本的な使い方
Emmetでできること（応用編）
1. 複合的なHTML構造の展開
2. CSSの展開
まとめ：Emmetを使いこなしてコーディングを加速させよう

Emmetとは何か？

Emmetは、テキストエディタに組み込まれた無料のプラグインです。短いCSSのような構文（通称「エメット記法」）で記述し、TabキーやEnterキーを押すだけで、完全なHTMLタグやCSSルールに展開してくれます。

例：

短縮記法: div.container
展開後のHTML: <div class="container"></div>

このシンプルな仕組みが、日々のコーディング作業を驚くほど効率化します。

Emmetの基本的な使い方

Emmetの記法は、CSSセレクタの書き方と非常によく似ています。

要素の生成

タグ名をタイプしてTabを押すだけです。

header → <header></header>
footer → <footer></footer>

クラスとIDの付与

.（ドット）でクラスを、#（ハッシュ）でIDを簡単に追加できます。

div.main → <div class="main"></div>
p#intro → <p id="intro"></p>
div#header.container → <div id="header" class="container"></div>

子要素と兄弟要素

> (子)：子要素を作成します。
+ (兄弟)：同じ階層に兄弟要素を作成します。
ul>li →

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

h1+p →

<h1></h1>
<p></p>

div>h2+p →

<div>
  <h2></h2>
  <p></p>
</div>

複数要素の生成

* (乗算)を使うことで、同じ要素を複数生成できます。

li*3

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

属性の付与

[] (角括弧)を使って属性を追加します。

a[href="#"] → <a href="#"></a>
img[src="logo.png" alt="ロゴ"] → <img src="logo.png" alt="ロゴ">

連番の付与

$ (ドルマーク)を使うと、要素に連番を振ることができます。

li.item$*3

<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>

Emmetでできること（応用編）

基本をマスターしたら、これらの記法を組み合わせて、さらに複雑な構造を一瞬で生成できます。

複合的なHTML構造の展開

div.wrapper>header.main-header+main.content>ul>li.item$*4

<div class="wrapper">
  <header class="main-header"></header>
  <main class="content">
    <ul>
      <li class="item1"></li>
      <li class="item2"></li>
      <li class="item3"></li>
      <li class="item4"></li>
    </ul>
  </main>
</div>