Emmetとは？HTMLを素早くコーディングする方法を習得しよう！ | プログラミング入門ナビ by Proglus（プログラス）

Pocket

はじめに

HTMLのプログラミングをしていると、最初は丁寧に書くものの、慣れてくるとだんだん似たような表記が多くて煩わしくなってきますよね。

簡単なWebページなら問題になりませんが、たくさんの階層構造を持つページをコーディングする場合は骨が折れます。

Emmetというプラグイン機能を使えば、この手間を大幅に省くことが可能です。

このページではEmmetの概要と使用方法、および人気のエディタであるVSCodeでの導入方法を紹介します。

動画でEmmetについて学ぶ

フォローしてね！

Emmetとは？

Emmet（読み：エメット）は、短く略したコードをタイプすると本来の長いコードに変換されるようにする機能です。

若者を中心によく用いられる「略語」のようなもので、「スマートフォン」を「スマホ」、「サブスクリプション」を「サブスク」と言い換えるのと似ています。

略語を使えば文字数が減りますし、言いやすくなりますよね。コーディングでも文字数が減ればタイプする労力や時間が大幅に減らせます。

具体的に見た方が早いので下記の例を見てください。

<!doctype html>
<html lang="en">
<head>
  <title>Demo</title>
</head>
<body>
  ul#nav>li.item$*4>a{Item $}
</body>
</html>

7行目に見慣れない表記がありますが、これがEmmetを使うための書き方です。これを「展開」すると下記のようなコードになります。

<!doctype html>
<html lang="en">
<head>
  <title>Demo</title>
</head>
<body>
  <ul id="nav">
    <li class="item1"><a href="">Item 1</a></li>
    <li class="item2"><a href="">Item 2</a></li>
    <li class="item3"><a href="">Item 3</a></li>
    <li class="item4"><a href="">Item 4</a></li>
  </ul>
</body>
</html>

たった1行だったのが6行のコードに早変わりしました。

「展開」の方法はエディタにより異なりますが大体ボタン1つでできることが多く、上記の例でいえば「27文字＋展開ボタン」の手間で199文字分のコーディングができることになります。

この使い方を知っていると知っていないではコーディングの速さに雲泥の差が出ますね。

これは公式サイトで取り上げている一例ですので、意味についてはまだ理解しなくて問題ありません。

公式サイト：Emmet — the essential toolkit for web-developers

VSCodeでの使い方

プログラマーから絶大な人気を得ているテキストエディタであるVSCode（Visual Studio Code）でEmmetを使う方法ですが、実は最初から使用できるように組み込まれているため特別な設定は必要ありません。

「展開」はTabキーでできます。

VSCodeを使っている方はすぐにでも試せますのでぜひお手元で打ち込みながら次項をお読みください。

なお他のテキストエディタ（Sublime TextやAtom等）では外部プラグインとして導入が必要になります。

公式サイトからダウンロード可能です。

主な記述方法

ここからはEmmetの数ある表記の中でも特に多用されるものを中心に記述方法を見ていきましょう。

まずは初級編を覚えておくだけでも大いに役立ちます。余力があれば中級編・上級編も使ってみましょう。

初級編

タグ単体

要素名だけ入力し「展開」（VSCodeではTabキー押下）すると、開始タグと（必要に応じ）終了タグが補完されます。

<!-- 展開前 -->
h2

Tabキーを押すと

<!-- 展開後 -->
<h2></h2>

入れ子構造

入れ子構造にするには、先に親要素名を書いてから「>」で子要素名につなぎます。

<!-- 展開前 -->
div>a

Tabキーを押すと

<!-- 展開後 -->
<div><a href=""></a></div>

兄弟構造

入れ子ではなく、同列の並びとなる兄弟構造は「+」で要素名をつなぎます。

<!-- 展開前 -->
h2+div

Tabキーを押すと

<!-- 展開後 -->
<h1></h1>
<div></div>

繰り返し

特に表や箇条書きなどでは同じタグを何度も書かなければならないのが面倒ですよね。

繰り返したい要素名の後に「*回数」を書けばその回数分が表記されます。

入れ子表記との組み合わせも可能です。

<!-- 展開前 -->
ul>li*3

Tabキーを押すと

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

HTML雛形

HTML文書の冒頭に必ず書く必要のある雛形も、簡単に展開することができます。

一般的には「html:5」と入力しますがVSCodeの場合は「!」でも可です。

<!-- 展開前 -->
html:5

Tabキーを押すと

<!-- 展開後 -->
<!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 lang=”ja”> ）が日本語（”ja”）でなく英語（”en”）となっていることが多いです。

適宜直すか、面倒ならばエディタの設定で修正することができるので対応しておくと良いでしょう。

VSCodeでの設定方法は下記の記事の「Emmetの日本語設定」を参照してください。

Visual Studio CodeでHTMLを書くときの便利な設定方法！ミスの防止や開発効率UPに役立てよう｜プログラミング入門ナビ

中級編

idを付加

要素にidをつけるには「#」で指定します。

<!-- 展開前 -->
div#item1

Tabキーを押すと

<!-- 展開後 -->
<div id="item1"></div>

クラスを付加

要素にクラス名をつけるには「.」で指定します。

<!-- 展開前 -->
p.content

Tabキーを押すと

<!-- 展開後 -->
<p class="content"></p>

テキストを指定

コンテンツであるテキストを入れて入力することもできます。要素名に続けて「{}」内に記述しましょう。

<!-- 展開前 -->
p{ここが本文です}

Tabキーを押すと

<!-- 展開後 -->
<p>ここが本文です</p>

属性を指定

属性を記述するには「[]」を使います。スペースで区切って複数の属性を同時に指定することも可能です。

<!-- 展開前 -->
img[src="dog.jpg" alt="犬の画像"]

Tabキーを押すと

<!-- 展開後 -->
<img src="dog.jpg" alt="犬の画像">

上級編

グルーピング

いくつかの表記の組み合わせを（）で囲めば、一つのグループとして扱うことができます。

繰り返したい要素が1つだけでなく複数要素である場合などに有効です。

<!-- 展開前 -->
table>(tr>th+td*3)*3

Tabキーを押すと

<!-- 展開後 -->
<table>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

連番をつけて展開

クラス名やテキストの内容に連番をふりたい場合はその部分を「$」にします。

<!-- 展開前 -->
h2.item${見出し$}*3

Tabキーを押すと

<!-- 展開後 -->
<h2 class="item1">見出し1</h2>
<h2 class="item2">見出し2</h2>
<h2 class="item3">見出し3</h2>

兄弟要素のテキストを指定

次のように要素を挟みたい場合は兄弟要素の記述要領でテキスト指定が可能です。

<!-- 展開前 -->
p>{お申し込みは}+a{こちら}+{から}

Tabキーを押すと

<!-- 展開後 -->
<p>
  お申し込みは
  <a href="">こちら</a>
  から
</p>

まとめ

HTMLをサクサクとコーディングするためのプラグインであるEmmetについて概要と使用方法を解説しました。

CSSにも応用可能なので興味のある方は調べて活用してみてください。

コードを早く書けるようになることはもちろん、プログラマーはコードを打ちすぎて腱鞘炎になる方も多いので、その予防の意味でもぜひ役立てていきましょう。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Pocket