気の向くままに辿るIT/ICT
webzoit.netウェブサイトホームページ
CSS / Cascading Style Sheets / スタイルシート

CSS文法[カウンタ]

ウェブ造ホーム前へ次へ
サイト内検索
カスタム検索
CSSのカウンタとは?

CSSスタイルシート文法[カウンタ]

<< URL+URN=URI

CSSにおけるカウンタとは

 CSSにおけるカウンタとは、リストスタイル(HTML/XHTMLのul/olのli要素やCSSのdisplayプロパティ値がlist-itemである擬似要素・擬似クラスセレクタ)において順次リストに採番・番号付けするプロパティcounter-incrementやリセットプロパティであるcounter-resetを使用した実装を指します。

※このページは、W3C4 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/スタイルシート情報

ウェブ造ホーム前へ次へ