CSS counter-increment| CSS:スタイルシート関数要素使い方・書き方例 CSS サンプル

2018-06-20 css-reference

ページコンテンツ

▼counter-incrementCSS プロパティとは
▼ プロパティ counter-increment
▼実例コード 1
▼プロパティ定義と使用法
▼プロパティ値
▼サポートするデスクトップブラウザ対応・互換性
▼サポートするモバイルブラウザ対応・互換性

`counter-increment` CSS プロパティとは

トピック：1つ以上のカウンタ値をインクリメントすることができるこのプロパティは、自動番号付け機能を作成する場合に非常に便利

プロパティ `counter-increment`

実例コード 1

サンプルコードを試す

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) " ";
}

CSS のカウンタの値を増加させるための CSS プロパティです。カウンタの値は CSS の counter-reset プロパティを使って初期化することができる。

プロパティ定義と使用法

デフォルト値・初期値 :	`none`
適用対象 :	全要素
継承 :	不可
メディア :	all
計算値 :	指定値
`CSS Version`	`CSS2 ～`
Animation type :	discrete
JavaScript 構文	object.style.counterIncrement="funWebref";
正規順序 :	形式文法で定義される一意のあいまいでない順序
CSSの構文	`counter-increment: none \|id \|initial \|inherit;`

プロパティ値

値	説明
`identifier`	インクリメントするカウンタの名前。
`integer`	カウンタに加算する値。デフォルトのインクリメントは1です。ゼロまたは負の値が許可される
`none`	デフォルト値。カウンタはインクリメントされません
`id number`	IDは、増分するカウンタを定義します。数値は、セレクタの各オカレンスでカウンタがどれだけ増加するかを設定するデフォルトのインクリメントは1です。負の値も許可されます。idがカウンタリセットによって初期化されていないカウンタを参照する場合、デフォルトの初期値は0です
`initial`	このプロパティをデフォルト値に設定する
`inherit`	親要素からこのプロパティを継承する

サポートするデスクトップブラウザ対応・互換性

機能	Chrome	Firefox	Internet Explorer	Opera	Safari (WebKit)
基本的なサポート	2.0	1.0 (不明)	8.0	9.2	3.0 (不明)

サポートするモバイルブラウザ対応・互換性

機能	Android	Firefox Mobile	IE Phone	Opera Mobile	Safari Mobile
基本的なサポート	不明	不明	不明	不明	不明

：counter-increment 関連記事

CSS counter-increment| CSS:スタイルシート関数要素使い方・書き方例 CSS サンプル — CSS counter-increment | CSS プロパティ値| 意味使い方実例 – WebRef

タグ:

#CSS Content
#CSS プロパティ