emmetの連番の振り方について

この記事で記載すること

割と力技でもできて、忘れがちなemmetでの連番の振り方について記載します。

具体的には、
まず、

• 基本的な記法

また応用編として、

• 0埋め(たとえば01)にする方法
• 1ではなくほかの数値からのスタート方法
• 降順での連番の振り方

について記載していきたいと思います。

はじめに

htmlおよびcssを速やかに記載する記法の一つにemmetがあります。こちらの記法を用いることで速やかに正確なコーディングができますが、記法の知識がないばかりに結局手打ちで打ち込んでしまい、スピード感が失われる場合もあります。その具体例として、例えば、画像名などに連番をふることがあげられます。今回はその連番についての知識です。以下ではその方法についてご紹介させていただきます。

基本的な記法

まず、基本的な記法についてです。半角のドルマーク($) を用いることで連番を振ることができます。
たとえば、listタグでそれぞれのリストに展開後「list+連番」のidを振ってみます。

ul>li#list$*5

【展開後】

<ul>
  <li id="list1"></li>
  <li id="list2"></li>
  <li id="list3"></li>
  <li id="list4"></li>
  <li id="list5"></li>
</ul>

このように手打ちならば、チクチク変更しなければ、ならないコードを$マークを使って速やかに記載することができました。

emmetで連番記法の応用編

以下ではこの記法の応用編をご紹介したいと思います。

【応用編1】0埋め(たとえば01)にする方法

$を連ねることで連ねた数だけ0埋めをすることができます。
(例)

ul>li#list$$*10

【展開後】

<ul>
  <li id="list01"></li>
  <li id="list02"></li>
  <li id="list03"></li>
  <li id="list04"></li>
  <li id="list05"></li>
  <li id="list06"></li>
  <li id="list07"></li>
  <li id="list08"></li>
  <li id="list09"></li>
  <li id="list10"></li>
</ul>

【応用編2】1ではなくほかの数値からのスタート方法

**$@(はじめたい数値)**で1以外の番号から連番をスタートすることができます
(例 リストのidを5から連番でふりたい場合)

ul>li#list$@5*10

【展開後】

<ul>
  <li id="list5"></li>
  <li id="list6"></li>
  <li id="list7"></li>
  <li id="list8"></li>
  <li id="list9"></li>
  <li id="list10"></li>
  <li id="list11"></li>
  <li id="list12"></li>
  <li id="list13"></li>
  <li id="list14"></li>
</ul>

【応用編3】降順での連番の振り方

$のあとに**@-**を付けてください。

(例)

ul>li#list$@-*10

【展開後】

<ul>
  <li id="list10"></li>
  <li id="list9"></li>
  <li id="list8"></li>
  <li id="list7"></li>
  <li id="list6"></li>
  <li id="list5"></li>
  <li id="list4"></li>
  <li id="list3"></li>
  <li id="list2"></li>
  <li id="list1"></li>
</ul>

まとめ

今回は、emmetの連番についての記法について記載させていただきました。
基本は 半角のドルマーク($) 、またドルマークのあとに@(-または数値)で、1以外の数で連番、降順にすることができました。
もしよろしければぜひこちらの記法、ご活用いただけたら幸いです。

本文、お読みいただき、ありがとうございました。