【神速効率コーディング】VSCodeのEmmet（デフォルト設定）～最低限おさえたいテクニック12選【HTML&CSS】

Visual Studio Code（VSCode）を使ってコーディングしている方は非常に多いのではないでしょうか。無料で多機能なVScodeですが、使い方に工夫をするとさらに効率的なコーディングが出来、時間を有効に使うことが可能です。

今回はHTMLファイルにおけるVSCodeの便利な使い方をご紹介します。いきなりすべて覚えようとしてはいけません。東京都の位置を知らない人が47都道府県の位置を全部正確に答えられることなどまずありませんから。身の回りのことから少しずつ習得していけるように記事をまとめましたので、コーディング初心者のかたでも「へぇーなるほど」と思っていただけると考えています。

ちなみに関連記事として『DreamweaverでEmmetを使って光速コーディング【設定・プラグイン不要】』もありますので、DreamweaverでEmmetを使いたい方はご参考にしてみてください。

Emmetとは何か？
1. HTML5のフォーマットを一発記述法
2. <ul>や<ol>の記述が面倒なので速くしたい場合の記法
3. <dt>タグの中に<dt><dd>を書くのがめんどくさい場合の記法
4. クラスやIDを付与した状態で要素を書きたい場合の記法
5. <img>にsrcとaltと書くのが億劫なときの記法
6. 要素に連番のクラスを付けたいときの記法
7. 要素の間にテキストを入れておきたい場合の記法
【CSS】8. mediaクエリを書くのが面倒な場合の記法
【CSS】9. keyframeのテンプレートを書くのが面倒くさい場合の記法
【CSS】10. margin, paddingを高速に書く記述法
【CSS】11. display系を高速に書く記述法
【CSS】12. もはや一行一行が出力するのが面倒なときの記述法
まとめ

Emmetとは何か？

Emmet（エメット）は、HTMLやCSSなどのコーディングを効率化するための「書き方補完機能」です。VSCodeにはデフォルトでEmmetが組み込まれており、HTMLやCSSなどのコードをより迅速かつ簡単に書くことができます。

たとえばVSCodeでHTMLファイルを開き、下記のように<body>～</body>にキーボードで入力してみます。

ul>li*3>a

重要）コピペではダメです。先頭のuから自身の手で入力すると候補が出てくるのでそのまま打ち込みます。
もしくは、コピペして最後の文字だけ自分で打ち込んでください。

入力中に「u」や「ul」のタグの候補（サジェスト）が出てきますが、無視して「>」や「*」も入力して、最後にEnterキーを押します。すると、

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

このように展開されるはずです。これがEmmetの基本的な動作になります。「>」「*」「.」「#」などを組み合わせてセレクタを指定し、それをHTMLのDOMとして記述する表記補完がEmmetだと考えてOKです。

1. HTML5のフォーマットを一発記述法

空のファイルに<html><head>......</body></html>という大枠のDOM構造を手入力しているなんて方はいないと思います。どこぞのサイトに書かれているソースをコピペしている方はいるかもしれませんね。

そんな煩わしいことをしなくてもVSCodeのEmmetがあれば一瞬で終わります。次のコマンドをまっさらなHTMLファイルにタイプしてみてください。

html:5

このように入力し最後にEnterキーを押すと瞬時にHTML5の大枠のDOMが書き出されます。入力中にサジェストが出るので選択してEnterやクリックでも同様の結果になります。どちらでも好きな方を使ってください。

2. <ul>や<ol>の記述が面倒なので速くしたい場合の記法

これは、最初のEmmetとは何かでやってしまいましたが、<ul><li>......</li></ul>を手打ちでやる必要はありません。

ul>li*3

ol>li*8

たったこれだけです。「*3」や「*8」は「×（かける）」を意味しています。必要な<li>の個数を「*」の後ろに数字で入力するとその数の分だけ<li>が入ります。

3. <dt>タグの中に<dt><dd>を書くのがめんどくさい場合の記法

これHTMLコーディングあるあるですが、<dt>の下に<dt>と<dd>書くの手間じゃないですか？特に<dd>が何個か複数ある場合はこれまた面倒です。

ですが、Emmetを使えば一行書くだけで一瞬で展開されてしまうのです。

dl>dt+dd*2

なんとこれだけで

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

と記述されてしまうんですね。本当に便利になりました。インターネット黎明期にはメモ帳で手打ちするのがかっこいいような風潮がありましたが、このEmmetで記述した方が数倍かっこいいですね。

今回は「+」が出てきました。「+」はCSSが分かっている方はすぐ理解出来るかと思いますが、兄弟要素を表しています。dtの隣にdd*2だよ、ということですね。

ちなみにdtとddの順序を入れ替えてしまうと

<dl>
    <dd></dd> <!-- ←ddが先に来てしまう -->
    <dt></dt>
</dl>

となるので必ずdl>dtのようにdtから指定してください。

4. クラスやIDを付与した状態で要素を書きたい場合の記法

<div>や<span>などにクラスを付ける場合は、<div>を書いてからキャレットを移動してclass="nantoka"って書くと面倒ですよね。これを効率的に1行で書けてしまうのがEmmetの便利なところです。

div.nantoka

と要素の後に「.（ドット）」を入れると下記のように展開されます。

<div class="nantoka"></div>

クラスではなくIdを付与したいときは「#」を使えばOKです。

div#nantoka

5. <img>にsrcとaltと書くのが億劫なときの記法

ここまで来たらもうお察しかと思いますが、

img

と入力してEnterキーを押せば

<img src="" alt="">

と記載されます。そのうえ、srcの中までカーソルが移動してくれるので画像を入れるときは爆速になります。Tabキーを押せばaltの中にカーソルを移動することも可能です。

6. 要素に連番のクラスを付けたいときの記法

たとえばよくJavaScript絡みの時にJS用のクラスを連番で付けることがあります（data-属性でも代用しますが）。その際、HTMLの要素に連番でクラスを付与したい場合が考えられます。

<div class="js-item-1"></div>
<div class="js-item-2"></div>
<div class="js-item-3"></div>

上記のようにjs-item-1～js-item-3までのクラスを<div>に付けたい時、これも意外と手間がかかります。そこで、Emmetの出番です。下記のように1行書くだけであっというまに展開してくれます。

div.js-item-$*3

最後にEnterキーは忘れずに必ず押してくださいね。
このEmmetでは「$（ドルマーク）」が出現します。このドルマークを置くことで１～順に連番を振ってくれるようになります。「*3」は言わなくてもわかりますが、3つ要素を書き出すという指示ですね。

ちなみにこの$マークは正規表現をご存知であればすんなり理解できるかと思います。正規表現での置換の際には$1, $2, $3 …… のような使い方をしますね。それとかなりいているかと思います。（似て結構非ではありますが……）考え方の根本は似通っている、としておきましょう（汗

7. 要素の間にテキストを入れておきたい場合の記法

これ、意外と便利なのですが、コーディング中にダミーの文言とか入れておくことはよくやりますね。<div>ダミーですダミーです</div>的な感じでレイアウトの確認に使います。

これもEmmetを使えば1行でパッと記述することが出来てしまいます。

p{ダミーです}

こうすると

<p>ダミーです</p>

「{}（中括弧）」で囲むことでその要素の中のテキストや数値を自動で挟みつつ、DOMが出力されます。非常に便利です。

ちなみにちょっと不格好であありますが「ダミーです」を8回繰り返して要素の中に入れたい場合は、

p>{damidesu}*8

のようにpの直後に子要素を示す「>」を入れてあげると下記のようになります。

<p>
    damidesu
    damidesu
    damidesu
    damidesu
    damidesu
    damidesu
    damidesu
    damidesu
</p>

このやり方だと、改行コードやインデントタブが混在するため、表示に影響が出る可能性もあるので注意してください。もし不要な隙間が出来たりした場合は、改行とインデントを消して完全な1行にまとめてみてください。（環境によるので必ずしも不具合になるということではありません）

【CSS】8. mediaクエリを書くのが面倒な場合の記法

レスポンシブサイトのCSSのスクリプティングで1，2を争う非効率なことは、@media......の記述を手打ちで記入することでしょう。この@mediaは意外と文章的に長く、素早くタイピングしても結構面倒な場合が多いです。

このEmmetのショートハンドで出力して、整形したmediaクエリをスニペットに登録しておくと最高です。業務のスピードが段違いに速くなります。

@m

こう記述し、Enterキーを押すと、

@media screen {
    
}

と出力されます。ただ、これでは業務上使い物にならないので(max-width: 480px)等の記述を足したものをスニペット登録しておくのが一般的です。ちなみにEmmetでは(max-width: 480px)まで出力することが出来ない模様です。（他の方のブログや海外サイト確認済）

【CSS】9. keyframeのテンプレートを書くのが面倒くさい場合の記法

アニメーションをCSSで行う場合、@keyframeの記載が必要になる場合があります。この、

@keyframes identifier {
    
}

を出力するには、

@kf

とします。ただし、2023年5月現時点のVSCodeのデフォルトEmmetではfrom, toのプロパティや、接頭辞付きの@keyframeは出力されないようです。別途設定が必要なのかもしれません。

【CSS】10. margin, paddingを高速に書く記述法

margin, paddingは性質が似通っているので記述法もほぼ同じです。marginは「m」、paddingは「p」を先頭に付けます。

m10
p10

とすれば下記のように出力されます。

margin: 10px;
padding: 10px;

このm, pには注意点があって、１つは、.anyClass {......}のようなクラスの内側（{}内）に書かないと出力されません。もう１つは単位を省略すると自動的にpx指定されます。

ですので、%, em, rem, を単位に指定したい場合は下記のように末尾で指定します。

m10%
m10e
m10r

margin: 10%;
margin: 10em;
margin: 10rem;

上から順に「%」「em」「rem」と出力されることが分かります。

また、「m」の次に「l」「t」「r」「b」を追加するとそれぞれ下記のような出力になります。

margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;

念のため入力した文字列は

ml10
mt10
mr10
mb10

であることを付け加えておきます。

【CSS】11. display系を高速に書く記述法

もう察しの良いみなさんなら大体推察できるかと思います。

db
dib
df

これらの出力結果はわかりますね。

display: block;
display: inline-block;
display: flex;

【CSS】12. もはや一行一行が出力するのが面倒なときの記述法

dl10, pt20, dib……など1行ずつEnterキーをおしているのも面倒だという究極的なめんどくさがりさんには連結記述法がおすすめです。

mt0.5e+mr1e+mb0.5e+ml1e+dib

各指定の間に「+（半角プラス）」を挟むことで、1発のEnterキーで複数行の出力が出来ます。

margin-top: 0.5em;
margin-right: 1em;
margin-bottom: 0.5em;
margin-left: 1em;
display: inline-block;

一度クセになると抜けられなくなりますね。

まとめ

まだまだ便利な応用術がありますが、まずはこれらから習得するべきです。Emmetは色々な組み合わせが出来ますから、基本を押えておけば上記を組み合わせてより高度なコーディングが一瞬で完了してしまうのが最大の魅力です。

VSCodeを使っているのであればEmmetは必ず使うクセを付けておくことをおすすめします。