Emmetとは？
HTMLやCSSの記述をサポートしてくるプラグインのことです。
もともとは「Zen-Coding」という名称だったのをご存知の方もいらっしゃるかと思います。
2012年9月ごろから「Emmet」に変更され、独自の省略記法によるコーディングの高速化を目指し日々開発が進められています。
目次
省略記法ってどんなもの？
Emmet HTML基本的な書き方まとめ
本当にコーディングが早くなるのか?
Emmet CSSの記述まとめ
Emmet 導入方法
Emmet CSSプロパティ省略パターン一覧（別記事）
まとめ
省略記法ってどんなもの？
下記のように記述しtabキーで展開することで、一瞬で記述することが可能です。
※tabキーで展開できるかどうかはエディターやOSによって異なる可能性があります。
.container>ul>li>a{アンカーテキスト}
<div class="container">
<ul>
<li><a href="">アンカーテキスト</a></li>
</ul>
</div>
Emmet HTML基本的な書き方まとめ
基本的な記述方法
１つだけ
展開前
div
展開後
<div></div>
ネストされた要素
展開前
p>a
展開後
<p><a href=""></a></p>
同じ要素を繰り返す
展開前
p*3
展開後
<p></p>
<p></p>
<p></p>
繰り返す&ネストさせる
展開前
p*3>a
展開後
<p><a href=""></a></p>
<p><a href=""></a></p>
<p><a href=""></a></p>
兄弟要素にする
展開前
p+p
展開後
<p></p>
<p></p>
1つ上の階層にタグを展開する
続けて入力する際に、ひとつ上の階層に戻りたい場合は「^」の記号を使うことで実現できます。
展開前
div>h1+p^ul>li*3
<div>
<h1></h1>
<p></p>
</div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
グループ化する
展開前
(ul>li)*3
展開後
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
id、class、属性をつける、テキストを挿入する
展開前
p#hoge
p.hoge
img[alt=hoge]
p{ここにテキストを入れる}
展開後
<p id="hoge"></p>
<p class="hoge"></p>
<img src="" alt="hoge">
<p>ここにテキストを入れる</p>
知っておくべき便利な仕様
- 任意の「id」や「class」を付与するとき指定しないとdivタグとして生成されます。
- 「id」や「class」を付与するときは「"（ダブルクォーテーション）」はつけなくでいい。
- 連番で名前をつけたいときは「$」を使用する。
1. #hoge
<div id="hoge"></div>
2. p[class=hoge]
<p class="hoge"></p>
3. ul>(li[class=hoge$]>a{アンカーテキスト$})*
<ul>
<li class="hoge1"><a href="">アンカーテキスト1</a></li>
<li class="hoge2"><a href="">アンカーテキスト2</a></li>
<li class="hoge3"><a href="">アンカーテキスト3</a></li>
<li class="hoge4"><a href="">アンカーテキスト4</a></li>
<li class="hoge5"><a href="">アンカーテキスト5</a></li>
</ul>
本当にコーディングが早くなるのか？
使い所ではないかなと思います。
複雑な構造のものをマークアップするときは全ての要素をEmmet用の記述を考えるよりも、一部要素はEmmetでそれ以外はエディタの補完機能を使うなど組み合わせて使えることがコツかと思います。
「記述方法を覚えないといけないから面倒」「覚えても使えるときは少ない」
と感じる人は少なからずいると思います。
なのでライトなものから覚えていくのがいいと多います。
EmmetはHTMLで利用するイメージが強いと思いますが、実はCSSでも利用することができます。
例えば、paddingやmarginは仕様頻度が高いプロパティかと思います。
コンテンツを真ん中に寄せる時に使用するwidthの指定とmarginの指定は
.container {
width: 960px;
margin: 0 auto;
border: 1px solid #fff;
}
と記述すると思いますが、これをEmmetの記述方法で書くと
w960+m0-a+bd1-solid-#f
複数のプロパティを一気に記述したい場合は「+（プラス）」で繋ぐことで実現できます。
ここで使用した記述（省略文字）は以下の通りです。
| 省略文字 | プロパティ |
|---|---|
| w | width |
| m | margin |
| bd | border |
さらに詳しく解説すると
プロパティとプロパティは「+（プラス）」で繋ぐ、marginのようにまとめて値を指定したい場合は値を「-（ハイフン）」で繋ぐことで上記の記述が実現可能です。
カラーコードは「#fff」のように3つの文字で表せるものに関しては「#f」で表現することが可能です。
また、「#efefef」のような２文字ずつ並んだカラーコードは「#ef」と書いて展開します。
Emmet CSSの記述まとめ
単位
単位を指定しないとデフォルトの値は「px」になります。
それぞれの単位の指定の仕方は以下の通りです。
展開前
w50+h80p+m50e+p50r
展開後
width: 50px;
height: 80%;
margin: 50em;
padding: 50rem;
ベンダープレフィックスの指定
ベンダープレフィックスのも「-（ハイフン）」を先頭につけることで簡単に付与することができます。
展開前
-bd3-solid-#cd
展開後
-webkit-border: 3px solid #cdcdcd;
-moz-border: 3px solid #cdcdcd;
-ms-border: 3px solid #cdcdcd;
-o-border: 3px solid #cdcdcd;
border: 3px solid #cdcdcd;
「!important」をつけたい！
展開前
m10!
展開後
margin: 10px !important;
「+（プラス）」をつけることで一部プロパティを展開することができる
展開前
b+
bd+
展開後
background: #fff url() 0 0 no-repeat;
border: 1px solid #000;
Emmet 導入方法
Atomでの導入方法
Atomを起動し、環境設定を開きます。（Macショートカットキー ⌘ + ,）
インストール＞「emmet」で検索し、「Install」をクリックします。
Sublime Textでの導入方法
環境設定からPackage Controlを選択します。
そのあとemmetと入力してでてきたプラグインをインストールします。
VSCode （Visual Studio Code）での導入方法
VSCodeでは、プラグインのインストールは必要ありません。
.htmlファイルを作成すると、HTMLのEmmetの記法が使用できます。
まとめ
Emmetの公式リファレンスもあるので、ある程度理解されている方はこちらからでもいいと思います。
さらに詳しく見たい人は、チートシートも公開されているので是非参考にしてください。
Emmet公式リファレンス
Emmetチートシート
個人的にCSSで使える省略パターンをまとめて見たので「ちょっと使ってみたいなー」ぐらいの方にはオススメします。
Emmet CSSプロパティ省略パターン一覧（別記事）