CSS カウンター
ピザ
ハンバーガー
ホットドッグ
CSSカウンターは、CSS によって維持される「変数」であり、その値は CSSルールによってインクリメントできます(使用回数を追跡するため)。カウンターを使用すると、ドキュメント内の配置に基づいてコンテンツの外観を調整できます。
カウンターによる自動ナンバリング
CSSカウンターは「変数」のようなものです。変数値は、CSSルール(使用回数を追跡する)によってインクリメントできます。
CSSカウンターを操作するには、次のプロパティを使用します。
-
counter-reset
- カウンターを作成またはリセットします -
counter-increment
- カウンター値をインクリメントします -
content
- 生成されたインサートコンテンツ -
counter()
またはcounters()
関数 - カウンターの値を要素に追加します
CSSカウンターを使用するには、まずcounter-reset
を使用してCSSカウンターを作成する必要があります。
次の例では、ページのカウンター(本文セレクター内)を作成し、各<h2>要素のカウンター値をインクリメントし、各<h2>要素の先頭に「セクション<カウンターの値>:"」を追加します。
例
body {
count-reset: section;
}
h2::before{
counter-increment: section;
content: "Section " counter(section) ": ";
}
自分で試してみる»ネスティングカウンター
次の例では、ページ(section)と<h1>要素(subsection)ごとに1つのカウンターを作成します。 "section "カウンターは、"section <セクション・カウンターの値>. "を持つ<h1>要素ごとにカウントされ、"subsection "カウンターは、"<セクション・カウンターの値>.<サブセクション・カウンターの値>"を持つ<h2>要素ごとにカウントされます:
例
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before{
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
自分で試してみる»カウンタの新しいインスタンスが子要素内に自動的に作成されるため、カウンタはアウトラインリストを作成するのにも役立ちます。ここでは、counters()関数を使用して、ネストされたカウンターの異なるレベルの間に文字列を挿入します。
例
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counter(section,".") " ";
}
自分で試してみる»CSS カウンターのプロパティ
プロパティ | 説明 |
---|---|
content | 生成されたコンテンツを挿入するために、::beforeおよび::after疑似要素と共に使用されます |
counter-increment | 1つ以上のカウンター値をインクリメントします |
counter-reset | 1つ以上のカウンターを作成またはリセットします |
counter() | 名前付きカウンターの現在の値を返します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。