TECH I.S.

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,".") " "; }
自分で試してみる»

CSS カウンターのプロパティ
プロパティ 説明
content 生成されたコンテンツを挿入するために、::beforeおよび::after疑似要素と共に使用されます
counter-increment 1つ以上のカウンター値をインクリメントします
counter-reset 1つ以上のカウンターを作成またはリセットします
counter() 名前付きカウンターの現在の値を返します


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細