Emmetで複数のタグを一括展開して、コーディングスピードをさらに上げる方法

効率的にHTMLを入力するために、Emmetは欠かせない機能です。

意外と知られていませんが、Emmetでは複数タグを一括展開できます。
たとえば下記の1行をざっと書いてtabでEmmet展開をすると…

header.header>.header_wrap>.header_left>h1>img^^.header_right>nav>ul.header_nav>li*3>a

下記のHTMLが一気にできあがります。

<header class="header">
  <div class="header_wrap">
    <div class="header_left">
      <h1><img src="" alt=""></h1>
    </div>
    <div class="header_right">
      <nav>
        <ul class="header_nav">
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

Emmetというと、あくまで1つのHTMLタグをすばやく展開するためにしか使われていなかったりします。

しかし、Pugを使っている人であればきっとこの入力はすぐマスターできますし、ある程度の骨組みは1つ1つ入力するよりも一気に入力できた方が効率的です。

以前もEmmetの記事で紹介でしたことがありますが、改めてEmmetで「複数タグを一括展開する」ことにフォーカスを当ててまとめてみます。
そもそもの基本的な部分から知りたい方は、過去記事と合わせてご覧ください。

Webrandum

効率的なマークアップが出来るようになるEmmetでHTMLを書く時の基本

https://webrandum.net/emmet-html

前提の考え方

Emmetで大量のタグを一括展開できたときはものすごい爽快感なのですが、記述が間違っていてうまく展開されないと、かなりストレスになります。

また、長い記述をすればするほど間違いを探すときに面倒になりますし、そうなってくるとなんのためにEmmetを使っているのか分からなくなります。

最初から最後まで自分の思うタグ全てを間違いなく一括展開できるのであれば問題ありませんが、そうでない方は下記の考え方を意識しておくと、うまくEmmetを利用してラクできると思います。

• 骨組みは一括展開するようにして、細かい部分は1タグずつ展開して作っていく
• コーディングがややこしくなりそうな部分は一括展開の対象からスキップする
• 必ず一括展開をしなければならないわけではないので、あくまで自分のコーディングスキルの1つとして利用する

階層の移動

Emmetで複数展開をするためには、いまの階層を意識しておくことが重要です。
下記の3つの記号をタグの間に入力することで、タグの階層を下がったり上がったりしていきます。

また、上の階層に上がる^は複数入力することが可能で、^^とすることで2階層上へ上がれます。

これらの記号を組み合わせながら、いまのどのような構造でタグを組んでいっているのか頭の中で想像しながら、入れ子にするのか、同階層に追加するのか、上の階層に追加するのか選択して入力します。

複雑に見えるかもしれませんが、Emmetはこの3パターンと後述する繰り返し作成しかありません。
繰り返しは階層構造に影響は与えないので、この3パターンの意識が頭の中でできるようになれば自由にHTMLが組めるようになります。

同じ要素の繰り返し作成

liタグなどは単体ではなく、複数使うことがほとんどです。

そんなときにli+li+li+li+liなどと記述するのは面倒です。
しかも、liタグの中にaタグを入れたい場合はもっと面倒になります。

li>a^li>a^li>a^li>a^li>a^

いま何個入力したのかわけが分からなくなりますし、すごく見にくいです。
同じ要素を複数作成するときは下記の記号を使いましょう。

li*3と入力することでliが3つ生成されることが分かりやすいですし入力もラクです。
各liの中にaタグを入れたい場合は下記のように記述します。

li*3>a

このように、*を使った下の階層は、生成されるすべてのタグに影響がある点だけ注意が必要です。
たとえば、1つ1つのliタグの中身が全然違うような場合は*の使用をオススメできません。

その場合はEmmetでliのところまで作っておいて、その中は別途入力した方がラクですしミスも少なくなります。

連番の使用

*で複数生成したあとは$を使って連番の使用が可能です。

ul>li.item.item-$*3

上記のEmmetを展開すると下記のようになります。

<ul>
  <li class="item item-1"></li>
  <li class="item item-2"></li>
  <li class="item item-3"></li>
</ul>

連番を割り振ったclass名を使いたいときに便利なので、これも覚えておきましょう。

Wrap with Abbreviation

先にテキストを貼り付けておいて、それをEmmetを使ってHTMLで囲む「Wrap with Abbreviation」という方法もあります。

これを使うと、原稿がきちんと用意されている場合のマークアップがかなりラクになります。

過去に記事にしているので、ぜひこちらもご覧ください。

Webrandum

EmmetのWrap with Abbreviationで複数行のマークアップを効率的に行う

https://webrandum.net/emmet-wrap-with-abbreviation