|
トップページ > スタイルシートリファレンス > counter-increment
★スタイルシートリファレンス
|
counter-increment･････要素の連番（カウンタ）の値を進める
counter-incrementプロパティは、要素の連番（カウンタ）の値を進める際に使用します。 counter-incrementプロパティを要素に適用してカウンタ名を定義すると、ウェブページ内にその要素が現われるたびに、定義したカウンタの値が進められます。負の値を指定してカウンタを戻すことも可能です。 counter-incrementプロパティを適用する要素に:before擬似要素、:after擬似要素を付けて、contentプロパティでカウンタ名を指定してやることで、要素の直前または直後にカウンタの値を挿入することができます。 尚、Internet Explorer7以下は、counter-incrementプロパティ、counter-resetプロパティ、contentプロパティ、:before擬似要素、:after擬似要素に対応していません 。 ■値
■使用例スタイルシート部分は外部ファイル（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-increment
|
©2012 HTMQ