CSS辞典 counter()関数の解説

カウンターを使用するcounter()関数の使用方法と使用例、サンプルコードを記載

概要・使用方法

{ プロパティ:counter(キーワード)}

「counter()関数」は、自動連番のようなカウンター機能を付けることができます。多くはcounter-resetプロパティ、counter-incrementプロパティと一緒に使用する。

キーワード

キーワード任意の文字列。半角数字からはじめることはできない。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>counter-incrementプロパティ、counter-resetプロパティ サンプル</title>
    <meta charset="uft-8">
    <style>        
         .count_list{
                      list-style-type: none;
         }
         .counterreset {counter-reset: my-number 1;}
         .count_list li{
                      counter-increment: my-number 1;
         }     
         .count_list li::before{
                      content: "ゼッケン"counter(my-number)"番:";
         }
    </style>
  </head>
  <body>
         <div>
             <h1>日本ウサギちゃんダービー(女子の部)</h1>
             <ul class="count_list">
                 <li>うさよ</li>
                 <li>うさこ</li>
                 <li>うさぽん</li>
                 <li class="counterreset">うさko(代走)</li>
                 <li>うさpon(代走)</li>
             </ul>
         </div>
         <div>
             <h1>日本ウサギちゃんダービー(男子の部)</h1>
             <ul class="count_list">
                 <li>うさ次郎</li>
                 <li>うさ太郎</li>
                 <li>うさ三郎</li>
             </ul>
         </div>
  </body>
</html>

実行結果

日本ウサギちゃんダービー(女子の部)

  • うさよ
  • うさこ
  • うさぽん
  • うさko(代走)
  • うさpon(代走)

日本ウサギちゃんダービー(男子の部)

  • うさ次郎
  • うさ太郎
  • うさ三郎

各ブラウザの挙動は下記参照