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

自分で試してみる»

ネスティングカウンター

次の例では、ページ(セクション)に1つのカウンターと、各lt;h1>要素(サブセクション)に1つのカウンターを作成します。「section」カウンターは、「セクション<_セクションカウンターの値_>.」、「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,".") " "; }

自分で試してみる»