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

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

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

CSSのcounterを使うと要素に簡単にカウント番号を振れる

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

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

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

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

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

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

例 : 1 => 2 => 3 => 4 => 5 => 、、、

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

 

1.まず番号(連番)を振りたい要素を作る

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

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

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

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

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

 

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

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

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

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

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

  • 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 => 、、、

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

 

1.まず番号(連番)を振りたい要素を作る

再程と全く同じHTMLです。

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

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

 

2.カウントダウンで番号を振るCSSを追加

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

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

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

ここでは 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;  のようにデクリメントさせる。あとはカウントアップと同じ。

以上、CSSで要素に番号を振る方法&コード例でした。ではまた

CSS

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください