CSS プロパティ counter-increment

CSS counter-increment 属性詳解：リストの自動番号付けを簡単に実現

CSS counter-increment 属性詳解：リストの自動番号付けを簡単に実現

この記事では、CSS の `counter-increment` 属性について詳しく解説します。`counter-increment` 属性を使用すると、カスタムカウンターを作成および制御し、リストアイテムの自動番号付けに利用することができます。構文、値、使用例、一般的な適用シナリオなどを網羅し、この強力なツールの習得を支援します。

目次

  1. `counter-increment` 属性とは？
  2. `counter-increment` 属性の構文
  3. `counter-increment` 属性を使用した自動番号付きリストの作成
  4. `counter-increment` 属性の適用シナリオ
  5. 注意点
  6. ブラウザの互換性
  7. まとめ
  8. 関連リンク
  9. よくある質問

1. `counter-increment` 属性とは？

`counter-increment` 属性は、1 つ以上のカウンターの値を増加させるために使用されます。カウンターは、リストアイテムに自動的に番号を付けるために使用されます。

`counter-increment` 属性と `counter-reset` 属性の違いは、前者がカウンターを増加させるために使用されるのに対し、後者はカウンターをリセットするために使用されることです。

2. `counter-increment` 属性の構文

`counter-increment` 属性の構文は以下のとおりです。 


counter-increment: [ <custom-ident> <integer>? ]+ | none;
  • <custom-ident>：増加させるカウンターの名前です。
  • <integer>：オプションのパラメータで、増加させる値を表します。デフォルト値は 1 です。負の値を指定することもできます。
  • none：カウンターを増加させません。

3. `counter-increment` 属性を使用した自動番号付きリストの作成

`counter-increment` 属性を使用して、簡単な順序付きリストを作成し、番号付けのスタイルをカスタマイズする方法の例を以下に示します。

例1：1 から始まる番号付きリストを作成する


<ol>
    <li>リストアイテム 1</li>
    <li>リストアイテム 2</li>
    <li>リストアイテム 3</li>
</ol>


ol {
  counter-reset: item; /* カウンターをリセットする */
  list-style: none; /* デフォルトのリストスタイルを削除する */
}

li {
  counter-increment: item; /* カウンターを増加させる */
}

li::before {
  content: counter(item) ". "; /* 番号とピリオドを表示する */
}

例2：5 から始まり、2 ずつ増加する番号付きリストを作成する


<ol>
    <li>リストアイテム 1</li>
    <li>リストアイテム 2</li>
    <li>リストアイテム 3</li>
</ol>


ol {
  counter-reset: item 4; /* カウンターを 4 にリセットする */
  list-style: none; /* デフォルトのリストスタイルを削除する */
}

li {
  counter-increment: item 2; /* カウンターを 2 ずつ増加させる */
}

li::before {
  content: counter(item) ". "; /* 番号とピリオドを表示する */
}

4. `counter-increment` 属性の適用シナリオ

`counter-increment` 属性の一般的な適用シナリオを以下に示します。

多レベルの番号付きリストの作成

`counter-reset` 属性と `counter()` 関数を組み合わせて、章や節の番号付けなど、ネストされた番号付きリストを作成することができます。 


<h1>章 1</h1>
<ol>
  <li>セクション 1.1</li>
  <li>セクション 1.2
    <ol>
      <li>セクション 1.2.1</li>
      <li>セクション 1.2.2</li>
    </ol>
  </li>
</ol>


ol {
  counter-reset: section;
  list-style: none;
}

li {
  counter-increment: section;
}

h1::before {
  counter-reset: chapter;
  content: "章 " counter(chapter) ": ";
}

li::before {
  content: counters(section, ".") " ";
}

リストアイテムの番号付け形式のカスタマイズ

`counter()` 関数と `::before` または `::after` 疑似要素を使用して、リストアイテムの番号付け形式をカスタマイズすることができます。たとえば、章番号を追加したり、ローマ数字を使用したりすることができます。 


<ol>
    <li>リストアイテム 1</li>
    <li>リストアイテム 2</li>
    <li>リストアイテム 3</li>
</ol>


ol {
  counter-reset: item;
  list-style: none;
}

li {
  counter-increment: item;
}

li::before {
  content: "第" counter(item, upper-roman) "章 ";
}

非標準のカウンター動作の実装

`counter-increment` 属性を使用して、特定の条件に基づいてカウンターを増加または減少させるなど、非標準のカウンター動作を実装することができます。

5. 注意点

`counter-increment` 属性を使用する際の注意点を以下に示します。

  • カウンターのスコープ
  • `counter-increment` 属性と `counter-reset` 属性の併用

6. ブラウザの互換性

`counter-increment` 属性は、すべての主要なブラウザでサポートされています。

ブラウザ バージョン
Chrome 4+
Firefox 3.6+
Internet Explorer 8+
Edge 12+
Safari 5.1+
Opera 11.6+

古いブラウザとの互換性を確保するには、JavaScript のポリフィルを使用することを検討してください。

7. まとめ

`counter-increment` 属性は、リストアイテムの自動番号付けに非常に便利な CSS 属性です。この記事では、`counter-increment` 属性の基本的な使い方から応用的な使い方まで解説しました。是非、実際のプロジェクトで活用してみてください。

  • <a href="https://developer.mozilla.org/ja/docs/Web/CSS/counter-reset">`counter-reset`</a>
  • <a href="https://developer.mozilla.org/ja/docs/Web/CSS/counter">`counter()`</a>
  • <a href="https://developer.mozilla.org/ja/docs/Web/CSS/counters">`counters()`</a>

9. よくある質問

Q1. `counter-increment` 属性でカウンターを減少させることはできますか？

A1. はい、`counter-increment` 属性で負の値を指定することでカウンターを減少させることができます。

Q2. `counter-increment` 属性で複数のカウンターを同時に増加させることはできますか？

A2. はい、`counter-increment` 属性で複数のカウンターをスペース区切りで指定することで、複数のカウンターを同時に増加させることができます。

Q3. `counter-increment` 属性は、どのような要素に適用できますか？

A3. `counter-increment` 属性は、すべての表示レベルの要素に適用できます。