CSS辞典 counter-incrementプロパティ、counter-resetプロパティの解説

カウンター値を更新する「counter-incrementプロパティ」、カウンター値をリセットする「counter-resetプロパティ」の使用方法を記載

CSS3／2.1

対応ブラウザ
counter-incrementプロパティ
- 概要・使用方法（スタイル）
- 指定できる値
  - カウンター名
  - 更新値
counter-resetプロパティ

対応ブラウザ

counter-incrementプロパティ

初期値	none
適用される要素	すべての要素
モジュール	Basic User Interface Module Level 3
継承	なし

概要・使用方法（スタイル）

{ counter-increment:カウンター値 更新値;}

「counter-incrementプロパティ」は、contentプロパティで指定可能なカウンター値を更新します。HTMLのリスト要素をなどを使わずに、各項目に番号を振りたい時などに使用します。

指定できる値

カウンター名

none	カウンターを更新しない場合に指定します。
カウンター名	値を更新したいカウンター名を指定します。

更新値

数値	進める数を指定します。省略すると１になります。0や負の値も指定できます。

counter-resetプロパティ

初期値	none
適用される要素	すべての要素
モジュール	Basic User Interface Module Level 3
継承	なし

概要・使用方法（スタイル）

{ counter-reset:カウンター名 リセット値 ;}

「counter-resetプロパティ」は、カウンター値をリセットします。

指定できる値（高さ）

カウンター名

none	カウンターをリセットしない場合に指定します。
カウンター名	値をリセットしたいカウンター名を指定します。

更新値

数値	リセット後の数値を指定します。省略すると0になります。負の値も指定できます。

サンプルコード

リストを一番目からカウンターするサンプル。また、リストタグの「うさpon（代走）」でカウンターをリセットしているためカウンターが2番目からスタートしている。

<!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>