HOME > ブログ一覧 > WEB制作 > フロントエンド > 【2023年改訂版】Emmet（エメット）を使ってコーディングを効率化！HTML編

WEB制作フロントエンド便利ツール 2023.09.01 Fri

【2023年改訂版】Emmet（エメット）を使ってコーディングを効率化！HTML編

林田

こんにちは。最近アドシンへの復職を果たした林田です。

HTMLやCSSのコーディングに慣れてくると、何度も同じタグやプロパティを入力することが手間に感じることが増えてくると思います。
また、1文字ずつ入力していくといつの間にかタイプミスをしていて気が滅入ることもありますよね。
Emmetを使うと、大幅にタイピング量を減らすことができ、正確で効率的にコーディングを進めることができます。
短い記述をするだけで自動でタグを出力してくれるので、タイプミスも防ぐことができます。
コードを入力する手間を減らしたい方、スピードを上げたい方におすすめです！

今回はHTMLのEmmet記述方法について紹介したいと思います。

この記事の目次

1 Emmet（エメット）とは？
- 1.1 Emmetに対応しているエディタ
2 記述方法
3 まとめ

Emmet（エメット）とは？

Emmetとは、HTMLやCSSを短縮して記述することができる拡張機能です。
元々はZen-Codingと呼ばれていましたが、今はEmmetと呼ばれています。
括弧や閉じタグは書かずにtabキーで展開します。

Emmetは既定形式の入力補完機能によりHTML、CSS、XML、XSL等を素早く編集できる、テキストエディタ用プラグインである。 2008年にVadim Makeevが開発を始め、Sergey Chikuyonokと利用者によりMIT Licenseのオープンソースとして継続して開発されている。

（出典）Wikipedia

▼Emmet公式サイトはこちら
https://emmet.io/

Emmetに対応しているエディタ

Visual Studio Code	デフォルトで入っています。
Atom	パッケージをインストールして利用できます。
Brackets	拡張機能をインストールして利用できます。
SublimeText	パッケージをインストールして利用できます。
Dreamweaver	デフォルトで入っています。環境設定＞コードフォーマット＞Tabキーを使用して略語を展開にチェックを入れて設定する必要があります。

記述方法

EmmetでHTMLを書くときは<>を使わずに要素名のみ書いていき、tabキー（エディターによってはreturnキー）を押すと、要素の開始タグと終了タグが出力されます。
以下の画像をご覧いただければイメージしやすいかと思います。

公式サイトのチートシートに記述方法一覧が載っていますが、たくさんあって全部確認するのは大変です。
そこで、今回は基本的で覚えておくと便利な記述を紹介いたします。
一気に覚えるよりもできるところから少しずつコーディングに取り入れていくのがおすすめです。
少し取り入れるだけでも大きくスピードが変わってきます。

要素名のみ

単純に「div」や「p」などの要素名を入力し展開すればタグが出力されます。
こちらが基本の形です。

展開前
div
p
a

展開後
<div></div>
<p></p>
<a href=””></a>

クラス名・idを付与する「.」「#」

クラス・id共にCSSセレクタと書き方が似ています。
この記述方法が一番よく使うので覚えておいて損はありません！

クラス名「.」

展開するコードにクラス名をつける場合、要素名の後に「.」を付けて展開できます。
divタグの場合、「.」のみでも展開できます。
複数のクラスをつける場合はクラス名を「.」で連結させます。

展開前
.
.wrap
p.text
p.class1.class2

展開後
<div class=””></div>
<div class=”wrap”></div>
<p class=”text”></p>
<p class=”class1 class2″></p>

id名「#」

id名をつける場合は「#」を付けます。
同じようにdivの場合は「#」のみでも大丈夫です。

展開前
#container
section#main

展開後
<div id=”container”></div>
<section id=”main”></section>

階層にする「>」

階層にする場合は「>」を使って「親要素にするタグ>子要素にするタグ」のように記述し展開します。

展開前
ul>li>a

展開後
<ul>
<li><a href=””></a></li>
</ul>

隣接させる「+」

隣接させる場合は「+」を使います。

展開前
h2+p

展開後
<h2></h2>
<p></p>

複製する「*」

「複製したいタグ*個数」のように記述し、展開します。
例えば、以下の場合はulタグ内のliタグを3つ複製しています。

展開前
ul>li*3

展開後
<ul>
<li></li>
<li></li>
<li></li>
</ul>

グループ化する「()」

括弧で囲むとグループ化したい要素をまとめることができます。
例えば、div要素のグループに画像が入ったpタグを隣接させたい場合は以下のように記述します。
括弧で囲わなかった場合、画像が入ったpタグもdiv要素の入れ子となってしまいます。

展開前
(div>h2+p)+p>img

展開後
<div>
<h2></h2>
<p></p>
</div>
<p><img src=”” alt=””></p>

複製と組み合わせて以下のようにも展開できます。

展開前
ul>(li>a)*3

展開後
<ul>
<li><a href=””></a></li>
<li><a href=””></a></li>
<li><a href=””></a></li>
</ul>

入力が手間になりがちなテーブルも一瞬で展開できます。

展開前
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>

id・クラス名を連番にする「$」

id・クラス名を連番にできます。
「連番にする要素$*増やしたい数」

展開前
.item-$*3

展開後
<div class=”item-1″></div>
<div class=”item-2″></div>
<div class=”item-3″></div>

応用すると以下のようにリストのクラスを1〜10まで連番にすることもできます。
「$」を増やすと桁数も増やすことができます。
例えば、01のように2桁に0埋めしたい場合は「連番にする要素$$*増やしたい数」と記述します。

展開前
ul>li.rank$$*10

展開後
<ul>
<li class=”rank01″></li>
<li class=”rank02″></li>
<li class=”rank03″></li>
<li class=”rank04″></li>
<li class=”rank05″></li>
<li class=”rank06″></li>
<li class=”rank07″></li>
<li class=”rank08″></li>
<li class=”rank09″></li>
<li class=”rank10″></li>
</ul>

開始番号を指定する「＠」

「@」を使って開始番号を指定することもできます。
例えば、.item-3から開始して4つ増やす場合は以下のように入力します。

展開前
.item-$@3*4

展開後
<div class=”item-3″></div>
<div class=”item-4″></div>
<div class=”item-5″></div>
<div class=”item-6″></div>

連番を0から開始したい場合もこちらの方法を使えば大丈夫です。

要素にテキストを入れる「{}」

展開する要素にテキストを入れる場合は{}を使います。

展開前
h2{タイトル}
a{詳しくはこちら}

展開後
<h2>タイトル</h2>
<a href=””>詳しくはこちら</a>

loremで展開するとダミーテキストが出力されます。

展開前
lorem

展開後
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, distinctio, veritatis. Blanditiis perferendis pariatur eaque molestias impedit fugit nostrum dolorem nisi, recusandae cumque modi, praesentium magni odit aut, voluptates asperiores.

【応用】連番をテキストで出力する

先ほど紹介した連番を出力する「$」をクラス・id名だけでなくテキストとしても使うことができます。
{}内の数字を出したいところに「$」を入力し展開すると、要素内のテキストにも連番の数字を出力できます。

展開前
div.step*3>p{テキスト$$}

展開後
<div class=”step”>
<p>テキスト01</p>
</div>
<div class=”step”>
<p>テキスト02</p>
</div>
<div class=”step”>
<p>テキスト03</p>
</div>

クラス名の連番と組み合わせることもできます。

展開前
ul>li.link$$*3>a{リンク$$}

展開後
<ul>
<li class=”link01″><a href=””>リンク01</a></li>
<li class=”link02″><a href=””>リンク02</a></li>
<li class=”link03″><a href=””>リンク03</a></li>
</ul>

まとめ

今回はHTMLのよく使うEmmetについて紹介いたしましたがいかがでしたでしょうか？
他にもチートシートにたくさん記述方法が載っていますので気になる方はぜひチェックしてみてください。
初めは慣れないかもしれませんが、Emmetを使うことで間違いなくスピードが上がり効率的にコーディングできます。
この機会に少しずつでも取り入れてみてはいかがでしょうか？

▼Emmetチートシートはこちら
https://docs.emmet.io/cheat-sheet/

次回はEmmetのCSSの書き方を紹介したいと思います！

この記事をシェアする