counter-reset CSS プロパティとは
トピック：自動インクリメントカウンタを作成するcounter-incrementプロパティと、生成されたカウンタ値を表示するcontentプロパティと組み合わせて使用される ことができる
プロパティ counter-reset
実例 コード 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) " ";}
プロパティ 定義と使用法
| デフォルト値・初期値 : | none |
|---|
| 適用対象 : | 全要素 |
|---|
| 継承 : | 不可 |
|---|
| メディア : | all |
|---|
| 計算値 : | 指定値 |
|---|
CSS Version | CSS2 |
|---|
| Animation type : | discrete |
|---|
| JavaScript 構文 | object.style.counterReset="funWebref" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | counter-reset: none |name, number |initial |inherit; |
|---|
プロパティ値
| 値 | 説明 |
identifier | リセットするカウンタの名前。 |
integer | セレクタの各発生時にカウンタをリセットする値。デフォルトのリセット値は0です。 |
none | カウンタはリセットされないこれはデフォルト値です。 |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| 機能 | Chrome | Firefox | Internet Explorer | Opera | Safari (WebKit) |
|---|
| 基本的なサポート | 2.0 | 1.0 (不明) | 8.0 | 9.2 | 3.1 (不明) |
|---|
サポートするモバイル ブラウザ対応・互換性
| 機能 | Android | Firefox Mobile | IE Phone | Opera Mobile | Safari Mobile |
|---|
| 基本的なサポート | 不明 | 不明 | 不明 | 不明 | 不明 |
|---|
CSS counter-reset | CSS プロパティ 値| 意味 使い方 実例 – WebRef