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

css3-vector

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

CSSセレクタ not 使い方
該当しないを選択するという発想 ちゃんと調べれば便利なモノがしっかり実装されていたりすることはよくあるかと思います。どうしても、昔から...
<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>

ranking01

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

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

ol {
    list-style: none;
}

ranking2

なんてものも思いつきます(ランキングの中身についてはあまり気にしない方向で…)。リストの中に順位を書き、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) "位 ";
}

ranking3

注意するのはcounter-resetをしている部分ですね。これを忘れるとうまく数字がカウントされないので気を付けましょう。さて、今回のポイントは下記の部分です。

  • html部分にクラス名rankingを付与
  • beforeセレクタでリストの前にcontentを追加
  • counter-incrementでrankingが出てくる回数をカウント

実際のコードを見てみると思っていたよりも簡単だったんじゃないでしょうか? ちなみに、この方式の利点としては

  • リストが増えたとしても自動的に順位が追加される
  • 別のolリストを追加しても順位がリセットされてランキング表示される
  • いちいち順位を記入しなくても簡単に入れ替えができる

などがあげられるかと思います。のちのメンテナンス作業などを考えると、こういう実装をしておいた方が楽になるパターンも多いと思うので参考にしてみてください。

ranking4

まとめ

いかがだったでしょうか。このカウントは入れ子でも使えるのでレポートなどでの目次などにある「1-1-1 概要」みたいな書き方もうまく使えばCSSだけで表現できたりもするはずです。是非、お試しください。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする