CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのcounter-resetプロパティとは？カウンターの作成・リセット方法を実例で解説

counter-resetプロパティとは

CSSでカウンターを作成したり、値をリセットしたりするには、counter-resetプロパティを使用します。このプロパティは、見出しやリストなどに自動的に連番を付与したい場合に非常に便利です。

counter-resetは単体では機能せず、通常は以下のプロパティと組み合わせて使います。

  • counter-reset: カウンターを作成し、初期値（デフォルトは0）を設定する
  • counter-increment: カウンターの値を増加させる
  • content + counter()関数: カウンターの現在の値を表示する

基本的なコード例

以下のコードでは、body要素に対して「section」という名前のカウンターを作成し、h2要素が現れるたびにカウンターを1ずつ増やして、「Fruit 1 -」「Fruit 2 -」のように番号を自動表示しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            counter-reset: section;
         }
         h2::before {
            counter-increment: section;
            content: "Fruit " counter(section) " - ";
         }
      </style>
   </head>
   <body>
      <h1>Fruits</h1>
      <h2>Mango</h2>
      <h2>Kiwi</h2>
   </body>
</html>

実行結果

上記のコードをブラウザで表示すると、次のように出力されます。

Fruit 1 - Mango
Fruit 2 - Kiwi

ポイント解説

counter-reset: section; を body に指定することで、ページ全体で使用できるカウンター「section」が作成され、値は0に初期化されます。その後、h2::before 疑似要素内で counter-increment: section; を呼び出すことで、h2要素が出現するたびにカウンターが1ずつ増加します。

また、counter-resetは任意の初期値を指定することも可能です。例えば counter-reset: section 5; と記述すれば、カウンターは5から始まります。

章立てされたドキュメントや目次、手順リストなど、番号付きのコンテンツをHTML側のマークアップ変更なしに自動生成できるため、メンテナンス性の高いスタイリングが実現できます。

  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのscroll-behaviorプロパティとは？使い方とスムーススクロールの実装例

    CSSのscroll-behaviorプロパティは、ページ内リンクやアンカー移動時などにおけるスクロールの挙動（動作）を制御するために使用します。このプロパティを活用することで、JavaScriptに頼ることなく、CSSだけで滑らかなスムーススクロールを実現できます。scroll-behaviorプロパティに指定できる値scroll-behavior: auto | smooth | initial | inherit;auto：ブラウザのデフォルト動作。リンク先へ即座にジャンプします。smooth：滑らかなアニメーション付きでスクロールして移動します。initial：プロパティを初期値（au