CSSでカウント counter-increment で順位表示をお手軽実装

スタイルシートでwebコーディング的なことを色々とやったりしてますが、まだまだしらない機能みたいなものは一杯あったりします。普段なかなか使わないという意味では以前紹介したセレクタnotなどもその一例だったりします。

該当しないを選択するという発想ちゃんと調べれば便利なモノがしっかり実装されていたりすることはよくあるかと思います。どうしても、昔から...

tks-kan.com

<ul>
    <li>menu a</li>
    <li>menu b</li>
    <li>menu c</li>
</ul>

ul {
    display: flex;
}
li {
    padding: 0.5rem;
}
li:not(:last-child) {
    border-right: solid 1px black;
}

みたいな書き方で、メニューの区切り線をあっさり実装できちゃったりする便利なセレクタだったりします。…って、今回はnotの説明ではないですね。

今回はカウントを使ってランキングページを作成

単純なランキングページを書く

ランキングページというとベタに書くなら

<ol>
    <li>χの悲劇</li>
    <li>撫物語</li>
    <li>なんくる姉さん</li>
    <li>カクシゴト</li>
    <li>パズルグラム</li>
</ol>

olタグ、いわゆるオーダーリストで順番に並べておく。これだけでもランキングっぽい表示にはなりますよね。さらに改良していくと

<ol>
    <li>1位　χの悲劇</li>
    <li>2位　撫物語</li>
    <li>3位　なんくる姉さん</li>
    <li>4位　カクシゴト</li>
    <li>5位　パズルグラム</li>
</ol>

ol {
    list-style: none;
}

なんてものも思いつきます（ランキングの中身についてはあまり気にしない方向で…）。リストの中に順位を書き、olの数字をlist-styleで非表示にしているイメージです。これでもよさそうですね。でも、今回は直接数字を書くのではなくCSSで順位表示をさせてみます。そのために使うのが「counter-increment」です。

counter-incrementでランキングページを書く

まず、counter-incrementとは何ぞやということで調べてみました（CSSカウンタの概要）。

CSS カウンタは、 CSS 2.1 の自動的なカウンタとナンバリングの実装です。カウンタの値は counter-reset や counter-increment の使用を通じて操作され、 content プロパティの counter() あるいは counters() 関数を使ってページに表示されます。

引用元CSS カウンタの利用 – Web developer guide | MDN

…少しわかりづらいですが、カウンタとナンバリングに実装ってことなので、数を数えてくれるみたいなイメージでいいと思います。さくっと実際例を書いてみましょう。

<ol>
    <li class="ranking">χの悲劇</li>
    <li class="ranking">撫物語</li>
    <li class="ranking">なんくる姉さん</li>
    <li class="ranking">カクシゴト</li>
    <li class="ranking">パズルグラム</li>
</ol>

ol {
    list-style: none;
    counter-reset:ranking;
}
.ranking:before {
    counter-increment:ranking;
    content:counter(ranking) "位　";
}