CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

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

counter-increment CSS属性は、1つまたは複数のカウンタの値を増加させます。この属性は、自動番号機能を作成するのに非常に役立ちます。

以下のテーブルは、この属性の使用方法とバージョンハイストリと、javascriptスクリプトでの使用シンタックスの説明です。

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

counter-incrementの使用構文

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

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

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

例

　　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	カウンタに追加する値。1。0または負の値を許可します。
none	カウンタが増加しません。デフォルト値です。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のdirection属性の値を使用します。

ブラウザ互換性

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

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

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

さらに詳しく

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

関連属性：content、counter-reset。

CSS counter-reset 属性 CSS content 属性