|
トップページ > スタイルシートリファレンス > counter-reset
★スタイルシートリファレンス
|
counter-reset･････要素の連番（カウンタ）の値をリセットする
counter-resetプロパティは、要素の連番（カウンタ）の値をリセットする際に使用します。 counter-resetプロパティを適用した要素が現われるたびに、指定した名前のカウンタの値が0にリセットされます。また、カウンタ名の後にスペース区切りで整数値を指定すると、カウンタの値がその数にリセットされます。 ■値
■使用例スタイルシート部分は外部ファイル（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････････････要素の連番（カウンタ）の値をリセットする |
トップページ > スタイルシートリファレンス > counter-reset
|
©2012 HTMQ