CSSの「counter-increment」を使って要素に自動で連番を振る方法

CSSの「counter-increment」を使って要素に自動で連番を振る方法

CSSの「counter-increment」を使って要素に自動で連番を振る方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

CSSの「counter-increment」を使えば、”1→2→3…”というように要素に対して自動で連番を振ることができます。

このcounter-incrementの使い方について解説したいと思います。

スポンサードリンク

CSSの「counter-increment」を使って要素に自動で連番を振るする方法

例えば、連続するsection要素に対して連番を振りたい時は、以下のように指定します。


section {
  counter-increment: num;
}

section::before {
  content: counter(num);
}

カウントしたい要素に対して、counter-incrementを指定します。そのうえで、「counter(num)」で連番を出力しています。

上記の場合、連続するsection要素に対して連番(1→2→3…)が追加されます。

counter-incrementで指定している”num”は任意の文字列に変更してもらって大丈夫です。その場合、「counter(num)」も文字列を揃えてください。

連番の数字を「01→02→03…」というように、最初に0を付けたい場合は、以下のように指定します。


section {
  counter-increment: num;
}

section::before {
  content: counter(num,decimal-leading-zero);
}

counterに「decimal-leading-zero」を追加することで、連番の先頭に0が付与されます。

あとがき

counter-incrementの使い方は非常に簡単ですね。::before属性などを使って、要素に自動で連番を振りたい時は、ぜひ試してみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。