counter-resetプロパティ。

CSSで、カウンタを初期化するcounter-resetプロパティに関する解説です。

counter-resetプロパティ・目次。

counter-resetプロパティとは。

counter-resetプロパティは、カウンタを初期化するプロパティです。

counter-resetプロパティの扱い。

counter-resetプロパティの書式。

counter-resetプロパティの書式は、以下のようになります。

counter-reset:

値としては、以下のものが取れます。

inherit
一番近い上位要素で指定された値を継承します。
none
特にカウンタの初期化を行いません。
初期化するカウンタ

初期化したいカウンタを空白文字で区切って任意の個数だけ指定出来ます。

このとき、以下の書式が使えます。

カウンタ名
カウンタ名で指定されるカウンタ変数を 0に初期化します。
カウンタ名 整数
カウンタ名で指定されるカウンタ変数を整数で初期化します(零及び負も可)。

カウンタ変数名識別子の決まりに従って指定します。

counter-resetプロパティの記述例。

例えば、HTMLの<ol>要素直下の<li>要素において、マーカとして「その」(○は和数字)と出力させたい場合は、

ol {
    counter-reset: olcount 0;
    }

ol>li {
    list-style-type: none;
    }

ol>li:before {
    content: "その" counter(olcount, cjk-ideographic) ": ";
    counter-increment: olcount 1;
    }

と記述します。

counter-resetプロパティに関する注意事項。

counter-resetプロパティの仕様上の注意。

カウンタを出力するcontentプロパティを含むプロパティ定義においてcounter-incrementプロパティが含まれている場合は、当該カウンタをcounter-incrementプロパティに従って加算した結果を出力します。

従って、conter-resetプロパティで初期設定する場合は、一番目に表示すべき値の一つ前の値とします。

非表示要素でのcounter-resetプロパティは無効です。

displayプロパティnoneを与えられている要素及びその下位要素でのcounter-resetプロパティは無効となります。

counter-resetプロパティの実装上の注意。(平成19年 6月12日)

ネットスケープ 4.xでの注意事項。

インターネットエクスプローラ 7.0まででの注意事項。

にはcounter-resetプロパティは実装されておりません。

その他のユーザエージェントでの注意事項。(平成19年 6月12日)

サファリや旧ヴァージョンのもじら系ブラウザなどで、counter-resetプロパティが使えない場合があります。

もじら系ブラウザの場合、ファイヤーフォックスで言えば1.5.0より前のヴァージョン、ゲッコーのリヴィジョンで言えば1.8より前のものは利用出来ません。

尚、サファリについては、平成19年秋にリリース予定とされている第3.0版以降でサポートされるようです。(平成19年 6月12日)

WAP 2.0での注意事項。

WAP 2.0では、counter-resetプロパティは定義されておりません

関連項目。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com