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

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

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

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

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」などの要素名を入力し展開すればタグが出力されます。
こちらが基本の形です。

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

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

クラス名「.」

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

id名「#」

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

階層にする「>」

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

隣接させる「+」

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

複製する「*」

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

グループ化する「()」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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