CSSカウンターインクリメントプロパティ
例
カウンター( "my-sec-counter")を作成し、<h2>セレクターが出現するたびにカウンターを1つずつ増やします。
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: "Section "
counter(my-sec-counter) ". ";
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
このcounter-increment
プロパティは、1つ以上のCSSカウンターの値を増減します。
このプロパティは通常、 counter-resetプロパティおよび
contentcounter-increment
プロパティと一緒に使用され
ます。
デフォルト値: | なし |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS2 |
JavaScript構文: | object .style.counterIncrement = "subsection"; |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS構文
counter-increment: none|id|initial|inherit;
プロパティ値
Value | Description |
---|---|
none | Default value. No counters will be incremented |
id number | The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial value is 0 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
カウンター( "my-sec-counter")を作成し、<h2>セレクターが出現するたびにカウンターを1つずつ減らします。
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
例
「セクション1:」、「1.1」、「1.2」などのセクションとサブセクションの番号付け:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
例
カウンターを作成し、<h2>セレクターが出現するたびにカウンターを1つずつ増やします(ローマ数字を使用)。
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
関連ページ
CSSリファレンス:::疑似要素の前
CSSリファレンス:::疑似要素の後
CSSリファレンス:コンテンツプロパティ
CSSリファレンス:counter-resetプロパティ
CSS関数:counter()関数
HTML DOMリファレンス:counterIncrementプロパティ