counter-reset「カウンターの初期値」

「counter-reset」は、カウンタの値のリセットを指定します。

CSS Ver.	適用要素	継承
2.1	全て	しない

counter-reset の指定方法

構文
counter-reset : [カウンタ名値] \| none ;
プロパティ/設定値	意味
counter-reset : none;	カウンタをリセットしない。(初期値)
counter-reset : カウンタ名値;	リセットするカウンタ名と値を半角スペースで区切って指定。カウンタ名は、必ず指定する。カウンタ名は、半角スペースで区切って複数指定も可能。値を指定しない場合は、リセットする値は０になります。値は、負の値も指定可能。
デフォルト：「タグ毎のスタイル初期値」を参照

ページTOP

counter-reset のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_counter-reset1 dl{ counter-reset:cnt; }
.css_counter-increment1 dd::before { 
	counter-increment:cnt; 
	content : counter(cnt) "行目．" ;}
.css_counter-reset2 dl{ counter-reset:cnts 10; }
.css_counter-increment2 dd::before { 
	counter-increment:cnts 5; 
	content : counters(cnts,"-")"．" ;}
</style>

<!-- html -->
<div class="common">
  <div class="cssTitle">counter-reset:cnt</div>
  <div class="css_counter-reset1">
  <dl class="css_counter-increment1">
  <dt>リセットの値０。</dt>
  <dd>①</dd>
  <dd>②</dd>
  <dd>③</dd>
  </dl>
  </div>

  <div class="cssTitle">counter-reset:cnts 10</div>
  <div class="css_counter-reset2">
  <dl class="css_counter-increment2">
  <dt>リセットの値１０。：１階層目</dt>
  <dd>①</dd>
  <dd>②</dd>
  <dd>③
    <dl>
    <dt>リセットの値１０。：２階層目</dt>
    <dd>③の１</dd>
    <dd>③の２
      <dl>
      <dt>リセットの値１０。：３階層目</dt>
      <dd>③の２の１</dd>
      </dl></dd>
    </dl></dd>
  </dl>
  </div>
</div>