【簡単・効率化】VScode Emmetの使い方をわかりやすく解説！

VScodeのEmmetという機能を知っていますか？
EmmetはHTML/CSSの記述量を圧倒的に少なくしてくれる機能です。

私は知らず、一からHTML/CSSを記述していました・・。
「もっと早く知っておけばよかった・・・。」「しかも簡単にできる・・・。」
「一から記述していた時間はなんだったんだ・・・。」

そんな後悔する人を一人でもなくす！
そんなつもりで「Emmetとは？」「Emmetの記述方法」「設定」「使用できない場合の対処法」を中心に解説していきます。

Emmetとは？

EmmetとはHTML/CSSのコード入力を補完してくれる機能であり、少ない記述でHTML/CSSを記述する事ができるので、大幅に作業を削減してくれます。

これまで1文字1文字HTMLを記述していた方にとっては、圧倒的に作業効率を上げてくれる機能です。

例えば「！」と記述しTabを押すと、下記のようにHTMLの雛形を表示してくれます。

imgと記述しtabを押しても<img src=”” alt=””>と簡単に表示されます。

このほかにもHTML/CSSで便利な使い方がありますので一つ一つ見ていきましょう。

Emmet HTML記述

タグの表示

タグをつけるにはタグ名を記載し「tab」を押します。例えば「div」と記載し「tab」を押すと、下記のようにタグをつけて表示する事ができます。「<>」「</>」の記述をいちいちする必要なく、閉じタグの忘れも防止でき、効率的な記述ができます。

クラス名の表示

クラス名の記載をするには「.クラス名」を記載し「tab」を押します。
例えば下記のように「.sample」と記載し「tab」押すと「<div class=”sample”></div>」と表示されます。
「div」すら記載する必要なくクラス名を表示してくれます。

ID名の表示

id名を記載するには、「#id名」を記載し「tab」を押します。
例えば下記のように「#sample」を記載し「tab」を押すと「<div id=”sample”></div>」と表示されます。

クラスid名を組み合せ表示

クラスid名を組み合せ表示するには「.sample#test」と記載し「tab」を押すと下記のようにクラス、idを組み合わせた表示になります。

タグ名を変えたければ、「タグ名.クラス名. id名」を記載します。
例えば「p.sample#test」と記載し「tab」を押すと下記のように表示する事ができます。

複数クラスの表示

複数クラスの表示をするには「.クラス名.クラス名」を記載します。
例えば「.sample1.sample2」を記載すると下記のように表示されます。

「+」マークで複数タグ表示

プラスマークを使い、一度に複数タグ表示させる事ができます。
例えば「p+div」と記載し「tab」を押すと下記のように表示する事ができます。

複数タグも「+」でつなぎ表示する事ができます。
例えば「p+div+span」と記載「tab」を押すと下記のように表示する事ができます。

「>」で入れ子の表示

「>」マークを使い入れ子の記述をする事ができます。
例えば、「ul > li 」と記載し「tab」を押すと下記のように表示する事ができます。

「*」で複数タグを表示

「*」を使い複数タグを表示する事ができます。
例えば、「ul > li*10」と記載し「tab」を押すと下記のように表示する事ができます。

「^」で階層表示

「^」で階層表示をする事ができます。
例えば、「.one>.two>.three^」と記載し「tab」を押すとクラスoneを親階層とし、子要素にtwo、孫にthreeと表示されます。

「$」で連番表示

idなどでは、連番表示する事があります。
例えば「div#sample-$*3」と記載し「tab」を押すと下記のように表示する事ができます。

「{}」でテキスト文字表示

テキスト部は{}で囲み表示する事ができます。
例えば「p.sample{こんにちは}」と記載し、「tab」を押すと下記のように「こんにちは」というテキスト部も表示する事ができます。

Emmet CSS記述

CSSでもEmmetの記述をする事ができます。
例えばCSSファイルに「m」と記載し「tab」を押すと下記のように「margin: ;」と表示する事ができます。

またプロパティに値を指定し、表示する事ができます。
例えばCSSファイルに「m10」と記載し「tab」を押すと下記のように「margin: 10px;」と表示する事ができます。

CSSでのEmmetの基本記述は、プロパティのみ、もしくはプロパティと値を記述します。

Emmet CSS記述（数値）

プロパティの数値を指定する事ができます。

入力	表示
m10	margin:10px;
m10p	margin:10%;
m10r	margin:10rem;
m10e	margin: 10em;

Emmet CSS記述（位置）

プロパティの位置を指定する事ができます。

入力	出力
t	top
b	bottom
l	left
r	right

「mt」と記述し「tab」を押すと、下記のように「margin-top: ;」を指定する事ができます。

Emmet プロパティ一覧

入力	出力
m	margin
p	padding
w	width
h	height
maw	max-width
miw	min-width
mah	max-height
mih	min-height
c	color
bgc	background-color
fz	font-size
fw	font-weight
ff	font-family
d	display
lh	line-height
ta	text-align
td	text-decoration
lts	letter-spacing
z	z-index:
fl	float: left;
cl	clear: both;
d:f	display: flex;
ov	overflow
op	opacity
pos	position: relative;
lis	list-style
bd	border
bdrs	border-radius
bxz	box-sizing: border-box;