テキストエディタには様々な機能がありますが、その1つであるEmmet（読み方：エメット）を使うことによって、通常のコーディングよりも遥かに速く作業することができます。そんなEmmetの基本的な使い方を紹介します。

Emmetとは

Emmetとは、テキストエディタでHTMLやCSSをコーディングしていく際にコードの入力を補完してくれる機能です。多くのテキストエディタにはデフォルトで入っていたり、プラグインが用意されているので、簡単に利用することができます。

Emmetを使ったHTMLコーディング

HTMLを記述していく場合は、divタグやpタグ、imgタグといった様々なタグを使ってコードを書いていきますが、「<」「>」などの開始タグ、閉じタグを毎回のように入力していくのは結構、面倒な作業になります。そんな面倒な作業もEmmetを使えば、簡単にコードを入力することができます。

HTMLの出力

HTMLを書く場合は基本的にhtmlタグがあり、その中にheadタグやbodyタグなどいくつか必要になってくるタグがあります。それをいちいち全部入力していくのは面倒なので、そのような場合は「！」を1つ入力してEnterキーかTabキーを押すだけで、以下のようなコードが出力されます。

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

あとは、その時々で必要なmetaタグを追加したり、日本なのでlangのところを「jp」に変更して、コンテンツ部分をコーディングしていきます。

タグの出力

HTMLで使用するタグは色々ありますが、例えば、divタグを使用する場合はdivと入力してEnterキーかTabキーを押すことで、以下のようなコードが出力されます。

<div></div>

また、imgタグの場合はタグだけでなく、属性も合わせて出力されます。imgと入力したらEnterキーかTabキーを押した結果が以下です。

<img src="" alt="">

タグにidやclassを付与する場合

HTMLで使用するタグには、CSSで設定したidやclassを付与することが多いです。そのようなid名やclass名もEmmetを使えば簡単に記述することができます。例えば、divタグに「box」というクラスを付与したい場合は「div.box」と入力してEnterキーかTabキーを押します。

<div class="box"></div>

idを付けたい場合は「.」の箇所を「#」にすることで付与できます。また、1つのタグに対して複数のクラスが付くこともあります。そんなときは「div.box.bg」と繋げて入力します。

<div class="box bg"></div>

入れ子で出力する場合

リストなど入れ子で使用する場合は「>」を使います。「ul>li」と入力してEnterキーかTabキーを押します。

<ul>
  <li></li>
</ul>

また、リストなどは複数必要になることが多いので、そのようなときは「li*5」といったようにアスタリスクのあとに必要な個数の数字を入れます。

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

連番のid名やclass名を付ける場合

id名やclass名を連番で記述する場合は「li.list-$*5」と入力してEnterキーかTabキーを押します。

<li class="list-1"></li>
<li class="list-2"></li>
<li class="list-3"></li>
<li class="list-4"></li>
<li class="list-5"></li>

また、「01」といったようなゼロ付きの連番にしたい場合は、「li.list-$$*5」と入力することで以下のように出力することができます。

<li class="list-01"></li>
<li class="list-02"></li>
<li class="list-03"></li>
<li class="list-04"></li>
<li class="list-05"></li>

このように、Emmetには様々な補完機能が備わっており、慣れてくると確実にコーディング速度は向上しますので、よく使う機能は覚えておくと便利です。

以上が、基本的なEmmetの使い方になります。

おすすめの記事