counter-incrementを使いこなして、オリジナリティ溢れるデザインを実現しよう！

CSSのcounter-incrementプロパティは、要素ごとに連番を自動で生成するための強力な機能です。主に、リスト項目のナンバリングや、目次、脚注などの番号付けなどに活用されます。

本ガイドでは、counter-incrementの仕組み、設定方法、そして実践的な応用例まで、詳細かつ分かりやすく解説します。

仕組み

1. カウンター変数の定義
   まず、counter-resetプロパティを使用して、カウンター変数を定義します。この変数は、連番の初期値と名前を指定します。

   body { counter-reset: my-counter 1; } /* 名前: "my-counter", 初期値: 1 */
   

2. カウンターの増減
   次に、counter-incrementプロパティを使用して、カウンター変数の値を操作します。

   • 要素ごとに値を増加させるには、正の数を指定します。
   • 要素ごとに値を減少させるには、負の数を指定します。

   li { counter-increment: my-counter 1; } /* "my-counter" を 1 ずつ増加 */
   

3. カウンター値の表示
   最後に、contentプロパティや::before疑似要素などを活用して、カウンター値を要素内に表示します。

   li::before { content: counter(my-counter) ". "; } /* "my-counter" の値と "." を表示 */
   

設定方法

1. カウンター変数の定義
   

   • counter-resetプロパティを使用します。
   • 構文は以下の通りです。

   counter-reset: <カウンター名> <初期値>;
   

   • <カウンター名>: 好き な英名で構いません。
   • <初期値>: 連番の開始値を指定します。省略可。デフォルトは 1 です。

2. カウンターの増減
   

   • counter-incrementプロパティを使用します。
   • 構文は以下の通りです。

   selector { counter-increment: <カウンター名> <増減値>; }
   

   • <カウンター名>: 操作対象のカウンター名を指定します。
   • <増減値>: カウンターの増減値を指定します。正の値で増加、負の値で減少します。省略可。デフォルトは 1 です。

3. カウンター値の表示
   

   • contentプロパティや::before疑似要素などを活用します。
   • counter()関数を使用して、カウンター値を取得できます。

   selector::before { content: counter(<カウンター名>) [フォーマット]; }
   

   • [フォーマット]: カウンター値の表示形式を自由に設定できます。詳細は後述します。

実践例

1. ベーシックなリストナンバリング
   

   ol {
       counter-reset: item-counter 1; /* カウンター変数定義 */
   }
   ol li {
       counter-increment: item-counter 1; /* カウンター増加 */
       list-style-type: none; /* デフォルトのマーカー非表示 */
       padding-left: 2em; /* 左余白設定 */
   }
   ol li::before {
       content: counter(item-counter) ". "; /* カウンター値表示 */
   }
   

2. 目次付き見出し
   

   h1, h2, h3 {
       counter-reset: heading-counter 0; /* 各見出しレベルごとに初期化 */
   }
   h1 {
       counter-increment: heading-counter 1; /* H1 は +1 */
   }
   h2 {
       counter-increment: heading-counter 2; /* H2 は +2 */
   }
   h3 {
       counter-increment: heading-counter 3; /* H3 は +3 */
   }
   h1::before, h2::before, h3::before {
       content: counter(heading-counter, h1) ". "; /* 見出しレベルとカウンター値表示 */
   }
   

3. 脚注の自動振り分け
   

   p {
       counter-reset: footnote-counter; /* 各
   

---

ベーシックなリストナンバリング

ol {
  counter-reset: item-counter 1;
}

ol li {
  counter-increment: item-counter 1;
  list-style-type: none;
  padding-left: 2em;
}

ol li::before {
  content: counter(item-counter) ". ";
}

このコードは、シンプルな数字リストを作成します。

箇条書き付きリスト

ul {
  counter-reset: item-counter 1;
}

ul li {
  counter-increment: item-counter 1;
  list-style-type: disc; /* 箇条書き記号を使用 */
  padding-left: 2em;
}

ul li::before {
  content: counter(item-counter) " ";
}

このコードは、箇条書き付きリストを作成します。

章節付き見出し

h1, h2, h3 {
  counter-reset: heading-counter 0;
}

h1 {
  counter-increment: heading-counter 1;
}

h2 {
  counter-increment: heading-counter 2;
}

h3 {
  counter-increment: heading-counter 3;
}

h1::before, h2::before, h3::before {
  content: counter(heading-counter, h1) ". ";
}

このコードは、章節番号付きの見出しを作成します。

脚注の自動振り分け

p {
  counter-reset: footnote-counter;
}

p a[href^="#"]:before {
  counter-increment: footnote-counter 1;
  content: counter(footnote-counter) "[";
}

p a[href^="#"]:after {
  content: "] ";
}

このコードは、ページ内リンク付きの脚注を自動で振り分けます。

デザインカスタマイズ

• 疑似要素を装飾して、アイコンや画像を表示する
• カウンター値と区切り文字のフォーマットを調整する
• フォントスタイルやサイズを変更する

これらのカスタマイズにより、オリジナリティ溢れるナンバリングを作成することができます。

• 複雑なデザインや機能を実装する場合は、上級者向けの資料や情報も参照することをおすすめします。
• 詳細な CSS セレクタやプロパティの書き方は、ご自身の環境に合わせて設定してください。

---

CSSのcounter-incrementプロパティは、要素ごとに連番を自動生成する便利な機能ですが、いくつかの課題もあります。

• アクセシビリティ
  視覚障害者にとって、画面読み上げソフトなどで番号を認識しにくくなる場合があります。
• ブラウザ互換性
  古いブラウザでは完全な動作が保証されない場合があります。
• 複雑な構造
  複数のカウンター変数を管理する必要がある場合、構造が複雑になりやすく、メンテナンスが大変になります。

これらの課題を克服するために、代替方法を検討する場面も出てきます。以下では、状況に応じて検討できる代替方法をいくつか紹介します。

代替方法

1. • HTMLElement.insertAdjacentHTML()やdocument.createElement()などのメソッドを使用して、要素を動的に生成し、連番を付与します。
   • 利点: 柔軟性が高く、複雑なデザインや機能にも対応できます。
   • 欠点: JavaScriptの知識が必要となり、実装コストやメンテナンスコストが高くなる可能性があります。

2. ライブラリの利用
   

   • jquery.counterやnumberize.jsなどのライブラリを使用することで、counter-incrementのような機能を簡単に実現できます。
   • 利点: 開発工数を削減でき、メンテナンスも容易になります。
   • 欠点: ライブラリの読み込みが必要となり、ページの読み込み速度が遅くなる可能性があります。

3. 属性の付与
   

   • 要素ごとに連番を表すカスタム属性を付与し、JavaScriptで処理します。
   • 利点: 比較的シンプルな実装で、アクセシビリティにも配慮しやすいです。
   • 欠点: JavaScriptの知識が必要となり、counter-incrementほど柔軟な機能は実現できない可能性があります。

4. 画像の利用
   

   • 連番を画像として用意し、要素内に挿入します。
   • 利点: 確実な表示が可能です。
   • 欠点: デザインの自由度が低く、アクセシビリティにも配慮しにくいという問題があります。

• 適切な代替方法は、デザイン要件、開発リソース、アクセシビリティなどの要件を総合的に考慮して決定する必要があります。
• 上記以外にも、状況に応じて様々な代替方法が考えられます。

考察