VScodeのEmmetとは？HTML・CSSの高速入力を解説

PR VScode

VScodeのEmmetとは？HTML・CSSの高速入力を解説

💡 この記事でわかること

  • Emmetとは何か
  • 「!」でHTMLの雛形を一瞬で展開する方法
  • クラス・IDを省略記法で指定する方法
  • 子要素・兄弟要素・繰り返しの書き方
  • CSSでの数値の省略記法

👉 VS Codeの最初に入れておきたいおすすめ拡張機能についての記事はこちら

1. Emmetとは?

Emmetとは、
👉 短い省略記法を入力してTabキー(またはEnterキー)を押すだけで、HTML・CSSのコードを自動的に展開してくれる機能です。

💡 拡張機能ではなくVS Codeに標準搭載されている機能なので、追加のインストールは不要です。HTML・CSSファイル(拡張子が.html/.cssなど)を開いていれば、初期設定のままですぐに使えます。

2. 「!」でHTMLの雛形を展開する

新しい.htmlファイルを作成し、1行目で!(半角の感嘆符)だけを入力してTabキーを押してみましょう。

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

👉 たった1文字とTabキーだけで、HTMLファイルの基本的な雛形が一瞬で出来上がります。カーソルはbodyタグの中に自動で移動するので、そのまま中身を書き始められます。

3. タグ名・クラス・IDの省略記法

タグ名の後ろに.を付けるとclass属性、#を付けるとid属性を指定できます。

入力:  div.card
展開後: <div class="card"></div>

入力:  div#header
展開後: <div id="header"></div>

入力:  div.card#main
展開後: <div id="main" class="card"></div>

💡 実はdiv自体も省略でき、.cardだけ入力してTabキーを押しても<div class="card"></div>が展開されます。divは最もよく使うタグなので、Emmetが自動的に補ってくれる仕組みです。

4. 子要素・兄弟要素・繰り返し

>(子要素)・+(兄弟要素)・*(繰り返し)を組み合わせると、複数のタグをまとめて展開できます。

入力: ul>li*3

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

入力: header+main+footer

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

👉 「>は中に入る、+は横に並ぶ(兄弟になる)、*は繰り返す」と覚えておくと、組み合わせ方を予想しやすくなります。番号を自動で振りたい場合は、li.item$*3のように$を使うと、item1・item2・item3のように連番が入ります。

5. CSSでの省略記法

CSSファイルでもEmmetが使え、プロパティ名と数値を短く省略して入力できます。

入力:  m10
展開後: margin: 10px;

入力:  p20-10
展開後: padding: 20px 10px;

入力:  df
展開後: display: flex;

入力:  w100p
展開後: width: 100%;

💡 最初は「何を打てば何が出るのか」を覚えるのが大変に感じるかもしれませんが、入力中に候補がポップアップで表示されるので、実際に手を動かしながら少しずつ覚えていけば十分です。

6. まとめ

  • !でHTMLの基本雛形を一瞬で展開できる
  • .でclass、#でidを指定できる
  • >で子要素、+で兄弟要素、*で繰り返しを指定できる
  • CSSでもm10・dfのような数値・プロパティの省略記法が使える

👉 まずは「!」でHTML雛形を作る、「.クラス名」でdivを作る、この2つだけでも覚えておくと、日々のコーディングがかなり速くなります。慣れてきたら、繰り返しや子要素の組み合わせにも挑戦してみましょう。

-VScode
-, , ,