WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「カウンターの増減値」

counter-increment「カウンターの増減値」

「counter-increment」は、カウンタの値の更新を指定します。
「content」のcounter()、counters()にカウンタ名を指定することで、要素の前または後にカウンタの値が挿入されます。

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

counter-increment の指定方法

構文

counter-increment : [カウンタ名 値] | none ;

プロパティ/設定値意味
counter-increment : none; カウンタを更新しない。(初期値)
counter-increment : カウンタ名 値; カウンタ名と増分値を半角スペースで区切って指定。
カウンタ名は、必ず指定する。
カウンタ名は、半角スペースで区切って複数指定も可能。
増分値を指定しない場合は、増分は1になります。 値に負の値を指定し、カウンタを戻すことも可能。
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

counter-increment のサンプル


<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;
}
dl{ counter-reset:cnt cnts; }
.css_counter-increment1 dd::before { 
	counter-increment:cnt; 
	content : counter(cnt) "行目." ;}
.css_counter-increment2 dd::before { 
	counter-increment:cnts 5; 
	content : counters(cnts,"-")"." ;}
</style>

<!-- html -->
<div class="common">
  <div class="cssTitle">counter-increment:cnt</div>
  <div>
  <dl class="css_counter-increment1">
  <dt>カウンタの増分1。</dt>
  <dd>①</dd>
  <dd>②</dd>
  <dd>③</dd>
  </dl>
  </div>

  <div class="cssTitle">counter-increment:cnts 5</div>
  <div>
  <dl class="css_counter-increment2">
  <dt>カウンタの増分5。:1階層目</dt>
  <dd>①</dd>
  <dd>②</dd>
  <dd>③
    <dl>
    <dt>カウンタの増分5。:2階層目</dt>
    <dd>③の1</dd>
    <dd>③の2
      <dl>
      <dt>カウンタの増分5。:3階層目</dt>
      <dd>③の2の1</dd>
      </dl></dd>
    </dl></dd>
  </dl>
  </div>
</div>
counter-increment:cnt
カウンタの増分1。
counter-increment:cnts 5
カウンタの増分5。:1階層目
カウンタの増分5。:2階層目
③の1
③の2
カウンタの増分5。:3階層目
③の2の1

広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン