Emmetとは？
EmmetとはHTMLやCSSを省略記法で簡潔に記述するためのツールです。エディター向けのプラグインとして用意されています。使いこなせればマークアップの作業効率がぐんとあがります。
使い方
Emmetでは、省略記法で記述した後、ショートカットキー(基本的にはTabキー)を使ってHTMLやCSSのコードに変換します。Emmetではこのことを「展開」と言います。ショートカットキーはエディターによって異なりますが設定によって変更可能です。
いくつか紹介していきます。
要素ひとつを入力 [ 要素名 ]
記述
|
1 2 3 |
article |
展開
|
1 2 3 |
<article></article> |
要素をネストさせる場合 [ > ]
記述
|
1 2 3 |
article>section |
展開
|
1 2 3 4 5 |
<article> <section></section> </article> |
同じ要素を繰り返す [ * ]
記述
|
1 2 3 |
li*3 |
展開
|
1 2 3 4 5 6 7 |
<ul> <li> </li> <li> </li> <li> </li> </ul> |
HTMLのテンプレートを出力 [ ! ]
記述
|
1 2 3 |
! |
展開
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> |
id名をつける [ # ]
記述
|
1 2 3 |
div#legit |
展開
|
1 2 3 |
<div id="legit"> </div> |
class名をつける [ . ]
記述
|
1 2 3 |
div.legit |
展開
|
1 2 3 |
<div class="legit"></div> |
連番をつける [ $ ]
記述
|
1 2 3 |
li.legit$*5 |
展開
|
1 2 3 4 5 6 7 8 9 |
<ul> <li class="legit1"> </li> <li class="legit2"> </li> <li class="legit3"> </li> <li class="legit4"> </li> <li class="legit5"> </li> </ul> |
対応ツール
下記ダウンロードページを見ていただくと主要なエディターでは大体使えます。
ダウンロードページ : http://emmet.io/download/
Visual Studio Code
Adobe Dreamweaver
Brackets
Atom
vim 等
まとめ
いかがだったでしょうか。 意外と簡単に覚えられるかと思います。 慣れてしまえばコーディングがどんどん早くなりますよ。
この記事を書いた人
だいちゃんdaichan
コーダー。趣味は音楽、旅行、DIY、ゲーム。
WEB制作
ランキング
制作実績
