CSS - counter-reset

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

概要

属性名 counter-reset
[ <identifier> <integer>? ]+ | none
初期値none
適用可能要素すべての要素
継承継承しない
メディアVisual / Content
サポートC2 / e8 / Fx1 / Ch2 / Op9.2 / Sa3?

説明

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

説明
<identifier>カウンタ名を指定します。
<integer>リセット値を指定します。省略すると 0 にリセットします。
none増加しません。

使用例

CSS
body {
    counter-reset: chapter 3;
}
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とは


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