counter-incrementプロパティ

TOPページに戻る > CSS

counter-incrementプロパティ

要素にカウンターをつけることができます
値にカウンターの名前を指定すると。カウンターが作られます
カウンター名の次に半角空白で区切って、数字を指定するとカウンターの増減値を指定することができます
増減値は省略できます。その場合、1つずつカウンター数字が増加します
contentプロパティを同時に使ってください。値はcounter(カウンター名)を指定します
※IE6、IE7は未対応、IE8から対応しています

使い方（書式）

セレクタ { counter-increment: カウンター名 増減する数値; }  
セレクタ:before { content: counter(カウンター名); }   /* contentプロパティも同時指定 */                

counter-incrementプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	しない

プロパティの値	説明
カウンター名	カウンター名前を自由に決めることができます
増減する数値	カウンターの増減する数値を指定。数値の指定を省略した場合は1つずつ増加
none	カウンターなし

実際の指定方法

.hoge {
 counter-increment: hogecounter;  /* hogeカウンターを作りました */
  }
.hoge:before {
 content: counter(hogecounter);   /* hogeカウンターを要素の先頭に表示 */
  }

.hoge2 {
 counter-increment: foocounter 5; /* fooカウンターを作りました。増加値5 */
  }
.hoge2:before {
 content: counter(foocounter);    /* fooカウンターを要素の先頭に表示 */
  }

html部分

<p>実際の表示　先頭にhogeカウンターがつきました</p>
<p class="hoge">　counter-increment: hogecounter;</p>
<p class="hoge">　counter-increment: hogecounter;</p>
<p class="hoge">　counter-increment: hogecounter;</p>
<p>実際の表示　fooカウンターを作りました。増加値5</p>
<p class="hoge2">　counter-increment: foocounter 5;</p>
<p class="hoge2">　counter-increment: foocounter 5;</p>
<p class="hoge2">　counter-increment: foocounter 5;</p>

実際の表示　先頭にhogeカウンターがつきました

　counter-increment: hogecounter;

　counter-increment: hogecounter;

　counter-increment: hogecounter;

実際の表示　fooカウンターを作りました。増加値5

　counter-increment: foocounter 5;

　counter-increment: foocounter 5;

　counter-increment: foocounter 5;