HTMLやCSSを用いたコーディングに慣れてくると、毎回ソースコードをすべて手打ちするのが手間になってくる瞬間が訪れるかと思います。例えば、テーブルのHTMLを書きたいとき、見出しまで到達するのに

<table><tbody><tr><th>…

1	<table><tbody><tr><th>…

という記述をしないといけません。ひとつずつ手打ちするのもいいんだけれど、毎回書くのは面倒だな…、というときに便利なものが「Emmet（エメット）」です。

Emmetとは、HTML、CSSなどの入力を補助する拡張機能（プラグイン）のこと。ショートカットキーとTabキーでタグを展開できるので、入力する手間と時間を減らしてくれる大変便利なものとなっています。

たとえば、先ほどのテーブルを作りたいというとき、

table(tr>th*3)+(tr>td*3)

1	table(tr>th*3)+(tr>td*3)

と入力し、タブ（Tab）キーを押すと

<table> <tr> <th></th> <th></th> <th></th> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>

1 2 3 4 5 6 7 8 9 10 11 12

<table>      <tr>          <th></th>          <th></th>          <th></th>      </tr>      <tr>          <td></td>          <td></td>          <td></td>      </tr> </table>

というソースが出てくるんです！
CSSも同様に、例えば上下は10px、左右は10pxのmarginをつけたい、というとき、

m10-20

1

m10-20

と入力し、タブキーを押すだけで

margin: 10px 20px;

1	margin: 10px 20px;

というソースに変換されます。とても便利ですよね！
HTMLはCSSのセレクタのような書き方、CSSは頭文字をつないでいくイメージと捉えたらイメージしやすいかなと思います。Emmetを活用できるようになれば、かなりの時短・労力の削減になると思うので、ぜひ今日から使ってみてはいかがでしょうか。

Emmetに対応しているかは、エディタによります。対応しているものは以下です。

利用しているテキストエディタに応じてEmmetの導入方法は異なります。ぜひ調べてみてください。
それでは、HTMLとCSSのEmmet記述について紹介していきます。

HTML

まずはHTMLです。

HTMLの雛形「!」

「!（エクスクラメーションマーク）」ひとつでHTMLの雛型を展開できます。ひとつの記号でここまで記述を省略できるのか、と驚きましたか？　この時点でEmmetの良さが伝わったのではないでしょうか。

途中にあるについては、見慣れない方もいるかもしれませんが、IEを「X-UA-Compatible」で指定した互換性のあるモードで表示するための記述です。こちらにはIE=edgeと書かれていますが、EdgeはIEの中でも最新のため、古いIEを使っていた場合に「最新のバージョンで表示する」という指定になります。

IEはバージョンによって挙動が異なるため、古いバージョンで想定通りに動かないことがあり、こちらを回避するために「X-UA-Compatible」の設定が必要になるわけです。ただし、2021年5月19日にIEのサポート終了のお知らせが出たため、将来的にこちらの記述は必要なくなるかと思います。

「!!!」で文書型宣言のみを記述できます。

一般的なタグ

divタグは「.（ドット）」のみで展開できます。

クラスをつけたい場合はドットのあとにつけたいクラス名を記述します。
これはdivだけではなく全てのタグで利用できます。

idをつけたい場合は「#（シャープ）」のあとにつけたいid名を記述します。
こちらもクラスと同じく、全てのタグで利用できます。

クラスとidは併用できます。

入れ子にする「>」

入れ子（階層あり）で一気に指定できます。

入れ子はリストの作成に便利です。

このように、入れ子を重ねることも可能です。

複製する「*」

増やしたい要素のあとに「*（アスタリスク）」と増やしたい数を入力すると複製できます。

グルーピングする「（）」

括弧でくくると要素のまとまりを指定できます。

乗算は最後の要素にかかるので、括弧がないul>li>a*3になると、aタグが3つ作られてしまいます。
意図しないタグにならないよう、グルーピングには少し気を付けると良いです。

このように、リストの中にaタグを入れたものをいくつか作ることもできます。
入れ子や複製、グルーピングを駆使できると、とても便利になるかと思います。

テーブルも、このように短い記述で作れるのでかなり時短になるのではないでしょうか。
（といいつつも、セルの結合などを含む複雑なテーブルはTable Tag Generatorでも速いかと思います）

連番にする「$」

クラスなどを連番にできます。

$を増やすと桁数が増えます。

@（アットマーク）で数字の開始番号を指定することができます。

テキストを指定する「{}」

「{}（なみかっこ）」テキストを入力できます。

ちなみに、「lorem」でlorem ipsum（ダミーテキスト）を挿入することができます。

CSS

続いて、CSSです。
基本的にはプロパティの頭文字をつないでいくイメージですが、該当のプロパティが複数あるものはイレギュラーな指定になるので、よく使うものから覚えていきましょう。

padding「p」

上が展開前、下が展開後です。

paddingは「p」で指定できます。topやbottom、left、rightなどは単語の頭文字をつけると展開できます。
また、-（ハイフン）で繋げることでそれぞれのpaddingを指定できます。

margin「m」

marginは「m」で指定できます。
paddingと同様に-（ハイフン）で繋げることでそれぞれのmarginを指定できます。

単位のデフォルトの値は「px」になりますが、他の単位を使いたい場合は上記のように指定することができます。

position

positionプロパティはこのように記述できます。

display

displayプロパティはこのように記述できます。

font

フォントサイズの指定は「fz」と、これまでのルールと少し異なるので気を付けてください。

フォントウェイトはfwで指定ができます。

color

色の指定も可能です。

border

線の指定も簡単におこなえます。

important「!」

!important 指定も「!」のみでおこなえます。
importantと記述するの、地味に長い単語なので大変ですが、!マークのみで展開できるのはとても便利ですね。

繋げる「+」

今回紹介したCSS用のEmmetは、「+（プラス）」マークで繋げることができます。

実際に使ってみよう！Emmetクイズ

振り返りを兼ねて、クイズを作ってみました。
みなさんも、お手元にあるテキストエディタで挑戦してみてください！

HTML編

まずはHTMLの問題をつくってみました。
こちらのHTMLはどのようなEmmet記法で展開できるかわかりますか？

正解はこちらです。

CSS

続いてはCSSの問題です。
以下のCSSを展開するためには、どのようなEmmetの記述になるでしょうか？

正解はこちらです。

まとめ

Emmetの記述方法についてまとめましたが、使いこなせるようになれば時間を短縮できそうなことが伝わ
ったのではないでしょうか。
今回はよく使うタグを選んでまとめましたが、他にもいろんな指定がありますので、気になった方はチートシートも参考にしてみてください！
https://docs.emmet.io/cheat-sheet/