CSS文法[カウンタ]
CSSスタイルシート文法[カウンタ]
<< URL+URN=URI
CSSにおけるカウンタとは
CSSにおけるカウンタとは、リストスタイル(HTML/XHTMLのul/olのli要素やCSSのdisplayプロパティ値がlist-itemである擬似要素・擬似クラスやセレクタ)において順次リストに採番・番号付けするプロパティcounter-incrementやリセットプロパティであるcounter-resetを使用した実装を指します。
※このページは、W3Cの4 CSS2 syntax and basic data types[英文]を当サイト管理人が2008年08月25日、意訳したものですが、構文解釈の違いや翻訳の違いが含まれるかもしれません。正式文書はW3C 各種仕様書(英語版)である事を予めご了承ください。
カウンタ
カウンタは、[counter-increment]や[counter-reset]プロパティなどで使われる識別子によって意味を持つもので、カウンタの値を参照する際には[counter(識別子)]や[counter(識別子,リストスタイルタイプ)]が使われ、既定値は[decimal]10進数表記です。
同じ名前のネストされたカウンタの順番を参照する為には、[counters(識別子,文字列)]や[counters(識別子,文字列,リストスタイルタイプ)]のように記述します(ネストされたカウンタとそのスコープについては『生成された文書』の章参照)。
CSS2では、カウンタの値は、文書プロパティが参照される場合に限定されます([none]はリストスタイルタイプでは[counter(x, none)]のようにカラ文字として利用可能です)。
下記の例は、章(h1)ごとの段落(p)番号付けのスタイルシートで、段落はローマ数字で番号付けされ、番号の後ろにピリオドとスペースを入れています。
|
◆章ごとのナンバリングの例 p { counter-increment: par-num } h1 {counter-reset: par-num} p:before { content: counter(par-num, upper-roman) ". " } |
カウンタの[counter-reset]がスコープ範囲外の場合は、ルート要素の[counter-reset]によって[0]にリセットされます。
>> CSSの色・カラー
CSS/スタイルシート情報
