clmemo@aka: CSS でセクション・カウンター

2009-09-15

CSS でセクション・カウンター

CSS でヘッダー要素にカウンターを自動的に付けることができる。例えば、「Chapter 1.」とか「Section 2.1.」みたいなのを自動で振れる。で、いつも CSS の書き方を忘れてしまうのでメモ。

sample.html

まずはサンプルの HTML ファイル。

<html>
 <head>
  <title>CSS Counter Sample</title>
  <link href="sample.css" rel="stylesheet" type="text/css"/>
 </head>
<body>
<h1>CSS Counter Sample</h1>

<h2>OS</h2>
<h3>Linux</h3>
<h3>MacOS</h3>
<h3>Windows</h3>

<h2>Company</h2>
<h3>Google</h3>
<h3>Apple</h3>
<h3>Microsoft</h3>
<h3>Yahoo!</h3>
</body>
</html>

これを、CSS ファイルなしでウェブ・ブラウザー (Firefox 3.5) で見るとかうなる。

sample.css

次に sample.css を追加してみませう。

h1 {
  counter-reset: chapter;
}

h2 {
  counter-increment: chapter;
  counter-reset: section
}
h2:before {
  content: "Chapter " counter(chapter) ". ";
}

h3 {
  counter-increment: section;
}
h3:before {
  content: "Section " counter(chapter) "." counter(section) ". ";
}

sample.html と同じ場所に置いて、ブラウザーをリロードするとかうなる: