CSSカウンター

❮ 前次 ❯

ピザ

ハンバーガー

ホットドッグ

CSSカウンターは、CSSによって維持される「変数」であり、CSSルールによって値をインクリメントできます（使用回数を追跡するため）。カウンターを使用すると、ドキュメント内の配置に基づいてコンテンツの外観を調整できます。

カウンターによる自動ナンバリング

CSSカウンターは「変数」のようなものです。変数値は、CSSルール（使用回数を追跡します）によってインクリメントできます。

CSSカウンターを操作するには、次のプロパティを使用します。

counter-reset -カウンターを作成またはリセットします
counter-increment -カウンター値をインクリメントします
content -生成されたコンテンツを挿入します
counter()またはcounters()関数-カウンタの値を要素に追加します

CSSカウンターを使用するには、最初に。を使用して作成する必要がありcounter-resetます。

次の例では、ページのカウンターを作成し（本文セレクターで）、各<h2>要素のカウンター値をインクリメントし、各<h2>要素の先頭に「セクション<カウンターの値>：」を追加します。

例

body {
counter-reset: section;
}

h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}

ネスティングカウンター

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