スタイルシートリファレンス > counter-incrementNEW
counter-increment …… 要素の連番（カウンタ）の値を進める
counter-incrementプロパティは、要素の連番（カウンタ）の値を進める際に使用します。
counter-incrementプロパティを要素に適用してカウンタ名を定義すると、ウェブページ内にその要素が現われるたびに、定義したカウンタの値が進められます。負の値を指定してカウンタを戻すことも可能です。
counter-incrementプロパティを適用する要素に:before擬似要素、:after擬似要素を付けて、contentプロパティでカウンタ名を指定してやることで、要素の直前または直後にカウンタの値を挿入することができます。
尚、Internet Explorer7以下は、counter-incrementプロパティ、counter-resetプロパティ、contentプロパティ、:before擬似要素、:after擬似要素に対応していません 。
■値
- none
- カウンタの値を進めない（初期値）
- カウンタ名
- 指定した名前のカウンタの値を1つ進める
- カウンタ名 整数値
- 半角スペースで区切って整数値を指定すると、カウンタの値がその数だけ前後する
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
dt.sample1:before {
counter-increment:sample;
content:counter(sample) "位 ";
}
h3 {counter-reset:sample;}
■HTMLソース
<html> <head> <link rel=”stylesheet” href=”sample.css” type=”text/css”> </head> <body> <h3>北海道で見たいものランキング</h3> <dl> <dt class=”sample1″>タンチョウ</dt><dd>見たこと無いから。</dd> <dt class=”sample1″>マリモ</dt><dd>話のタネに。</dd> <dt class=”sample1″>キタキツネ</dt><dd>かわいいから。</dd> </dl> <h3>北海道で食べたいものランキング</h3> <dl> <dt class=”sample1″>ウニ</dt><dd>ご飯に乗せて。</dd> <dt class=”sample1″>カニ</dt><dd>まるごとボイルで。</dd> <dt class=”sample1″>ソフトクリーム</dt><dd>夏に行くなら。</dd> </dl> </body> </html>
↓↓↓
ブラウザ上の表示
北海道で見たいものランキング
- タンチョウ
- 見たこと無いから。
- マリモ
- 話のタネに。
- キタキツネ
- かわいいから。
北海道で食べたいものランキング
- ウニ
- ご飯に乗せて。
- カニ
- まるごとボイルで。
- ソフトクリーム
- 夏に行くなら。
■関連項目
content …… 内容（コンテンツ）を挿入する
quotes …… 引用符を設定する
counter-increment …… 要素の連番（カウンタ）の値を進める
counter-reset …… 要素の連番（カウンタ）の値をリセットする
quotes …… 引用符を設定する
counter-increment …… 要素の連番（カウンタ）の値を進める
counter-reset …… 要素の連番（カウンタ）の値をリセットする
