CSSだけで要素に番号（カウント）を振る方法【counter】

ランキング番号とか振りたい場合などです。

▼ 次画像みたいに 1、2、3 といった感じで

手書きでカウントを振ることができるものの・・・

なんか非効率だし、面倒ですよね。

もっといい方法は CSSの counter を使うことです。

ここではそれを使って要素に番号を振る方法を紹介！

このページの目次

カウントアップで番号を振る方法
カウントダウンしながら番号を振る
カウント番号の振り方のまとめ

カウントアップで番号を振る方法

まずはカウントアップで番号を振る方法。

例　：　1 ＝＞ 2 ＝＞ 3 ＝＞ 4 ＝＞ 5 ＝＞、、、

分かりやすいHTML・CSSコード例は次の通り。

１．まず番号（連番）を振りたい要素を作る

ここではこんなHTMLを作ってみました。

▼ カウントアップするHTML例

<div class="countup">
  <div>Eclair</div>
  <div>Lollipop</div>
  <div>Marshmallow</div>
  <div>Nougat</div>
  <div>Donut</div>
  <div>Cupcake</div>
  <div>Honeycomb</div>
</div>

<div>Eclair</div>

<div>Lollipop</div>

<div>Marshmallow</div>

<div>Nougat</div>

<div>Donut</div>

<div>Cupcake</div>

<div>Honeycomb</div>

</div>

上のように countup というクラス名を付けときます。

まあクラス名は何でもいいですが・・・

便宜上ここではこういう名前にしました。

２．カウントアップで番号を振るCSSを追加

次に counter で番号を振るCSSを追加します。

▼ カウントアップさせる場合のCSS

.countup{
  counter-reset: rank 0;
  font-size: 20px;
}
.countup div{
  position: relative;
  margin: 8px 0;
  padding-left: 32px;
  border: 2px solid green;
  background: lightgreen;
}
.countup div::before{
  counter-increment: rank;
  content: counter(rank);
  display: block;
  position: absolute;
  left: 0; 
  width: 24px;
  text-align: center;
  padding-top: 2px;
  border-right: 2px solid darkgreen;
}

.countup{

counter-reset: rank 0;

font-size: 20px;

}

.countup div{

position: relative;

margin: 8px 0;

padding-left: 32px;

border: 2px solid green;

background: lightgreen;

}

.countup div::before{

counter-increment: rank;

content: counter(rank);

display: block;

position: absolute;

left: 0;

width: 24px;

text-align: center;

padding-top: 2px;

border-right: 2px solid darkgreen;

}

ハイライトした部分に注目！

大事なプロパティ・関数は次の３つです。

counter-reset プロパティ
カウンター名と初期値を渡し、そのカウンターをリセットする。この例の counter-reset: rank 0; だったら rank というカウンターが 0 になるということ。
counter-increment プロパティ
渡したカウンターを +1 インクリメントする。ただし counter-increment: rank -1; など後ろに数値を渡せば、その分だけ増加（または減少）させられる（後述）
counter関数
この関数にカウンター名を渡すと、その内容を返してくれる。上の例では content: counter(rank); として現在カウンター値を表示している

これが counter の大まかな使い方です。

ちなみに上の例、こういう見た目になりました。

まさしくランキングみたいな感じですね。

HTML直書きと違い、番号を手書きで振らなくていいのが楽です。

カウントダウンしながら番号を振る

次にカウントダウンで番号を振るやり方。

例　：　10 ＝＞ 9 ＝＞ 8 ＝＞ 7 ＝＞、、、

これは単にカウントアップの逆をやるだけです。

１．まず番号（連番）を振りたい要素を作る

再程と全く同じHTMLです。

▼ カウントダウンするHTML例

<div class="countdown">
  <div>Eclair</div>
  <div>Lollipop</div>
  <div>Marshmallow</div>
  <div>Nougat</div>
  <div>Donut</div>
  <div>Cupcake</div>
  <div>Honeycomb</div>
</div>

<div>Eclair</div>

<div>Lollipop</div>

<div>Marshmallow</div>

<div>Nougat</div>

<div>Donut</div>

<div>Cupcake</div>

<div>Honeycomb</div>

</div>

違うのは countdown というクラス名になっただけ。

２．カウントダウンで番号を振るCSSを追加

次に counter で番号を振るCSSを追加します。

▼ カウントダウンさせる場合のCSS

.countdown{
  counter-reset: rank 8;
  font-size: 20px;
}
.countdown div{
  position: relative;
  margin: 8px 0;
  padding-left: 32px;
  border: 2px solid green;
  background: lightgreen;
}
.countdown div::before{
  counter-increment: rank -1;
  content: counter(rank);
  display: block;
  position: absolute;
  left: 0; 
  width: 24px;
  text-align: center;
  padding-top: 2px;
  border-right: 2px solid darkgreen;
}

.countdown{

counter-reset: rank 8;

font-size: 20px;

}

.countdown div{

position: relative;

margin: 8px 0;

padding-left: 32px;

border: 2px solid green;

background: lightgreen;

}

.countdown div::before{

counter-increment: rank -1;

content: counter(rank);

display: block;

position: absolute;

left: 0;

width: 24px;

text-align: center;

padding-top: 2px;

border-right: 2px solid darkgreen;

}

ハイライトした行に注目！

ここでは counter-reset: rank 8; でカウンター初期値を 8 にリセット、そして counter-increment: rank -1; でデクリメントさせてます。

これがカウントアップとは違う所ですね。

もちろん工夫すればもっと複雑な番号不利も可能です。

ちなみに実際の見た目はこのような感じ

上から下にカウントダウンさせてます。

これもランキング表示とかに使えそうですね。

カウント番号の振り方のまとめ

ということで番号振りの簡単なまとめ

カウントアップさせる場合
まず counter-reset: rank 0; のようにカウンター名と初期値設定。そのあと番号表示させたい要素内で counter-increment: rank; のように+1ずつ増加させる。あとは counter(rank) で番号取得可能。
カウントダウンさせる場合
まず counter-reset: rank 10; のようにカウンター名と初期値設定。そのあと番号表示させたい要素内で counter-increment: rank -1; のようにデクリメントさせる。あとはカウントアップと同じ。