counter-incrementプロパティ。

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

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プロパティは定義されておりません。

関連項目。

content
スタイルシートで生成する内容
counter-reset
カウンタの初期化

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

ページ外へのご案内。

marguerite.site@gmail.com