CSSカウンターはcounter-resetとcounter-incrementで見出し番号を自動更新する

header logo

CSSカウンターはcounter-resetとcounter-incrementで見出し番号を自動更新する

公開日：2015年6月13日執筆：佐藤

contentプロパティ counter-increment counter-reset

CSSで見出しへ連番を付けるには、番号を始める要素へcounter-reset、繰り返す見出しへcounter-increment、番号を表示する:beforeへcontent: counter()を指定します。

役割は三つです。counter-resetは番号の範囲と初期値を決めます。counter-incrementは対象が現れるたびに番号を増やします。counter()は現在の番号を文字として表示します。

counter-resetは繰り返す見出しの外側へ置く

説明用の仮例として、記事内のh2へ「1.」「2.」と番号を付けます。

<article class="manual">
  <h2>申込み前の確認</h2>
  <h2>必要事項の入力</h2>
  <h2>送信後の連絡</h2>
</article>

.manual {
  counter-reset: section;
}

.manual h2 {
  counter-increment: section;
}

.manual h2:before {
  content: counter(section) ". ";
}

W3CのCSS 2.1では、自動番号をcounter-resetとcounter-incrementで制御し、その値をcontentのcounter()またはcounters()で使うと定めています。

値を省略したcounter-reset: sectionは、sectionを0へ戻します。値を省略したcounter-increment: sectionは、対象が現れるたびに1を加えます。最初のh2では0を1へ増やしてから表示するため、番号は1から始まります。

すべて1になるときはresetの位置を確かめる

次の指定では、各h2が現れるたびに番号を0へ戻し、その後で1を加えます。見出しがすべて「1.」になる原因です。

.manual h2 {
  counter-reset: section;
  counter-increment: section;
}

連番を記事全体で続けるなら、resetは繰り返すh2ではなく、共通の親要素へ置きます。記事ごとに番号を1から始めたいなら、各記事の親要素でresetします。どこからどこまで同じ番号を共有するかを決めてから、resetする要素を選んでください。

counter-resetを別々の宣言へ分けると、cascadeによって後の宣言が前を置き換えます。二つのcounterを同じ要素で始めるなら、一つの宣言へ並べます。

.manual {
  counter-reset: chapter section;
}

見出しの階層は親番号と子番号を分ける

章をh2、節をh3にするなら、章番号と節番号を別のcounterにします。新しい章へ進むたび、節番号だけを0へ戻します。

.manual {
  counter-reset: chapter;
}

.manual h2 {
  counter-increment: chapter;
  counter-reset: section;
}

.manual h3 {
  counter-increment: section;
}

.manual h2:before {
  content: counter(chapter) ". ";
}

.manual h3:before {
  content: counter(chapter) "." counter(section) " ";
}

この指定なら、一章の節は「1.1」「1.2」と進み、次の章で「2.1」から始まります。番号をHTMLへ一件ずつ書かないため、途中へ見出しを追加しても、後続番号を手で直す必要がありません。