CSSで自動連番を簡単に実現!ランキングなどに便利なcounter-incrementの使い方をご紹介します。

人気記事ランキングで順位の数字を自動連番で表示させたいという時などありますよね。CSSのcounter-incrementを使えば、特にPHPなどのプログラムを使うことなく簡単に実現できます。

counter-incrementの使い方

サンプル

「1位・2位・3位」の数字がCSSのcounter-incrementを使用して実現しています。

 

サンプルのソースコード

<html>
<head>
  <style type="text/css">
    body{
      counter-reset: count-number;
    }
    ul{
      list-style: none;
    }
    li{
      height:40px;
    }
    .ranking:before {
      counter-increment: count-number;
      content: counter(count-number)"位"
      color: #2581C4;
      font-weight: bold;
      border: 1px #2581C4 solid;
      text-align: center;
      margin:0 5px 0 0;
      padding: 5px;
    }
  </style>
</head>
<body>
  <p>好きな果物ランキング
   <li>
    <div class="ranking">りんご</div>
   </li>
   <li>
    <div class="ranking">バナナ</div>
   </li>
   <li>
    <div class="ranking">パイナップル</div>
   </li>
  </ul>
</body>
</html>

counter-increment: count-number;
content: counter(count-number)"位"

CSSのみで自動連番が実装できます。「count-number」の部分は任意の名前でOKです。
サンプルでは、「位」という文字を入れてますが不要な方は以下のよう省いて頂ければOKです。

content: counter(count-number);

また、bodyに「counter-reset」を設定していますが、これがないと連番にならずにすべての値が1になる場合もあるので忘れずに設定してください。

注意事項

同じページ内に複数のランキングを入れたい場合、「counter-increment」や「counter-reset」はそれぞれランキング毎に違う値を設定しなければいけません。違うランキングなのに数字は連番になってしまっているという失態を自分自身で経験済みなのでお気をつけください。

コメントを残す

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