CSSのcounterを使ったランキングの作り方
についてサンプルを交えて紹介します。
CSSの「counter」というプロパティを使うことによってランキングのナンバリングを自動で行うことができます。
順位を入れ替える度に番号を付け替える必要がないため、手間が少なくなりミスも減ります。
CSS「counter」の使い方
「counter」は非常にシンプルな記述で実装が可能です。
- counter-increment: rank;：自動でナンバリングしたい要素に「rank」という名前のカウンターを設定する。
※「rank」は任意の名前をつけて利用可能。 - content: counter(rank);：ナンバリングの数字（1,2,3…）を表示させたい要素に記述する。
CSS「counter」を利用したランキングのサンプル
共通のHTML
10位まで表示させたい場合は<liタグ>を10個繰り返します。
「○位」と表記するランキング
「1位」「2位」「3位」……と自動ナンバリングするサンプルです。
CSS
content: counter(rank) “位“;とすると「1位」「2位」「3位」と表示されます。
「第1位」「第2位」「第3位」としたい場合はcontent: “第”counter(rank) “位“;とします。
デモ
See the Pen 【CSS】counter 「○位」と自動ナンバリングするランキング by ざきひー (@zakihiii) on CodePen.0
左上三角表示のランキング
CSS
::beforeは左上三角背景、::afterは順位です。
デモ
See the Pen 【CSS】counter 左上三角表示のランキング by ざきひー (@zakihiii) on CodePen.0
まとめ
ランキングの番号を自動ナンバリングしてくれるCSS「counter」を紹介しました。
手動で付け替えていた順位の数字が自動でナンバリングされることで日々の更新がラクになります。
本記事のサンプルを参考に、各サイトにあった使い方をしてください。
コメント