counter-incrementプロパティ。

CSSで、カウンタに値を加算するcounter-incrementプロパティに関する解説です。

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

counter-incrementプロパティとは。

counter-incrementプロパティは、カウンタに値を加算するプロパティです。

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

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

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

counter-increment:

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

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

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

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

カウンタ名
カウンタ名で指定されるカウンタ変数に 1を加えます。
カウンタ名 整数
カウンタ名で指定されるカウンタ変数に整数分の値を加えます(零及び負も可)。

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

例えば、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-incrementプロパティに関する注意事項。

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

counter-incrementプロパティとcontentプロパティの関係。

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

従って、カウンタの値を 1から始める場合は、counter-resetでは 0に初期化する必要があります。

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

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

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

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

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

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

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

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

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

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

WAP 2.0での注意事項。

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

関連項目。

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

ページ外へのご案内。

marguerite.site@gmail.com