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

CSSのcounter-incrementプロパティの使い方を解説

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

counter-incrementプロパティの基本

counter-incrementプロパティは、通常counter-resetプロパティと組み合わせて使用します。counter-resetでカウンターを初期化し、counter-incrementで値を1ずつ増やしていきます。また、::before疑似要素とcontentプロパティを使うことで、カウンターの値を実際に画面に表示できます。

実装例

以下のコードは、h2要素が現れるたびにカウンターの値を増加させ、「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>

コードの解説

  • counter-reset: section; — body要素に対して「section」という名前のカウンターを0に初期化します。
  • counter-increment: section; — h2要素が出現するたびに、カウンターの値を1つ増やします。
  • content: "Fruit " counter(section) " - "; — h2要素の前に「Fruit 1 - 」のようなテキストを挿入して表示します。

このコードを実行すると、「Mango」の前には「Fruit 1 -」、「Kiwi」の前には「Fruit 2 -」が自動的に表示されます。手動で番号を記述する必要がないため、項目の追加や削除があっても番号が自動的に更新される点が大きなメリットです。

  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