CSSで連番を振る方法： counter-resetと、counter-incrementプロパティの役割
CSSで連番を振るには、2つのプロパティを使う
- 「counter-reset」プロパティ
＝カウンタ変数を新たに作る (カウンタの値を0にする) - 「counter-increment」プロパティ
＝カウンタ変数を進める (カウンタの値に1を加える)
前者のcounter-resetプロパティは省略することもできますが、必ず書くようにする方が動作が分かりやすくなります。このプロパティには、その名の通り「カウンタの値をリセットする」役割もありますが、「その要素以下で通用するカウンタ変数を新たに作成する」という役割も果たします。この役割が意外と重要です。この役割でcounter-resetプロパティ使っておけば、「カウンタ変数のスコープ(有効範囲)」が明確になり、どの範囲でカウントされるのかが分かりやすくなります。
CSSを使って任意の要素に連番を追加する方法
CSSで連番を表示させるには、「変数の生成」・「変数に加算」・「変数を表示」の3ステップが必要です。最初の「変数の生成」は省略もできますが、先に述べた理由から、必ず書いておくことをお勧め致します。■カウンタ変数の生成：
以下のように記述すると、table要素が出現した段階で、カウンタ変数「apple」が生成され、値が0にセットされます。変数名には好きな文字列が使えます。
table {
counter-reset: apple;
}
この記述によって、変数「apple」のスコープ(有効範囲)が明確になります。上記の場合は、table要素内が変数「apple」のスコープです。したがって、table要素が複数個ある場合は(入れ子になっていても)、table要素ごとに独立した別々のカウンタとして機能します。もし、ページ内を通して共通するカウンタを作りたければ、body要素に対して記述しておくと良いでしょう。なお、カウンタの初期値を指定することもできます。
table {
counter-reset: apple 100;
}
上記のように記述すると、カウンタ変数「apple」の値が100にセットされます。負の値を指定することも可能です。■カウンタ変数の値に加算：
以下のように記述すると、th要素が出現した段階で、カウンタ変数「apple」の値に1が加算されます。
table th {
counter-increment: apple;
}
以下のように、変数名の後に数値を記述することで、加算する値を1以外にすることもできます。
table th {
counter-increment: apple 3;
}
上記の場合は、th要素が現れるたびに、カウンタ変数「apple」に3が加算されます。負の値を指定すれば、値を減らすこともできます。■カウンタ変数の表示：
カウンタ変数を表示するには、以下のように記述します。この記述がない限り、どれだけカウンタを進めても何も表示されませんので注意して下さい。
table th:before {
content: "カウンタの値は、" counter(apple) "です。";
}
上記のように、before擬似要素(またはafter擬似要素)に対して、contentプロパティを使って、「counter(変数名)」のように記述することで、カウンタの値を表示できます。CSSを使って特定の要素に連番を振るための基礎は以上です。それでは、前ページでもご紹介したように、実際に表(テーブル)の各行に連番を振ってみましょう。
