このページはBlog | hamashun.comのエントリー、CSSだけでコメントに番号を振ってみるのサンプルページ1です。

サンプル Source Code

h3:before {
 content: counter(chapter)".";
 margin-right: 5px;
 color: #99cc99;
}

h3 {
 counter-increment: chapter;
}

h3:first-letter {
 font-family: Arial;
 font-size: 2em;
}

Display of a Sample

コメント1

ほげほげ

コメント2

ふがふが

コメント3

ほにゃららら

応用 Source Code

h2 {
 counter-reset: chapter;
}

h4:before {
 content: counter(chapter)"-" counter(section)"-" counter(subsection)".";
 margin-right: 20px;
}

h4 {
 counter-reset: chapter;
 counter-increment: chapter section subsection 2;
}

h4 {
 padding-left: 5px;
 border-left: solid 3px #99cc99;
 color: #66aa66;
}

Ex Sample

見出し1

増える数字

見出し2

増える数字

見出し3

ふえるわかめ

注訳
content: counter(chapter)"-" counter(section)"-" counter(subsection)".";

の chapter - section - subsection
が、見出しの 1 - 1 - 3 と対応している。