アフィリエイト広告を紹介しています
Working Class Hero：泥臭く、スマートに生き抜く。

汗と汚れの染み込む現場も、キーボードを叩く現場も、どちらも知っている。 元ライン工の僕が、ITの世界で見つけた「少しだけ楽に、自分らしく働くための知恵」を置いておきます。

僕が働き方を変えた理由
【学ぶ】ITスキル習得
【学ぶ】ITスキル習得
【変える】エンジニア転職
【変える】エンジニア転職
【知る】工場勤務のリアル
【知る】工場勤務のリアル

【爆速】VSCodeのEmmetの使い方！HTMLを10倍速で書く方法を初心者向けに徹底解説！

HTMLのタグを1つずつ手打ちしていませんか？

実はVSCodeにはEmmet（エメット）という機能が標準搭載されていて、数文字入力するだけでHTMLが一瞬で展開されます。

この記事では、EmmetでHTMLを爆速で書く方法を初心者向けに解説します。

太郎
太郎

Emmetを覚えると、HTML入力のスピードが文字通り10倍になります。最初に覚えるべきVSCodeスキルの1つです！

目次

Emmetとは？

Emmet（エメット）は、短い省略記法を入力してTabキーを押すだけで、HTMLやCSSのコードを自動展開してくれる機能です。

例えば：

div.container

と入力してTabキーを押すと：

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

に自動展開されます。

Emmetのメリット
  • HTMLの入力量が大幅に減る
  • タイプミスが減る（自動で閉じタグが生成される）
  • コーディングのスピードが上がる
  • VSCodeに標準搭載なのでインストール不要

【基本】Emmet記法の書き方

タグの生成

タグ名を入力してTabキーを押すだけです。

入力 Tab後の出力 説明
div <div></div> divタグ生成
p <p></p> pタグ生成
h1 <h1></h1> h1タグ生成
a <a href=””></a> aタグ生成（href付き）
img <img src=”” alt=””> imgタグ生成（src,alt付き）
ul <ul></ul> ulタグ生成
input <input type=”text”> inputタグ生成

クラスの追加（ドット .）

CSSセレクタと同じ書き方でクラスを追加できます。

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

p.text.bold → <p class="text bold"></p>

span.highlight → <span class="highlight"></span>

IDの追加（シャープ #）

div#main → <div id="main"></div>

header#top → <header id="top"></header>

クラスとIDの組み合わせ

div#wrapper.container → <div id="wrapper" class="container"></div>
太郎
太郎

CSSのセレクタと同じ書き方なので、CSSを少し知っている人ならすぐ覚えられますよ！

【応用】Emmetの便利な記法

子要素（>）

> で子要素を作れます。

ul>li

展開結果：

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

兄弟要素（+）

+ で同じ階層の要素を並べられます。

header+main+footer

展開結果：

<header></header>
<main></main>
<footer></footer>

繰り返し（*）

* で同じ要素を複数生成できます。

ul>li*5

展開結果：

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

テキストの挿入（{}）

{} でテキストを入れられます。

a{クリック} → <a href="">クリック</a>

p{こんにちは} → <p>こんにちは</p>

連番の生成（$）

$ で連番を入れられます。

ul>li.item$*3

展開結果：

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

グループ化（()）

() でまとまりを作れます。

(header>nav)+(main>section*2)+footer

展開結果：

<header>
  <nav></nav>
</header>
<main>
  <section></section>
  <section></section>
</main>
<footer></footer>

【実践】よく使うEmmetパターン

HTMLの雛形を一瞬で作る

!

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>
太郎
太郎

HTMLファイルを新規作成したら、まず「!」→Tabを打つ。これだけでOKです！

ナビゲーションメニュー

nav>ul>li*4>a{メニュー$}

カード型レイアウト

div.card>(div.card-image>img)+(div.card-body>(h3.card-title{タイトル})+p.card-text{説明文})

フォーム

form>(div.form-group>(label{名前})+input[type=text])+(div.form-group>(label{メール})+input[type=email])+button[type=submit]{送信}

EmmetがうまくいかないときのQ&A

Tabキーを押しても展開されない

対処法：
1. ファイルの言語モードが「HTML」になっているか確認（右下に表示）
2. 設定で "emmet.triggerExpansionOnTab": true を追加

CSSファイルでEmmetを使いたい

CSSでもEmmetは使えます。

m10 → margin: 10px;
p20 → padding: 20px;
df → display: flex;
jcc → justify-content: center;
aic → align-items: center;
よく使うCSS Emmet
  • `w100` → `width: 100px;`
  • `h50p` → `height: 50%;`
  • `bgc#fff` → `background-color: #fff;`
  • `fz16` → `font-size: 16px;`
  • `fw700` → `font-weight: 700;`

HTML/CSSをもっと効率よく学ぶなら

Emmetを覚えると、HTMLの記述スピードが飛躍的に上がります。

しかし、HTMLとCSSの基礎知識がなければ、省略記法を使いこなすのは難しいです。

関連記事
  • [VSCode拡張機能おすすめ15選](/blog/3409/)
  • [VSCodeのショートカットキーおすすめ20選](/blog/3407/)
  • [VSCodeの波線の意味と消し方](/blog/423/)

基礎からしっかり学んで、実務で使えるスキルを身につけたい方はスクールの活用がおすすめです。

HTML/CSSを最短で身につけたいなら

独学で限界を感じていませんか？プロのカリキュラムなら最短でスキルが身につきます。

※無料体験・無料カウンセリングあり

まとめ：Emmetを覚えてHTMLを爆速で書こう

今回は、VSCodeのEmmet機能の使い方を解説しました。

まずはこの5つを覚えよう
  • `!` → HTML雛形を一瞬で生成
  • `div.classname` → クラス付きdiv
  • `ul>li*5` → リストを一括生成
  • `>` → 子要素の作成
  • `*` → 繰り返し生成

Emmetを使いこなすだけで、HTML入力のスピードが劇的に変わります。

まずは新規HTMLファイルで「!」→Tabを打つところから始めてみてください！

コメント