LoginSignup
15

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-12-13

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以外の数で連番、降順にすることができました。
もしよろしければぜひこちらの記法、ご活用いただけたら幸いです。

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15