CSS - counter-increment

トップ > CSSリファレンス > counter-increment

概要

属性名 counter-increment
[ <identifier> <integer>? ]+ | none
初期値none
適用可能要素すべての要素
継承継承しない
メディアvisual

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS28129.23.1

説明

contentcount(...) で挿入するカウンタをカウントアップします。

説明
<identifier>カウンタ名を指定します。chapter, section, subsection, shou, setsu など、名前は何でも構いません。
<integer>増分を指定します。省略すると 1 だけ増加します。
none増加しません。

使用例

CSS
body {
  counter-reset: chapter;
}
h1 {
  counter-increment: chapter;
  counter-reset: section;
}
h1:before {
  content: counter(chapter) ". ";
}
h2 {
  counter-increment: section;
  counter-reset: subsection;
}
h2:before {
  content: counter(chapter) "." counter(section) " ";
}
h3 {
  counter-increment: subsection;
}
h3:before {
  content: counter(chapter) "." counter(section) "." counter(subsection) " ";
}
HTML
<h1>Web入門</h1>
<h2>HTML</h2>
<h3>HTMLとは</h3>
<h3>HTMLリファレンス</h3>
<h2>CSS</h2>
<h3>CSSとは</h3>
表示

Web入門

HTML

HTMLとは

HTMLリファレンス

CSS

CSSとは

関連項目

content, counter-reset

リンク


Copyright (C) 1997-2016 杜甫々
初版:1997年7月27日、最終更新:2016年5月8日
http://www.tohoho-web.com/css/prop/counter-increment.htm