Emmetとは？

EmmetとはHTMLやCSSを省略記法で簡潔に記述するためのツールです。エディター向けのプラグインとして用意されています。使いこなせればマークアップの作業効率がぐんとあがります。

使い方

Emmetでは、省略記法で記述した後、ショートカットキー(基本的にはTabキー)を使ってHTMLやCSSのコードに変換します。Emmetではこのことを「展開」と言います。ショートカットキーはエディターによって異なりますが設定によって変更可能です。

いくつか紹介していきます。

要素ひとつを入力 [ 要素名 ]

記述

article

展開

要素をネストさせる場合 [ > ]

記述

article>section

展開

同じ要素を繰り返す [ * ]

記述

li*3

展開

HTMLのテンプレートを出力 [ ! ]

記述

!

展開

id名をつける [ # ]

記述

div#legit

展開

class名をつける [ . ]

記述

div.legit

展開

連番をつける [ $ ]

記述

li.legit$*5

展開

対応ツール

下記ダウンロードページを見ていただくと主要なエディターでは大体使えます。

ダウンロードページ : http://emmet.io/download/

Visual Studio Code
Adobe Dreamweaver
Brackets
Atom
vim 等

まとめ

いかがだったでしょうか。 意外と簡単に覚えられるかと思います。 慣れてしまえばコーディングがどんどん早くなりますよ。