counter-increment

数値を増減させる変数を指定します。

ブラウザ

O6 / O7 / O9

書式

要素[.class名][#id名]{ counter-increment : 値; }

▲PageTop

指定できる値

値	初期値	意味	備考
識別名 + 増分する値(省略可)		増分させる変数名と増分を指定します。	増分は、0や負の数も指定することができます。省略時は1となります。
none	○	カウントしません。
inherit		親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1:after{
        content : " カウント=" counter(cnt);
        counter-increment : cnt;
      }
      #sample2:after{
        content : " カウント=" counter(cnt);
        counter-increment : none;
        counter-reset : cnt 10;
      }
      #sample3:after{
        content : " カウント=" counter(cnt);
        counter-increment : cnt -1;
      }
    </style>
    </head>
    <body>
      <p>■値を1づつカウントします。</p>
      <p id="sample1">結果</p>
      <p id="sample1">結果</p>
      <p id="sample1">結果</p>
      <p>■値を10に初期化して、カウントさせません。</p>
      <p id="sample2">結果</p>
      <p id="sample2">結果</p>
      <p id="sample2">結果</p>
      <p>■値を-1づつカウントします。</p>
      <p id="sample3">結果</p>
      <p id="sample3">結果</p>
      <p id="sample3">結果</p>
    </body>
</html>

表示結果

■値を1づつカウントします。

結果

■値を10に初期化して、カウントさせません。

結果

■値を-1づつカウントします。

結果

▲PageTop

counter-increment

ブラウザ

書式

指定できる値

サンプル

ソースコード

表示結果

関連項目

CSS