CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS counter-reset属性の使用方法と例

counter-resetCSS属性とcounter-increment属性を組み合わせて使用し、自動的に増加するカウンタを作成し、content属性と一緒に生成されたカウンタの値を表示するために使用します。

以下の表は、この属性の使用方法とバージョンハイストリと、javascriptスクリプトでの属性の使用文法を示しています。

デフォルト値：	none
適用於：	すべての要素
継承：	ありません
アニメーション可能：	いいえ。参照してください。アニメーション属性。
バージョン：	CSS 2、3
JavaScript文法：	object.style.counterReset="section"

counter-resetの使用文法

この属性の文法は以下の通りです：

counter-reset: [ identifier integer ]　1　or more pairs | none | initial | inherit

以下の例では、counterの使用方法を示しています。-reset属性。

例

　　body {
　　　counter-reset: section;
　　}
　　h1　{
　　　counter-reset: category;
　　}
　　h1:before {
　　　counter-increment: section;
　　　content: "Section " counter(section) ". ";　　　　　
　　}
　　h2:before {
　　　counter-increment: category;
　　　content: counter(section) "." counter(category) " ";
　　}

テストしてみる‹/›

属性値

以下のテーブルはこの属性の値を説明しています。

値	説明
identifier	リセットするカウンタの名前。
integer	それぞれの表示選択子の時カウンタの値をリセットします。デフォルトのリセット値は0です。
none	カウンタがリセットされません。デフォルト値です。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のcounterを使用します。-resetの属性値。

ブラウザ互換性

counter-reset属性のブラウザの互換性、以下のテーブルの数字はこの属性をサポートするブラウザの最低バージョン番号を示します；すべての主要ブラウザがこの属性をサポートしています。

	Firefox 1.5以上 Google Chrome2+ Internet Explorer 8+ Apple Safari 3+ Opera 9.2+

警告： Internet Explorer 7およびそれ以前のバージョンではこのcounter-increment属性。IE8ただし<!DOCTYPE>有効な値が指定された場合のみサポートされます。

さらに詳しく

以下のチュートリアルを参照してください：CSS仮要素。

関連属性：content、counter-increment。

CSS cursor 属性 CSS counter-increment 属性