HTMLやCSSを用いたコーディングに慣れてくると、毎回ソースコードをすべて手打ちするのが手間になってくる瞬間が訪れるかと思います。例えば、テーブルのHTMLを書きたいとき、見出しまで到達するのに
1 | <table><tbody><tr><th>… |
という記述をしないといけません。ひとつずつ手打ちするのもいいんだけれど、毎回書くのは面倒だな…、というときに便利なものが「Emmet（エメット）」です。
Emmetとは、HTML、CSSなどの入力を補助する拡張機能（プラグイン）のこと。ショートカットキーとTabキーでタグを展開できるので、入力する手間と時間を減らしてくれる大変便利なものとなっています。
たとえば、先ほどのテーブルを作りたいというとき、
1 | table(tr>th*3)+(tr>td*3) |
と入力し、タブ（Tab）キーを押すと
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をつけたい、というとき、
1 | m10-20 |
と入力し、タブキーを押すだけで
1 | margin: 10px 20px; |
というソースに変換されます。とても便利ですよね！
HTMLはCSSのセレクタのような書き方、CSSは頭文字をつないでいくイメージと捉えたらイメージしやすいかなと思います。Emmetを活用できるようになれば、かなりの時短・労力の削減になると思うので、ぜひ今日から使ってみてはいかがでしょうか。
Emmetに対応しているかは、エディタによります。対応しているものは以下です。
| Visual Studio Code | デフォルトで入っています |
|---|---|
| Dreamweaver | デフォルトで入っていますが、Tabキーで展開するには「環境設定」→「コードフォーマット」の「Tabキーを使用して略語を展開」にチェックを入れる必要があります |
| Sublime Text | 利用可能（プラグイン追加） |
| Atom | 利用可能（プラグイン追加） |
| Brackets | 利用可能（プラグイン追加） |
利用しているテキストエディタに応じてEmmetの導入方法は異なります。ぜひ調べてみてください。
それでは、HTMLとCSSのEmmet記述について紹介していきます。
目次
HTML
まずはHTMLです。
HTMLの雛形「!」
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //展開前 ! //展開後 <!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> |
「!（エクスクラメーションマーク）」ひとつでHTMLの雛型を展開できます。ひとつの記号でここまで記述を省略できるのか、と驚きましたか？ この時点でEmmetの良さが伝わったのではないでしょうか。
途中にあるについては、見慣れない方もいるかもしれませんが、IEを「X-UA-Compatible」で指定した互換性のあるモードで表示するための記述です。こちらにはIE=edgeと書かれていますが、EdgeはIEの中でも最新のため、古いIEを使っていた場合に「最新のバージョンで表示する」という指定になります。
IEはバージョンによって挙動が異なるため、古いバージョンで想定通りに動かないことがあり、こちらを回避するために「X-UA-Compatible」の設定が必要になるわけです。ただし、2021年5月19日にIEのサポート終了のお知らせが出たため、将来的にこちらの記述は必要なくなるかと思います。
1 2 3 4 5 6 7 | //展開前 !!! //展開後 <!DOCTYPE html> |
「!!!」で文書型宣言のみを記述できます。
一般的なタグ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | //展開前 . //展開後 <div class=""></div> //展開前 p //展開後 <p></p> //展開前 a //展開後 <a href=""></a> |
divタグは「.（ドット）」のみで展開できます。
1 2 3 4 5 6 7 | //展開前 .box //展開後 <div class="box"></div> |
クラスをつけたい場合はドットのあとにつけたいクラス名を記述します。
これはdivだけではなく全てのタグで利用できます。
1 2 3 4 5 6 7 | //展開前 p#pagetop //展開後 <p id="pagetop"></p> |
idをつけたい場合は「#（シャープ）」のあとにつけたいid名を記述します。
こちらもクラスと同じく、全てのタグで利用できます。
1 2 3 4 5 6 7 | //展開前 .#wrapper.top //展開後 <div class="top" id="wrapper"></div> |
クラスとidは併用できます。
入れ子にする「>」
1 2 3 4 5 6 7 8 9 | //展開前 .>p //展開後 <div class=""> <p></p> </div> |
入れ子（階層あり）で一気に指定できます。
1 2 3 4 5 6 7 8 9 | //展開前 ul>li //展開後 <ul> <li></li> </ul> |
入れ子はリストの作成に便利です。
1 2 3 4 5 6 7 8 9 | //展開前 ul>li>a>span //展開後 <ul> <li><a href=""><span></span></a></li> </ul> |
このように、入れ子を重ねることも可能です。
複製する「*」
1 2 3 4 5 6 7 8 9 10 11 | //展開前 ul>li*3 //展開後 <ul> <li></li> <li></li> <li></li> </ul> |
増やしたい要素のあとに「*（アスタリスク）」と増やしたい数を入力すると複製できます。
グルーピングする「（）」
1 2 3 4 5 6 7 8 9 10 11 | //展開前 ul>(li>a)*3 //展開後 <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> |
括弧でくくると要素のまとまりを指定できます。
1 2 3 4 5 6 7 8 9 | //展開前 ul>li>a*3 //展開後 <ul> <li><a href=""></a><a href=""></a><a href=""></a></li> </ul> |
乗算は最後の要素にかかるので、括弧がないul>li>a*3になると、aタグが3つ作られてしまいます。
意図しないタグにならないよう、グルーピングには少し気を付けると良いです。
1 2 3 4 5 6 7 8 9 10 11 | //展開前 ul>(li>a.link)*3 //展開後 <ul> <li><a href="" class="link"></a></li> <li><a href="" class="link"></a></li> <li><a href="" class="link"></a></li> </ul> |
このように、リストの中にaタグを入れたものをいくつか作ることもできます。
入れ子や複製、グルーピングを駆使できると、とても便利になるかと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //展開前 table>(tr>th*3)+(tr>td*3) //展開後 <table> <tr> <th></th> <th></th> <th></th> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> |
テーブルも、このように短い記述で作れるのでかなり時短になるのではないでしょうか。
（といいつつも、セルの結合などを含む複雑なテーブルはTable Tag Generatorでも速いかと思います）
連番にする「$」
1 2 3 4 5 6 7 8 9 | //展開前 .num$*3 //展開前 <div class="num1"></div> <div class="num2"></div> <div class="num3"></div> |
クラスなどを連番にできます。
1 2 3 4 5 6 7 8 9 | //展開前 .num$$$*3 //展開前 <div class="num001"></div> <div class="num002"></div> <div class="num003"></div> |
$を増やすと桁数が増えます。
1 2 3 4 5 6 7 8 9 10 11 | //展開前 .num$@3*5 //展開前 <div class="num3"></div> <div class="num4"></div> <div class="num5"></div> <div class="num6"></div> <div class="num7"></div> |
@（アットマーク）で数字の開始番号を指定することができます。
テキストを指定する「{}」
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //展開前 .{テキスト} //展開後 <div class="">テキスト</div> //展開前 ul>(li>a{リンク})*3 //展開後 <ul> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> </ul> |
「{}（なみかっこ）」テキストを入力できます。
1 2 3 4 5 6 7 | //展開前 lorem //展開後 Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, impedit dolor eligendi, distinctio quaerat illo a laborum esse praesentium soluta minima ex quo temporibus aliquam expedita magni at harum fugit? |
ちなみに、「lorem」でlorem ipsum（ダミーテキスト）を挿入することができます。
CSS
続いて、CSSです。
基本的にはプロパティの頭文字をつないでいくイメージですが、該当のプロパティが複数あるものはイレギュラーな指定になるので、よく使うものから覚えていきましょう。
padding「p」
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | p padding: ; p10 padding: 10px; pt10 padding-top: 10px; pb10 padding-bottom: 10px; p10-20 padding: 10px 20px; |
上が展開前、下が展開後です。
paddingは「p」で指定できます。topやbottom、left、rightなどは単語の頭文字をつけると展開できます。
また、-（ハイフン）で繋げることでそれぞれのpaddingを指定できます。
margin「m」
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | m margin: ; m10 margin: 10px; mt10 margin-top: 10px; m10-20 margin: 10px 20px; m10-20-30-40 margin: 10px 20px 30px 40px; m:a //ma だと max-width になる margin: auto; |
marginは「m」で指定できます。
paddingと同様に-（ハイフン）で繋げることでそれぞれのmarginを指定できます。
1 2 3 4 5 6 7 8 9 10 | p50p padding: 50%; p50e padding: 50em; p50r padding: 50rem; |
単位のデフォルトの値は「px」になりますが、他の単位を使いたい場合は上記のように指定することができます。
position
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | r right: ; l left: ; t top: ; b bottom: ; po position: ; por position: relative; poa position: absolute; pof position: fixed; |
positionプロパティはこのように記述できます。
display
1 2 3 4 5 6 7 | db display: block; dib display: inline-block; |
displayプロパティはこのように記述できます。
font
1 2 3 4 | fz12 font-size: 12px; |
フォントサイズの指定は「fz」と、これまでのルールと少し異なるので気を付けてください。
1 2 3 4 5 6 7 | fw font-weight: ; fwb font-weight: bold; |
フォントウェイトはfwで指定ができます。
color
1 2 3 4 5 6 7 8 9 10 11 12 13 | c color: #000; c#fff color: #fff; bg background: #000; bg#fff background: #fff; |
色の指定も可能です。
border
1 2 3 4 5 6 7 | bd border: 1px solid #000; bdrs border-radius: ; |
線の指定も簡単におこなえます。
important「!」
1 2 3 4 | p10! padding: 10px !important; |
!important 指定も「!」のみでおこなえます。
importantと記述するの、地味に長い単語なので大変ですが、!マークのみで展開できるのはとても便利ですね。
繋げる「+」
1 2 3 4 5 6 7 8 9 10 | //展開前 w50+h80+m50+p20 //展開後 width: 50px; height: 80px; margin: 50px; padding: 20px; |
今回紹介したCSS用のEmmetは、「+（プラス）」マークで繋げることができます。
実際に使ってみよう！Emmetクイズ
振り返りを兼ねて、クイズを作ってみました。
みなさんも、お手元にあるテキストエディタで挑戦してみてください！
HTML編
まずはHTMLの問題をつくってみました。
こちらのHTMLはどのようなEmmet記法で展開できるかわかりますか？
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="box"> <p class="ttl">リンク</p> <ul> <li><a href="" class="link1"></a></li> <li><a href="" class="link2"></a></li> <li><a href="" class="link3"></a></li> <li><a href="" class="link4"></a></li> <li><a href="" class="link5"></a></li> </ul> </div> |
正解はこちらです。
1 2 3 | .box>p.ttl{リンク}+ul>(li>a.link$)*5 |
CSS
続いてはCSSの問題です。
以下のCSSを展開するためには、どのようなEmmetの記述になるでしょうか？
1 2 3 4 5 6 7 8 | display: block; width: 120px; font-size: 16px; font-weight: bold; color: #ddd; text-align: center; |
正解はこちらです。
1 2 3 4 5 6 7 8 9 10 11 | db w120 fz16 fwb c#ddd tac //1行で記述する場合 db+w120+fz16+fwb+c#ddd+tac |
まとめ
Emmetの記述方法についてまとめましたが、使いこなせるようになれば時間を短縮できそうなことが伝わ
ったのではないでしょうか。
今回はよく使うタグを選んでまとめましたが、他にもいろんな指定がありますので、気になった方はチートシートも参考にしてみてください！
https://docs.emmet.io/cheat-sheet/
