WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > counter-increment
counter-increment  リスト 

要素の連番（カウンタ）の値を進める。

このエントリーをはてなブックマークに追加

IE7以下は、counter-incrementプロパティ、counter-resetプロパティ、contentプロパティ、:before擬似要素、:after擬似要素に否対応。

counter-incrementプロパティは、要素の連番（カウンタ）の値を進める際に使用します。このプロパティを使用する場合は :before擬似要素、:after擬似要素使用します。

CSS

dt.count:before {
counter-increment:cnt;
content:counter(cnt) "位　";
}
h3.count {
counter-reset:cnt;
}

HTML

<h3 class="count">北海道人気スポット</h3>
<dl>
<dt class="count">旭山動物園</dt><dd>日本有数の動物園。</dd>
<dt class="count">函館山</dt><dd>日本三大夜景の一つ。</dd>
<dt class="count">JRタワー展望室T38</dt><dd>札幌駅から直結。</dd>
</dl>
<h3 class="count">長崎人気スポット</h3>
<dl>
<dt class="count">稲佐山</dt><dd>日本三大夜景の一つ。</dd>
<dt class="count">長崎ペンギン水族館</dt><dd>かわいいペンギンがたくさん。</dd>
<dt class="count">グラバー園</dt><dd>長崎観光の定番！</dd>
<dt class="count">軍艦島</dt><dd>かつては炭鉱として栄えた島。</dd>
</dl>

北海道人気スポット

旭山動物園
日本有数の動物園。
函館山
日本三大夜景の一つ。
JRタワー展望室T38
札幌駅から直結。

長崎人気スポット

稲佐山
日本三大夜景の一つ。
長崎ペンギン水族館
かわいいペンギンがたくさん。
グラバー園
長崎観光の定番！
軍艦島
かつては炭鉱として栄えた島。