counter-reset
Home>CSS>プロパティリファレンス>counter-repeat
counter-resetプロパティの役割
counter-resetプロパティは、contentプロパティにおいてカウントに使用した変数の値を初期化します。
counter-resetプロパティに設定できる値
none | 変数の初期化を行わない。 |
変数名 | 指定した変数の値を0にする。 |
変数名 整数値 | 指定した変数の値を指定した値にする。 |
counter-resetプロパティの使い方
<style type="text/css">
.count{
counter-increment:count 1;
counter-reset:count2;
}
.count:after{
content:" [" counter(count) "] ";
}
.count2{
counter-increment:count2;
margin-left:20px;
}
.count2:after{
content:" [" counter(count2) "] ";
}
</style>
<p class="count">項目</p>
<p class="count2">項目1の内容</p>
<p class="count2">項目1の内容</p>
<p class="count">項目</p>
<p class="count2">項目2の内容</p>
<p class="count2">項目2の内容</p>
項目
項目1の内容
項目1の内容
項目
項目2の内容
項目2の内容
上のサンプルでは、項目が変わるごとに、内容のカウントがリセットされています。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-7-29