CSS

CSS's counters() is a function that automatically assigns hierarchical numbering to nested elements within a webpage.

counters() [function]

　counters()関数は、Webページ上で自動的に数値をカウントアップするのに使用します。この機能は特にリストや章番号を自動で整理する際に役立ちます。

　CSSには counter-resetと counter-incrementというプロパティがあり、これらを使って特定の要素にカウンターを設定し、増加させることができます。counters()関数は、ネストされたリスト（入れ子になったリスト）などで連番を付ける際に特に有用です。counter()と異なり、counters()はネストの深さに応じて番号を生成できます。

counters(name, string, style?)

　各パラメーターの意味は次のとおりです。

name

カウンターの名前です。これは counter-resetや counter-incrementプロパティで定義された名前と一致している必要があります。

string

カウンター値の間に挿入される文字列です。例えば、ネストされたリストで各レベルをドット（.）で区切る場合、このパラメーターにはドットを指定します。

style（オプション）

カウンターの数値の表示形式を指定します。CSSのリストスタイルタイプ（decimal、lower-roman、upper-alpha など）が使用できます。このパラメーターを省略すると、デフォルトで decimal が使用されます。

Sample

　この例では、章と節を番号付けするために使用しています。

<h1>Introduction: イントロダクション</h1>
<h1>Background: 背景</h1>
	<h2>Historical Overview: 歴史的概要</h2>
	<h2>Recent Developments: 最近の発展</h2>
<h1>Methodology: 方法論</h1>
	<h2>Study Design: 研究デザイン</h2>
	<h2>Data Collection: データ収集</h2>

body {
	counter-reset: section; /* 最上位レベルのカウンターをリセット */
}
h1 {
	counter-reset: subsection; /* サブセクションのカウンターをリセット */
}
h2 {
	counter-increment: subsection; /* サブセクションのカウンターを増加 */
	text-indent: 1.5em;
}
h1::before {
	content: "第" counter(section) "章 "; /* セクション番号 */
	counter-increment: section; /* セクションのカウンターを増加 */
	font-weight: bold;
}
h2::before {
	content: counter(section) "." counters(subsection, ".") " "; /* ネストされたサブセクション番号 */
	font-weight: bold;
}