トップページ > スタイルシートリファレンス > counter-increment

★スタイルシートリファレンス

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 …… 要素の連番(カウンタ)の値をリセットする
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ