CSSにおけるカウンタの概念に関して解説します。
CSSに於けるカウンタとは、数値を入れる変数の事です。
CSSでは:before擬似要素及び:after擬似要素に当てたcontentプロパティでカウンタの値を出力する事が可能になります。
これを用いると、以下のような事が簡単に出来ます。
カウンタを実現するには、以下のようにします。
カウンタ名は識別子に使える文字列と決められております。
初期設定にはcounter-resetプロパティを使います。
例えば順序付きリストの場合は、リストアイテムが現れる度に1ずつ加算すべきでしょう。
従って、リストアイテムとなる要素(HTMLなら<li>要素)でカウントアップを行う事になります。
カウントアップにはcounter-incrementプロパティを使います。
CSSにはマークアップ文書に書かれていないコンテンツをスタイルシートで付け加える機能があります。
これを用いる事で、カウンタを表示させたい要素の前か後ろにカウンタの値を文字列として出力させる事が可能になります。
カウンタの出力には、contentプロパティで、値としてcounter()函数及びcounters()函数を用います。
この二つの函数については、カウンタを用いている要素が入れ子になっている場合に違いが生じます。
カウンタ名をある要素で利用したとして、その要素が入れ子になったらどうなるでしょうか。
新しく当該要素が始まる度にカウンタが初期化されてしまうのでしょうか。
実はCSSでのカウンタでは、入れ子になる度に新しいカウンタ変数が用意されます。
つまり、入れ子になる前の同じ名前のカウンタ変数には影響はありません。
また、同じ名前のカウンタ変数を外側から順に纏めて出力させる事も出来ます(contentプロパティでのcounters()函数)。
contentプロパティの値に使えるcounter()函数は、現在のカウンタを出力します。
例として、以下のようなCSSスタイルシートを考えてみましょう。
ol {counter-reset: olcount 0;}ol>li {list-style-type: none;}ol>li:before {counter-increment: olcount;content: counter(olcount) ". ";list-style-type: none;}
このスタイルシートを以下のHTMLに当てたとします。
<ol><li>あいうえお</li><li><ol><li>かきくけこ</li><li>がぎぐげご</li></ol></li><li><ol><li>さしすせそ</li><li>ざじずぜぞ</li></ol></li>…</ol>
この場合、contentプロパティの値となっているcounter()函数は現在のカウンタのみを出力しますので、出力は以下のようになります。
1. あいうえお
2.
1. かきくけこ
2. がぎぐげご
3.
1. さしすせそ
2. ざじずぜぞ
…
contentプロパティの値に使えるcounters()函数は、同じ名前のカウンタで使用されているものを全部纏めて出力します。
先ほどの例において、スタイルシートを以下のように書き換えたとします。
ol {counter-reset: olcount 0;}ol>li {list-style-type: none;}ol>li:before {counter-increment: olcount;content: counters(olcount, ". ") ". ";list-style-type: none;}
変更点はcontentプロパティの値となっているcounter()函数をcounters()函数に変えただけですが、counters()函数では同じ名前のカウンタで使用されているものを全部出力しますので、出力は以下のようになります。
1. あいうえお
2.
2. 1. かきくけこ
2. 2. がぎぐげご
3.
3. 1. さしすせそ
3. 2. ざじずぜぞ
…
カウンタ機能は今のところ
でのみ実装されているようです。
但し、もじら系ブラウザでも古いヴァージョン(ファイヤーフォックスで言えば1.5.0より前のヴァージョン、ゲッコーのリヴィジョンで言えば1.8より前)には実装されていません。
また、サファリについても、第3.0版より前には実装されておりませんでした。
加えて、携帯電話向け仕様のWAP 2.0でもカウンタ機能は定義されておらず、実装もされておりません(オペラなどのフルブラウザには勿論実装されておりますが)。
