Emmetで爆速コーディングを始めよう！- HTML編
前回はEmmetの導入部分までをやりました。テキストエディタは決まりましたでしょうか？今回からが本番、速くコードを書くための省略記法を説明していきます。内容盛りだくさんですが、基本を押さえながら実際に書いていくのが覚える近道です。さっと目を通してゴリゴリとコードを書いていきましょう。
Emmetの基本的な使い方
前回ちらっと書きましたが、Emmetの省略記法を入力して、行末でCtrl+EまたはTabを押せば、カーソル以前のコードが展開されます。
もしかしたらエディタによって他のショートカットキーである可能性があるので、「展開されないんですけれど…」ということであれば、お使いのエディタでのEmmetのショートカット設定をご確認されることをお勧めします。
Emmetで書くHTML
押さえておきたい省略記法は以下のとおりです。
| 記号 | 役割 | 凡例 |
| # | ID名の指定 | div#id_name |
| . | クラス名の指定 | div.class_name |
| > | 入れ子の作成 | div>p |
| * | 要素を複数展開 | li*3 |
| + | 同階層に要素を展開 | div+p |
| {} | テキストの挿入 | p{Text} |
| $ | 連番をつける | li.item_$*4 |
Emmetの特徴としては、タグの<>が要らないことです。
一つ一つ見ていきましょう。
1.要素
1 2 3 4 | p <!-- 以下展開 --> <p></p> |
要素名を入力して展開のショートカットキーを押すだけで一度に展開されます。
便利なのは、展開後にカーソル位置がタグ内に来ることですね。
imgタグにalt属性がついたり、aタグにhref属性がついたりと、よく使われる属性が自動でつくこともあります。
自分で属性を付ける時には以下のようにタグの省略記法の後に[]（大かっこ）を追加をします。
1 2 3 4 5 6 7 8 | a[target=_blank] input[name=""] <!-- 以下展開 --> <a href="" target="_blank"></a> <input type="text" name=""> |
このように[]（大かっこ）を使います。metaタグに使うのは微妙なところですが、使えないことはないです（キーボート打数はあまり変わらないですね）。
2.ID名・class名の指定
cssを書いている方であれば、これは難なく理解できると思います。
ID名を指定した場合は#、クラス名を指定した場合であれば.を名前の前につけるのと同様です。
1 2 3 4 5 6 7 8 9 10 11 12 | #header img.hoge section#fuga.wow <!-- 以下展開 --> <div id="header"></div> <img src="" alt="" class="hoge"> <section id="fuga" class="wow"></section> |
ちなみに、要素名を書かずにいきなりID名やクラス名を書いて展開すると<div id=”hoge”></div>などと補完してくれます。
要素を入れ子にする
次の要素の複数展開とあわせて最もHTMLではよく使い、Emmetの恩恵を感じる機能です。無限（？）に入れ子構造にできます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #item>p.hoge ul>.test>a.fuga <!-- 以下展開 --> <div id="item"> <p class="hoge"></p> </div> <ul> <li class="test"> <a href="" class="fuga"></a> </li> </ul> |
<ul> や<ol> の入れ子である<li> が省略できたり、その他<p> の下層にくる<span> 、<table> の入れ子にできる<tr> や<td> なども省略可能です。
要素を複数展開
いちいちコピペしなくてもいいですね。これも無限（？試したことないんです…）に展開できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | p.dummy>lorem*3 ul#nav>.item*4>a.hogehoge[target="_blank"] <!-- 以下展開 --> <p class="dummy"> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, facere, saepe, ipsam ex eius qui vel dolorum explicabo eligendi dolorem accusantium amet magnam vero temporibus harum molestias at earum blanditiis!</span> <span>Tenetur, voluptatibus, aliquam, earum magnam deserunt ea iure praesentium nostrum ratione provident repellat tempora facere officia saepe sapiente architecto minima quis rem! Amet, error quam vitae dolores ea fugit facilis.</span> <span>Eum, deleniti, eaque, quas, sequi eius omnis sit illum esse nisi quos dolor laborum voluptas fuga architecto molestias officiis assumenda eos qui rem odit amet aperiam quae nobis quidem ipsa?</span> </p> <ul id="nav"> <li class="item"><a href="" class="hogehoge" target="_blank"></a></li> <li class="item"><a href="" class="hogehoge" target="_blank"></a></li> <li class="item"><a href="" class="hogehoge" target="_blank"></a></li> <li class="item"><a href="" class="hogehoge" target="_blank"></a></li> </ul> |
loremというのがでてきましたね。これはダミーテキストです。行ごとに違う意味のない文章が展開されていきます。とりあえず文書構造だけ作っておいて、後で別に作った原稿を流し込む時などに使います。
また、たまに*の位置を間違えて展開して「ありゃりゃ(^^;)」なんてこともあるかもしれませんが、Undo（Ctrl+Zまたは⌘+Z）してすぐ戻せますし問題なしですねd(^-^)
要素を同階層に展開する
入れ子ではなく、同じ階層に並べる時に+を使います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | #caption>img+p #wrapper>(header>ul#nav>.item*4>a)+footer>p <!-- 以下展開 --> <div id="caption"> <img src="" alt=""> <p></p> </div> <div id="wrapper"> <header> <ul id="nav"> <li class="item"><a href=""></a></li> <li class="item"><a href=""></a></li> <li class="item"><a href=""></a></li> <li class="item"><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div> |
（）を使うと、グループ化できることも覚えておくといいかもしれません。
もう一つ、<table>, <dl>, <ol>・<ul>, <map> などはスニペットとして要素名の後ろに+を追加して展開するだけで、下層も一緒に展開されます。
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 27 | table+ dl+ ul+ map+ <!-- 以下展開 --> <table> <tr> <td></td> </tr> </table> <dl> <dt></dt> <dd></dd> </dl> <ul> <li></li> </ul> <map name=""> <area shape="" coords="" href="" alt=""> </map> |
…mapって最近使わないですね…資格を取る時に苦戦して以来、自分で書いてなかったです。
テキストの挿入
要素名の後に{}（中かっこ）で囲ったテキストがタグの中に入ります。
1 2 3 4 5 | h1{タイトル名} <!-- 以下展開 --> <h1>タイトル名</h1> |
先ほど使ったloremは入れ子でOKです。.content>p>loremといったような感じです。
連番を付ける
要素を複数展開する時に、$と一緒に使うと連番をつけられます。
1 2 3 4 5 6 7 8 9 10 11 | nav>ul>.item_$*4>a[target=_blank]{item_$} <!-- 以下展開 --> <nav> <ul> <li class="item_1"><a href="" target="_blank">item_1</a></li> <li class="item_2"><a href="" target="_blank">item_2</a></li> <li class="item_3"><a href="" target="_blank">item_3</a></li> <li class="item_4"><a href="" target="_blank">item_4</a></li> </ul> </nav> |
おまけ
HTMLの雛形もどこかに雛形ファイルを置いといて、コピペ…なんてことをしなくてもいいのです（特殊な雛形以外は…）。
空のindex.htmlを作成して、！を入力して展開すれば、あっという間です。
1 2 3 4 5 6 7 8 9 10 11 12 13 | ! <!-- 以下展開 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> |
最低限の雛形は一発です。ただし、<html> 内のlangを「ja」に変えたいですね。
思ったよりもサクサクと行けましたでしょうか？HTMLで使うEmmetの基本的な形は以上になります。お疲れさまでした。
お次はCSS編です。
Emmetの本領はCSSにあるといっても言い過ぎではないですし、基本形を学べば一気にコーディングが楽になります。
私も次を書くのが楽しみです。ねこま（@necomacustom）でした。