コーディングを驚くほど速く！EmmetのHTML6選＋CSS7選の効率化テクニック

コーディングのスピードを上げたい、効率よくHTMLやCSSを書きたい、そんな時に役立つのがEmmetです。Emmetは、ほんの数文字を入力するだけで、長いコードを瞬時に展開してくれる優れたツールで、特にフロントエンド開発者にとってはなくてはならない存在になっています。

最近のフロントエンド開発では、Visual Studio Code（VS Code）が最も広く使われています。そして、VS Codeには最初からEmmetが標準で組み込まれているため、特別な設定をしなくてもすぐに使うことができます。

この記事では、VS Codeを前提にしてEmmetの活用例を紹介していきます。ただし、Emmetは他の多くのエディタでもデフォルトで使えたり、拡張パッケージをインストールして利用することができるので、VS Code以外を使っている方も、参考にしてみてください。

みなと

Emmetには、コーディングを効率化する多くの記述方法がありますが、今回はその中から、私が実務で特に役立っているものを中心に、厳選して紹介していきます！

Emmetとは？

Emmet（エメット）は、HTMLやCSSのコードを効率的に書けるようにするツールです。いろんなショートカットや展開機能があり、コーディングのスピードをぐっと上げてくれます。

Emmetを使えば、最小限のキー入力でHTMLタグを入力できたり、CSSのプロパティや値を簡単に展開できたりします。毎回手作業でコードを書く手間が省けるので、短時間で効率よくコーディングが進められるようになります。

言葉で説明するよりも、実際に見てもらったほうが分かりやすいと思います。そこで、HTMLとCSSでEmmetをどのように使うのかを、以下で実際にお見せします。

HTMLの入力

CSSの入力

コードを書く手間を大幅に省いてくれるので、操作がかなりスムーズになるのがよくわかるかと思います。

みなと

慣れてしまうと、「Emmetなしのコーディングは考えられない」と感じるほどです！

Emmetの活用例：HTML編

Emmetは、HTMLとCSSの両方で活用できる便利なツールですが、まずはHTMLで使える機能にフォーカスして紹介します。VS Codeの環境で日々の作業を効率化するための、具体例を見ていきましょう。

例1：要素名で要素の展開

HTMLで要素を手動で入力する場合、<div></div>のように開始タグと終了タグを打ち込む必要がありますよね。でもEmmetなら、要素名を入力してタブキーを押すだけで一瞬で展開できます。これがEmmetの基本機能なので、まずはここから使い始めると良いと思います。

例えば、divと入力してタブキーを押すだけで、こんな風に展開されます。

div

Emmetがこれを展開すると、こうなります。

<div></div>

スワン

もちろん、spanとかpでも同じように使えるので、サクサクHTMLを書けます。

例2：「.」でクラス付与

HTMLでクラスを付与する場合、通常は<div class="classname"></div>のように書きますよね。でも、Emmetを使えば、「.」を使うだけでクラス付きの要素を一瞬で展開できます。

例えば、div.classnameと入力してタブキーを押すと、こんな感じに展開されます。

div.classname

これをEmmetで展開すると、以下のようにクラスが付与された状態で表示されます。

<div class="classname"></div>

ちなみに、divの場合に限り、要素名を省略してもOKです。つまり、div.classnameの代わりに.classnameと入力しても、同じ結果が得られます。

.classname

スワン

divはHTMLで最もよく使う要素なので、この省略技を覚えておくと便利ですよ！

先に要素を展開してからクラスを入力する方法

「div.」や「.」の時点でタブキーを押して先に展開してからクラス名を入力する方法もあります。このとき、Emmetは以下のように展開し、""の間にカーソルが配置されるので、そのままクラス名を入力できます。

まず、「div.」もしくは「.」と入力してタブキーを押すと、以下のように展開されます。

<div class=""></div>

そのままクラス名を入力し、もう一度タブキーを押すと、今度は><の間にカーソルが移動するので、次の入力をスムーズに続けることができます。

スワン

このように、Emmetではタブキーを押すたびに、次の入力にスムーズに移れるようカーソル位置を自動で制御してくれるんです。とても便利ですよね！

例3：「#」でID付与

HTMLでIDを付ける場合、<div id="idname"></div>のように書きますよね。でも、Emmetを使えば、「#」を使うだけでID付きの要素を素早く展開できます。

例えば、div#idnameと入力してタブキーを押すと、こんな感じに展開されます。

div#idname

これをEmmetで展開すると、以下のようになります。

<div id="idname"></div>

クラスと同様に、divは省略できるので、#idnameと入力するだけでもOKです。

#idname

先に要素を展開してからIDを入力する方法

この操作は、クラス付与の場合とほぼ同じです。「div#」の時点でタブキーを押して先に展開し、""の間にカーソルが配置されるので、そのままID名を入力し、もう一度タブキーを押すと><の間にカーソルが移動します。

※クラスの場合と違って、「#」単独では展開されません。

クラスとIDをまとめて指定する方法

Emmetでは、クラスとIDをひとつの要素に対して同時に指定することもできます。たとえば、div#idname.classnameもしくは#idname.classnameと入力してタブキーを押すと、次のようにIDとクラスの両方が指定された要素が展開されます。

<div id="idname" class="classname"></div>

さらに、「div#.」や「#.」と入力して先に展開し、クラス名とID名をあとから入力することもできます。

<div id="" class=""></div>

例4：タグの範囲を選択する「バランス」機能

Emmetには、タグの範囲を素早く選択できる「Balance (inward)」と「Balance (outward)」という便利な機能があります。

例えば、以下のようなネストされたHTMLがあります。

<div>
  <section>
    <p>ここにテキストがあります</p>
  </section>
</div>

Balance (outward)を使えば、<p>から順次外側の要素を選択範囲に含めていき、最終的に<div>全体を選択することができます。

Balance (inward)では、外側から内側に向かって範囲を狭め、テキストの範囲を選択することも可能です。

多くのタグがネストされている場合や、開始タグと閉じタグのペアを確認したい場合にとても役立ちます。短いコードだと便利さがわかりにくいかもしれませんが、数百行、数千行にわたる大規模なHTMLファイルでは、タグの範囲を一瞬で選択できるこの機能が本当に便利です。

みなと

実務の現場では、他のチームが作ったHTMLを編集することがよくあります。その際、インデントが崩れていたり、整理が十分でないソースに出くわすことも少なくありません。この「バランス」機能があると、タグのペアを素早く確認できて、そういったコードの編集もスムーズに進められます！

ショートカットキーの割り当て方法

Emmetの「Balance (inward)」と「Balance (outward)」機能は、初期状態ではショートカットが割り当てられていません。ショートカットを設定することで、操作がよりスムーズになり、効率的にタグの範囲を選択できるようになります。

例5：既存の要素を囲む「ラップ変換」

Emmetの「ラップ変換 (Wrap with Abbreviation)」機能を使うと、選択した要素やテキストを指定したタグでラップ（囲む）することができます。この機能は、既存のコードに新しい構造を追加したいときに非常に便利です。

例えば、次のような<a>タグ内にテキストがあるとします。

<a href="#">リンクテキスト</a>

このリンクテキストを<span>タグで括りたい場合、まずテキスト部分を選択し、「Wrap with Abbreviation」を実行して、spanと入力します。すると、次のように展開されます。

<a href="#"><span>リンクテキスト</span></a>

また、クラスやID属性を指定してラップすることもできます。たとえば、div.container や .container と入力すれば、クラス付きのdivタグで選択した要素を簡単にラップすることが可能です。div#main や #main のようにIDを含む形でも同様に展開できます。

ショートカットキーの割り当て方法

Emmetの「ラップ変換 (Wrap with Abbreviation)」機能も、初期状態ではショートカットが割り当てられていないことがあります。ショートカットを割り当てる手順を説明します。

例6：「!」でHTMLのひな型を生成

Emmetの「!」機能を使うと、HTMLの基本構造を瞬時に生成できます。!と入力してタブキーを押すだけで、以下のようなHTMLの雛形が展開されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

「!」を使うと、たったこれだけの入力で一瞬でHTMLの基本構造が展開されるので、とても便利です。基本的なHTMLのひな型が必要なときや、すぐに動作確認をしたいときに最適です。

みなと

私の場合、この機能は素早くHTMLのひな型を作って、ちょっとしたコードを確認する場面でよく使います。正式なHTMLファイルを作るときは、似た構造のファイルを複製して使用することが多いので、この機能はテストや軽い検証を行うときに便利と感じています。

Emmetの活用例：CSS編

Emmetは、HTMLだけでなく、CSSのコーディングでもとても役立つツールです。ここでは、CSSに関する便利な機能にフォーカスして紹介します。VS Codeを使った日々の作業で効率化できる、実務で特に重宝している機能を中心にピックアップしました。

例1：marginの展開

Emmetを使えば、CSSのmarginを一瞬で展開することができます。よく使うプロパティだからこそ、効率化の効果も大きいです。

まず、「m」と入力してタブキーを押すと、次のように展開されます。

margin: ;

また、以下のように、いろんなmarginのパターンを展開できます。

特定の方向へのmargin指定

特定の方向だけにマージンを設定したい場合、以下のようにEmmetで簡単に展開できます。

さらに数値を指定することで、以下のように数値と単位まで一気に展開できます。

例2：paddingの展開

marginと同様に、paddingも簡単に展開することができます。まず、「p」と入力してタブキーを押すと、次のように展開されます。

padding: ;

また、以下のように、いろんなpaddingのパターンを展開できます。

特定の方向へのpadding指定

特定の方向だけにパディングを設定したい場合、以下のようにEmmetで簡単に展開できます。

さらに数値を指定することで、以下のように数値と単位まで一気に展開できます。

例3：単位の展開

m10 で margin: 10px; と展開されることは、先ほど説明しましたが、他の単位を指定したいこともありますよね。そんなときも、Emmetなら簡単に対応できます。

例えば、marginに異なる単位を適用したい場合、以下のように入力するだけで展開できます。

スワン

%を入力するのが意外と面倒なので、pで展開できるのは地味に便利です！

例4：さまざまなCSSの展開

marginやpadding以外にも、Emmetではよく使うCSSプロパティを素早く展開することができます。

みなと

私が実際によく使っているショートカットを中心に、展開例をカテゴリごとにまとめました。

ここでは数値や単位を使った展開例（例: fz10 → font-size: 10px; や w10p → width: 10%; など）は省略していますが、marginやpaddingと同様に、数値や単位を含めた展開も簡単に行えますので、ぜひ試してみてください！

表示・配置

ボックスサイズ

フォント

テキスト

背景

色

ボーダー

その他

たくさん紹介しましたが、これらを全部覚える必要は全然ありません。必要なときに使いながら徐々に慣れていけばOKですし、カンでどんどん試してトライアンドエラーを繰り返すと、自然と手になじんでいきますよ！

例5：!importantの展開

CSSで特定のスタイルを強制的に適用したいときに使う!important。Emmetでは、この!importantも簡単に展開できます。

例えば、m10:!と入力してタブキーを押すと、次のように!importantが付いたスタイルが展開されます。

margin: 10px !important;

また、すでに展開されたスタイルに後から!importantを追加することも可能です。例えば、margin: 10px;と展開された後、10pxとセミコロン（;）の間に!を入力しタブキーを押すと、同じように!importantを付与することができます。

例6：数式の計算

Emmetを使えば、数式を入力してコマンドを実行するだけで、その計算結果を展開することができます。特に、CSSプロパティの値に使うと、レイアウトやスタイルの調整が簡単で、とても便利です。

例えば、次のようにwidth: 100px;が展開された後に、その値を2で割りたいとします。この場合、100/2と入力してコマンドを実行すると、計算されて展開されます。

width: 100/2px;

これをEmmetで計算すると、以下のように結果が表示されます。

width: 50px;

ショートカットキーの割り当て方法

初期状態では、Emmetの数式計算機能にはショートカットキーが割り当てられていないことがあります。ショートカットを割り当てる方法は次の通りです。

マルチカーソルで複数の計算を同時に行う

さらに、マルチカーソルを使用することで、複数の箇所を同時に計算することも可能です。

例えば、以下のようにwidthとheightを選択し、それぞれに/2を追加してコマンドを実行すると、同時に計算結果が反映されます。

width: 200/2px;
height: 100/2px;

これをEmmetで計算すると、以下のように結果が表示されます。

width: 100px;
height: 50px;

基本的な四則演算を使って、展開後の数値調整をスムーズに行うことができるので、CSSを書く際に非常に便利です。

みなと

Sassやcalc()も便利ですが、私はコードを書いている途中でちょっとした計算を素早く済ませたいときにEmmetの数式計算機能をよく使います。数値をさっと調整してすぐに確認できるので、スピーディにコーディングを進めたい場面でとても役立ちます。

例7：数値の増減

Emmetには、CSSやHTML内の数値を素早く増減できる便利な機能があります。数値を手動で変更するのは面倒ですが、Emmetを使えば、0.1、1、10の単位で素早く増減できるので、調整作業が格段にラクになります。

例えば、次のようなCSSプロパティを持つ場合に、数値を一瞬で増減できます。

top: 100px;

• 0.1ずつ増加すると、100.1px → 100.2px → 100.3px
• 0.1ずつ減少すると、99.9px → 99.8px → 99.7px
• 1ずつ増加すると、101px → 102px → 103px
• 1ずつ減少すると、99px → 98px → 97px
• 10ずつ増加すると、110px → 120px → 130px
• 10ずつ減少すると、90px → 80px → 70px

ショートカットキーの割り当て方法

Emmetの数値増減機能には、初期状態ではショートカットキーが割り当てられていないことがあります。以下の手順で、ショートカットキーを割り当てて設定します。

マルチカーソルで数値を同時に増減する

Emmetの数値増減機能は、マルチカーソルを使うことで、複数の場所にある数値を一度に調整することもできます。例えば、複数の要素のtop値を同時に増減したい場合、以下のように一気に調整が可能です。

top: 100px;
top: 200px;
top: 300px;

この状態で、各topの値にカーソルを追加し、マルチカーソルを使って数値を増減すると、次のように同時に調整できます。

• 0.1ずつ増加/減少
  top: 100.1px; → top: 100.2px;
top: 200.1px; → top: 200.2px;
top: 300.1px; → top: 300.2px;
• 1ずつ増加/減少
  top: 101px; → top: 102px;
top: 201px; → top: 202px;
top: 301px; → top: 302px;
• 10ずつ増加/減少
  top: 110px; → top: 120px;
top: 210px; → top: 220px;
top: 310px; → top: 320px;

マルチカーソルを使うことで、複数の要素に対して一括で数値を調整できるので、作業の効率が格段に上がります。

みなと

複数の画像とかをまとめて数ピクセルだけ動かしたいときが結構あるので、この機能がとても役立ってます！

まとめ

Emmetを使うことで、HTMLやCSSのコーディングが一気に効率化されます。特に、日々の作業で繰り返し行う部分を、ほんの数回のキー入力で完了できる点が魅力です。

今回の記事では、実務で役立つEmmetの機能を中心に紹介しましたが、Emmetには他にも多くのショートカットや展開機能があります。もっと詳しく知りたい場合は、公式のEmmetチートシートを参考にしてみてください。

私が実務で特に使っている機能を中心に紹介しましたが、みなさんのコーディングにも役立ててもらえたら嬉しいです。ぜひ、今回の機能を試してみて、少しずつ自分の作業スタイルに取り入れてみてください！

みなと

フロントエンドエンジニア

XContact

東京のWeb制作会社で15年以上働いている現役フロントエンドエンジニアです。これまで、いろんなプロジェクトに関わりながら、フロントエンド開発やWebデザインに取り組んできました。このブログでは、今までの経験を活かして、Web制作に役立つ情報やノウハウをシェアしていきたいと思います。初心者の方から、現場で働く方まで、誰でも参考にできる内容をお届けしますので、ぜひ覗いてみてください。