Documentation CSS

この記事で学べること

  • counter-setプロパティの概念と目的
  • カウンター値の直接設定方法
  • counter-resetとの違い
  • 逆順カウンターの作成
  • 番号の飛び飛び設定の実装

概要

CSSのcounter-setプロパティは、【カウンタ】の値を直接設定するために使用されます。これにより、要素内のカウンタを任意の値に変更することができます。主にリストの項目番号やセクションの番号付けなどに用いられます。

counter-setの基本構文

selector {
  counter-set: counter-name value;
}
  • counter-name
    設定するカウンタの名前です。
  • value
    カウンタの新しい値を指定します。

使用例

基本的な使用例 - カウンタの設定

以下の例では、counter-setを使って、リスト項目の番号をカスタマイズしています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>counter-setの使用例</title>
    <style>
      body {
        counter-reset: section; /* カウンタをリセット */
      }
      h2 {
        counter-increment: section; /* セクションカウンタをインクリメント */
      }
      h2::before {
        content: "セクション " counter(section) ": "; /* セクション番号を表示 */
      }
      .custom-counter {
        counter-set: section 5; /* セクションカウンタを5に設定 */
      }
    </style>
  </head>
  <body>
    <h2>通常のセクション</h2>
    <p>これは通常のセクションです。</p>
    <h2 class="custom-counter">カスタムセクション</h2>
    <p>このセクションはカウンタが5に設定されています。</p>
    <h2>次のセクション</h2>
    <p>このセクションはカウンタの設定が続いています。</p>
  </body>
</html>

解説

この例では、bodyでcounter-resetを使用してセクションカウンタをリセットし、h2タグでcounter-incrementを用いてカウンタを増加させています。h2に::before疑似要素を使ってカウンタの値を表示しています。 さらに、.custom-counterクラスにcounter-setを適用することで、特定のセクションのカウンタ値を5に設定しています。これにより、通常のカウンタの流れを中断して、指定した値からカウントを開始することができます。

応用例 - 逆順カウンタの設定

counter-setを使うことで、逆順のカウンタを作成することもできます。以下の例では、カウンタを10から始めて逆にカウントダウンします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>逆順カウンタの使用例</title>
    <style>
      body {
        counter-reset: countdown 10; /* カウンタを10にリセット */
      }
      .item {
        counter-increment: countdown -1; /* カウントダウン */
      }
      .item::before {
        content: "カウント: " counter(countdown); /* カウント表示 */
      }
      .set-counter {
        counter-set: countdown 5; /* カウンタを5に設定 */
      }
    </style>
  </head>
  <body>
    <div class="item">アイテム1</div>
    <div class="item set-counter">アイテム2 - カウンタを5に設定</div>
    <div class="item">アイテム3</div>
  </body>
</html>

解説

この例では、counter-resetでカウンタを10にリセットし、counter-incrementでカウントダウンを行っています。特定の要素にはcounter-setを適用して、カウンタを任意の値（5）に再設定することで、カウントの流れを変更しています。

counter-setの注意点

  • カウンタの存在が前提
    counter-setを使用するためには、まずcounter-resetでカウンタが初期化されている必要があります。これが行われていない場合、設定するカウンタが見つからないことになります。

  • 組み合わせの重要性
    counter-setは、単独で使用されることは稀で、通常はcounter-resetやcounter-incrementと組み合わせて使用されます。カウンタのリセット、インクリメント、設定が一連の流れで行われることを意識しましょう。

  • 複雑な番号付けが可能
    counter-setを使うことで、簡単にカウンタをカスタマイズでき、通常の連続的なカウントの他に、飛び飛びの番号付けや特定の値からのカウントも可能です。

まとめ

counter-setプロパティは、CSSでカウンタの値を直接設定するための強力なツールです。このプロパティを使うことで、カウンタの制御がより柔軟になり、リストやセクションの番号付けに新たな可能性が広がります。ぜひ、counter-resetやcounter-incrementと組み合わせて、様々な場面で活用してみてください。

ポイントの振り返り

値説明例
noneカウンターを設定しないデフォルト
<name> <integer>指定値に設定counter-set: section 5

関連プロパティ

プロパティ説明
counter-resetカウンターの初期化
counter-incrementカウンターの増加
counter()カウンター値の表示

参考文献

円