HTML/CSS入力を効率化する「Emmet」の基本とカスタマイズ術
Webサイト制作において、HTMLタグを一つひとつ手打ちしていませんか？<div class= "container ">…</div>と入力するのは、時間もかかるし、タイプミスの原因にもなります。
今回は、コーディングの速度を劇的に向上させる必須ツール「Emmet」について解説します。
さらに、VS Codeでの便利なカスタマイズ設定についても紹介しますので、ぜひ最後までご覧ください。
目次
Emmetとは？
Emmetとは、短い省略記法を入力しTabキーを押すことでHTML/CSSコードを展開してくれる機能です。
例えば、HTMLで「!」と入力し、Tabキーを押すことでHTMLの基本構造（htmlやhead、bodyタグなど）が一瞬で作成できます。
HTMLの基本：まずはこれだけ覚えよう
タグとクラス・ID
HTMLタグに加えて、CSSセレクタと同じ書き方をすることで、クラスやIDを指定ができます。
| 入力コード | 展開後のコード | 説明 |
div | <div></div> | タグのみ |
#container | <div id= "container "></div> | ID指定 |
.title | <div class= "title "></div> | クラス指定(タグ省略時はdivタグが使用される) |
p.text | <p class= "text "></p> | タグ + クラス |
親子関係と兄弟関係
要素の入れ子構造なども一行で書くことができます。
- 子要素（
>）：中に入れる- 入力：
ul>li
- 出力：
<ul><li></li></ul>
- 入力：
- 兄弟要素（
+）：並列に並べる- 入力：
p+span
- 出力：
<p></p><span></span>
- 入力：
- 組み合わせて使用も可能
- 入力：
tr>th+td
- 出力：
<tr><th></th><td></td></tr>
- 入力：
HTMLの応用：リストや連番を一瞬で作る
繰り返し（*）
同じタグを複数作成したい場合に使用します。
- 入力：
li*3 - 出力：
<li></li>
<li></li>
<li></li>
連番（$）
クラス名などに連番を振りたいときに使用します。
- 入力：
li.item-$*3 - 出力：
<li class="item-1"></li>
<li class="item-2"></li>
<li class="item-3"></li>
コンテンツの挿入（{}）
タグの中身（テキスト）を同時に指定できます。
- 入力：
a{詳しくはこちら} - 出力：
<a href="">詳しくはこちら</a>
CSS編：プロパティも爆速入力
EmmetはHTMLだけでなく、CSSでも威力を発揮します。基本的には「頭文字」を入力すると補完してくれます。
| 入力 | 展開後 | 説明 |
w100 | width: 100px; | 単位無しはpxになる |
m10 | margin: 10px; | |
df | display: flex; | |
aic | align-items: center; | |
bgc#333 | background-color: #333; | 色指定も可能 |
エディタ設定：Emmetをさらに使いやすくする
Emmetはデフォルトでも強力ですが、少し設定を変えるだけで開発環境に最適化できます。
Visual Studio Code（VS Code）の場合
VS Codeで最初にしておきたい設定は、HTMLの初期言語設定をen（英語）からja（日本語）に変えることです。
通常、!+Tabで展開すると<html lang="en">となり、毎回手動でjaに書き換える必要がありますが、設定でこれを自動化できます。
- 設定画面を開く（
Ctrl+,） - 検索バーに「emmet variables」と入力
- Emmet: Variablesの項目にある「項目の追加」をクリック
- 以下のように入力してOKを押す
- 項目:
lang
- 値:
ja
- 項目:
これで次回から、!を展開した際に、自動的に<html lang="ja">と出力されるようになります。
実践：ナビゲーションバーを作ってみよう
これらを組み合わせると、一般的なナビゲーションメニューも1行で書くことができます。
入力するショートカット：nav>ul.menu>li*4>a{メニュー$}
展開結果：
<nav>
<ul class="menu">
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
<li><a href="">メニュー3</a></li>
<li><a href="">メニュー4</a></li>
</ul>
</nav>
手打ちすると30秒以上かかるコードが、わずか数秒で完成します。
まとめ
Emmetは、最初は記法を覚える必要がありますが、一度手になじむと「これなしではコーディングできない」と感じるほど強力なツールです。
まずは、簡単なクラス指定や繰り返し記法から使い始めて、徐々に自分のエディタ設定をカスタマイズしてみてください。
参考文献
https://docs.emmet.io/cheat-sheet/
https://code.visualstudio.com/docs/languages/emmet
