プログラミング

CSSカウンターの使い方

最終更新： 23/04/2025
1 分の読み

CSSカウンター（CSS Counters）は、HTMLの要素に自動的に番号を付けるための強力な手法です。特に、リストや段落、セクションの番号を手軽に生成したい場合に非常に役立ちます。この方法を使用すると、ページ内で一貫した番号付けが簡単に実現でき、特に長いドキュメントや手順書などで有効です。本記事では、CSSカウンターを使った画像やリストの自動番号付け方法について、具体例を交えながら詳細に解説します。

CSSカウンターとは？

CSSカウンターは、CSSのプロパティを利用して、要素に番号を付けるための仕組みです。通常、リストアイテムやセクションの番号付けには、手動で番号を入力する必要がありますが、CSSカウンターを使えば、この作業を自動化することができます。これにより、HTMLを変更せずに、番号付けのスタイルを変更したり、番号を追加したりすることが可能になります。

関連記事

CSSカウンターの基本的な使い方

CSSカウンターを使用するためには、いくつかのステップを踏む必要があります。以下に、基本的な設定方法を説明します。

1. カウンターの作成

まず、カウンターを作成します。counter-resetプロパティを使って、カウンターの初期値を設定します。これにより、カウンターをリセットすることができます。

css
/* カウンターを初期化 */
body {
  counter-reset: section;
}

ここで、sectionはカウンターの名前です。複数のカウンターを使用する場合は、異なる名前を付けることができます。

2. カウンターのインクリメント

次に、カウンターをインクリメント（増加）させるために、counter-incrementプロパティを使用します。このプロパティを使用することで、指定した要素ごとにカウンターの値を増やすことができます。

css
/* 各sectionに番号を付ける */
h2 {
  counter-increment: section;
}

上記のCSSは、h2要素に番号を付けるための設定です。counter-increment: section;と指定することで、各h2タグが表示されるたびに、sectionというカウンターが1ずつ増加します。

3. 番号の表示

最後に、カウンターの値を表示するために、contentプロパティを使用します。これにより、指定した位置にカウンターの値を表示することができます。

css
/* 番号を表示する */
h2::before {
  content: counter(section) ". ";
}

この設定により、h2タグの前に、sectionカウンターの値（番号）が表示されます。例えば、ページ内に複数のh2タグがある場合、それぞれに番号が付与されます。

画像に対するカウンターの使用

CSSカウンターを画像に適用することも可能です。例えば、複数の画像に番号を付ける場合、以下のように設定できます。

1. 画像に番号を付ける

css
/* 画像のカウンターをリセット */
section {
  counter-reset: image;
}

/* 各画像に番号を付ける */
img {
  counter-increment: image;
  display: block;
  margin-bottom: 10px;
}

/* 番号を画像の前に表示 */
img::before {
  content: "画像 " counter(image) ": ";
  font-weight: bold;
}

この設定では、section内の各画像に番号を付け、画像の前に「画像 1:」「画像 2:」のように番号を表示します。これにより、画像に対するカスタム番号付けが実現できます。

CSSカウンターを使ったリストの自動番号付け

CSSカウンターは、リストにも簡単に適用できます。以下は、リスト項目に自動で番号を付ける方法です。

1. 番号付きリストの作成

css
/* リスト内のカウンターをリセット */
ul {
  counter-reset: list;
}

/* 各リスト項目に番号を付ける */
li {
  counter-increment: list;
  list-style-type: none; /* デフォルトの番号付けを無効にする */
}

/* 番号をリスト項目の前に表示 */
li::before {
  content: counter(list) ". ";
  font-weight: bold;
}

このコードでは、ul内のli要素に対してカウンターをインクリメントし、リスト項目の前に番号を付けるようにしています。これにより、リスト項目に自動的に番号が付けられ、番号付けを手動で行う必要がなくなります。

複数のカウンターを使った応用例

CSSでは、複数のカウンターを同時に使用することも可能です。例えば、階層的なリスト（入れ子になったリスト）に番号を付ける場合、親リストと子リストで異なるカウンターを使用することができます。

css
/* 親リストのカウンターをリセット */
ul {
  counter-reset: parent-list;
}

/* 子リストのカウンターをリセット */
ul ul {
  counter-reset: child-list;
}

/* 親リストの項目に番号を付ける */
ul > li {
  counter-increment: parent-list;
}

/* 子リストの項目に番号を付ける */
ul ul > li {
  counter-increment: child-list;
}

/* 親リストの番号を表示 */
ul > li::before {
  content: counter(parent-list) ". ";
  font-weight: bold;
}

/* 子リストの番号を表示 */
ul ul > li::before {
  content: counter(parent-list) "." counter(child-list) ". ";
  font-weight: bold;
}

このコードでは、親リストと子リストでそれぞれ異なるカウンターを使用し、親リストの項目には親番号を、子リストの項目には親番号と子番号を組み合わせて表示しています。この方法を使えば、階層的なコンテンツに番号を付けることが簡単にできます。

まとめ

CSSカウンターは、リストやセクション、画像などに自動的に番号を付けるための非常に強力なツールです。CSSだけで番号付けを管理できるため、HTMLの構造を変更せずにスタイルを変更することができ、非常に柔軟です。また、複数のカウンターを組み合わせて使うことで、より複雑な番号付けにも対応できます。

番号付けを自動化することで、ページの可読性や整理整頓が向上し、特に長いドキュメントや手順書においてその利便性を感じることができるでしょう。CSSカウンターを活用して、より効率的なウェブデザインを実現してみてください。

最終更新： 23/04/2025
1 分の読み
Back to top button