Emmetを使ってHTMLやCSSを素早くコーディング

2023年 6月28日　Posted　野々瀨(フロントエンドエンジニア)

例えばHTMLでは次のように書くとします。

<div id="block">
	<p class="text">あいうえお</p>
</div>

この例では少々短いので比較的簡単に書けますが、より長いコーディングを行いますと、閉じタグやインデントなどいちいちキーボードで入力していくのは、意外と手間で面倒に感じてくると思います。そこでそんな面倒なことを軽減し、素早く効率的にコーディングができるEmmetという機能をご紹介します。

Emmetとは

Emmet（エメット）とは、短い単語の組み合わせで、素早くHTMLやCSSのコーディングを行うことができる機能（ツール）です。元々は"Zen-Coding"という名称でしたが、"Emmet"という名称に変わりました。
例えば先ほどのHTMLでは、

<div id="block">
	<p class="text">あいうえお</p>
</div>

と書きましたが、これをEmmetで書くと、

#block>p.text{あいうえお}

のように書くことができます。
また、表組みやリストといった同じ要素が連続したコーディングなども素早く記述することができます。この辺りは後ほどご説明します。

Emmetを使用するには

Emmetを使用するには、Emmetに対応したエディタまたはプラグイン、拡張機能で使用することができます。

エディタEmmetの機能
Dreamweaver CC 標準で備わっている
* CSは拡張機能のインストールで対応
Visual Studio Code 標準で備わっている
Brackets 標準で備わっている
Atom パッケージをインストールすることで対応
PhpStorm 標準で備わっている
Sublime Text パッケージをインストールすることで対応
EmEditor スニペットのインストールで対応
Eclipse ソフトウェアをインストールすることで対応

なお、各エディタでの有効方法やインストール方法などは省略させていただきます。

記述方法

エディタによって多少記述方法は異なりますが、Emmetの構文を記述し、EnterキーやTabキーを入力することで、それぞれの元のコードに展開され変換されます。

例えば次のように入力し、

#block>p.text{あいうえお}

EnterキーやTabキーを入力すると、

<div id="block">
	<p class="text">あいうえお</p>
</div>

へ変換されます。

なお、先ほどお伝えしたとおり、エディタによって変換の方法などが異なりますので、各エディタでの記述方法については省略されていただきます。

基本的な構文（HTML編）

要素

要素名を記述することで、その要素名のタグを生成することができます。
例えば、

div

と入力すると次のようにコードが展開されます。

<div></div>

また、要素名は次のような省略文字で指定することもできます。

adr
<address></address>

詳しくは次のチャートシートページをご覧ください。
https://docs.emmet.io/cheat-sheet/

クラス名の付与

.クラス名を記述することで、クラス名を付与することができます。
例えば、

p.foo

と入力すると次のようにコードが展開されます。

<p class="foo"></p>

複数のクラス名を増やしたい場合は.クラス名.クラス名のように続けて入力することで、複数のクラス名を付与することができます。

p.foo.bar

と入力すると次のようにコードが展開されます。

<p class="foo bar"></p>

ID名の付与

#ID名を記述することで、クラス名を付与することができます。
例えば、

p#foo

と入力すると次のようにコードが展開されます。

<p id="foo"></p>

入れ子（親子階層）

親要素>子要素のように>を記述することで、要素を入れ子（親子階層）にすることができます。
例えば、

div>p

と入力すると次のようにコードが展開されます。

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

兄弟要素（同階層）

要素+要素のように+を記述することで、兄弟要素（同階層）にすることができます。
例えば、

div+p

と入力すると次のようにコードが展開されます。

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

一つ上の階層

要素^要素のように^を記述することで、一つ上の階層に要素を展開します。
例えば、

div^p

と入力すると次のようにコードが展開されます。

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

また、^^のように連続して指定することができ、つなげる度にさらに上の階層で展開します。

div>p^^span
<div>
	<p></p>
</div>
<span></span>

要素を繰り返す

要素*数のように*数字を記述することで、指定した数分の要素を展開します。
例えば、

ul>li*3

と入力すると次のようにコードが展開されます。

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

連番の付与

$を記述することで、*数で繰り返された際の番号を展開します。
例えば、

ul>li.foo$*3

と入力すると次のようにコードが展開されます。

<ul>
	<li class="foo1"></li>
	<li class="foo2"></li>
	<li class="foo3"></li>
</ul>

また、$$のように連続して指定することができ、ゼロで埋めた番号で展開されます。

ul>li.foo$$*3

ul>li.foo$$$*3
<ul>
	<li class="foo01"></li>
	<li class="foo02"></li>
	<li class="foo03"></li>
</ul>

<ul>
	<li class="foo001"></li>
	<li class="foo002"></li>
	<li class="foo003"></li>
</ul>

さらに、$@開始番号と後に@数字を記述することで、連番の開始番号を指定することができます。負の値を指定すれば逆順にすることもできます。

ul>li.foo$@5*3

ul>li.foo$@-*3

ul>li.foo$@-3*3
<ul>
	<li class="foo5"></li>
	<li class="foo6"></li>
	<li class="foo7"></li>
</ul>

<ul>
	<li class="foo3"></li>
	<li class="foo2"></li>
	<li class="foo1"></li>
</ul>

<ul>
	<li class="foo5"></li>
	<li class="foo4"></li>
	<li class="foo3"></li>
</ul>

テキストの挿入

{文字}と文字を波括弧で囲って記述することで、テキストを展開することができます。
例えば、

p{あいうえお}

と入力すると次のようにコードが展開されます。

<p>あいうえお</p>

また、+などでも使うことができます。

div>p+{あいうえお}
<div>
	<p></p>
	あいうえお
</div>

ダミーテキストの挿入

loremと記述することで、ダミーのテキストを展開することができます。 例えば、

p>lorem

と入力すると次のようにコードが展開されます。

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia facilis non voluptates odit. Doloremque eius, dolor quaerat veritatis, quia ex placeat reiciendis maiores molestias, provident reprehenderit voluptatibus dolore alias numquam?</p>

また、lorem単語数とloremの後に単語数を付けることで、展開される単語の数を制御することができます。

lorem5

lorem12
Lorem ipsum dolor sit amet.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam adipisci nam quo.

※ loremは"Lorem ipsum"（ロレム・イプサム）のことで、ラテン語由来のまったく意味のない単語の羅列です。

属性の付与

[属性]と属性を角括弧で囲って記述することで、属性を付与することができます。属性の指定の仕方はHTMLの属性の指定の仕方と同じです。
例えば、

a[href="/foo/bar.html" target="_blank"]{リンク}

と入力すると次のようにコードが展開されます。

<a href="/foo/bar.html" target="_blank">リンク</a>

グループ化

(構文)と構文を丸括弧で囲うことで、グループ化することができます。階層のある兄弟要素を展開する際などに用います。
例えば、

div>(p.foo{あいうえお}>span{アイウエオ})+(p.bar{かきくけこ}>span{カキクケコ})

と入力すると次のようにコードが展開されます。

<div>
	<p class="foo">あいうえお<span>アイウエオ</span></p>
	<p class="bar">かきくけこ<span>カキクケコ</span></p>
</div>

エスケープ（実体参照化）

要素|eと記述することで、エスケープ（実体参照化）して展開します。
例えば、

div.foo>p|e

と入力すると次のようにコードが展開されます。

&lt;div class="foo"&gt;
	&lt;p&gt;&lt;/p&gt;
&lt;/div&gt;

Doctype宣言

!!!と記述することで、Doctype宣言を展開します。

!!!

と入力すると次のようにコードが展開されます。

<!DOCTYPE html>

HTMLのひな形

!と記述することで、HTMLのひな形を展開することができます。

!
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

※ エディタによって展開される内容が異なりますので、ご注意ください。

終了（閉じ）タグの省略

カスタム要素など要素名で展開すると、終了（閉じ）タグが付きます。

item[id="foo"]
<item id="foo"></item>

終了（閉じ）タグを付けたくない場合は、最後にスラッシュ（/）を付けることで終了（閉じ）タグが省略されます。

item[id="foo"]/
<item id="foo">

基本的な構文（CSS編）

プロパティ

各プロパティの省略文字を記述することで、それぞれのプロパティを展開します。 例えば、

p {
	m
}

と入力すると次のようにコードが展開されます。

p {
	margin: ;
}

構文と展開後は例えば次のようなものがあります。

構文展開後
m margin: ;
pt padding-top: ;
bd border
bg background: ;
pos position: ;
bxz box-sizing: ;
z z-index: ;

全てのプロパティはご紹介しきれませんので、詳しくは次のチャートシートページをご覧ください。
https://docs.emmet.io/cheat-sheet/

宣言（プロパティと値の一括指定）

m5のようにプロパティの省略文字に続けて値を指定することで、宣言（プロパティと値の一括指定）を展開することができます。 例えば、

p {
	m5
}

と入力すると次のようにコードが展開されます。

p {
	margin: 5px;
}

また、ハイフンで指定することでショートハンドなど、複数の値を指定することもできます。

p {
	m5-10-15
}

と入力すると次のようにコードが展開されます。

p {
	margin: 5px 10px 15px;
}

※ 単位はpxが自動的に付与されます。

単位

値を指定したい場合は、値の後に単位を付けます。基本的には単位も省略文字で指定します。（単位を省略した場合はpxが自動的に付与されます。）
例えば、

p {
	m5p
}

と入力すると次のようにコードが展開されます。

p {
	margin: 5%;
}

単位は主に次のようなものがあります。

構文展開後
px
p %
e em
x ex
r rem

なお、単位を省略せずに指定すれば、そのままその単位が展開されます。

p {
	m5px
}

と入力すると次のようにコードが展開されます。

p {
	margin: 5px;
}

色

カラーコードは#に続いて番号を指定します。16進数カラーの指定の仕方と同じですが、連続する番号の場合、1桁指定するだけで展開することができます。
例えば、

p {
	c#3
}

と入力すると次のようにコードが展開されます。

p {
	color: #333;
}

これ以外にも次のような指定の方法もあります。

構文展開後
#3 #333
#f5 #f5f5f5
#f90 #ff9900
#f.7 rgba(255, 255, 255, 0.7)
lg(#d00,#00d) background-image: linear-gradient(#d00, #00d);

複数のプロパティや宣言の一括指定

複数のプロパティや宣言を一括指定するには、+を記述します。続けて指定したいプロパティや宣言同士を+でつなげて指定します。

p {
	m3.5e+p5+c#3
}

と入力すると次のようにコードが展開されます。

p {
	margin: 3.5em;
	padding: 5px;
	color: #333;
}

!important

!を後に付けることで、!importantが付与されます。 例えば、

p {
	m5!
}

と入力すると次のようにコードが展開されます。

p {
	margin: 5px !important;
}

@ルール

@の後に@ルールの先頭文字を付けることで、それぞれの@ルールが展開されます。
例えば、

@i

と入力すると次のようにコードが展開されます。

@import url();

Emmetでは次の@ルールに対応しています。

構文展開後
@i @import url();
@m @media screen {}
@f @font-face { font-family:; src:url(); }
@k @keyframes identifier { }

ベンダープレフィックス

-を先頭に付けることで、ベンダープレフィックスを付与することができます。 例えば、

-bdrs

と入力すると次のようにコードが展開されます。

-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;

エディタでのEmmet構文のサポートの違い

エディタによっては、幾つかのEmmetで展開後の内容が違っていたり、そもそも構文がサポートされていなかったりします。 例えばVisual Studio Codeでは次のような構文を使用することができません。