cssだけで見出し自動発番
table contensh1 や h2 で見出し作成したとき、自動的に 1.1 、 1.2 とか発番して欲しい。
特にmarkdown で記述した文書をhtml化するときに便利
1 html のサンプル
例えば、こんな感じのhtmlがあるとする。
<html>
<body>
<h1> 第一編</h1>
<h2> 章A</h2>
<h3> 章A-X</h3>
<h4> 章A-X-1</h4>
<h4> 章A-X-2</h4>
<h3> 章A-Y</h3>
<h3> 章A-Z</h3>
<h2> 章B</h3>
<h3> 章B-X</h3>
<h4> 章B-X-1</h4>
<h3> 章B-Y</h3>
<h3> 章B-Z</h3>
<h1> 第二編</h1>
<h2> 章A</h3>
</body>
</html>2 cssのサンプル
style で、h1からh4までにそれぞれ counter-increment を定義し、h1:before で各見出しの先頭に付与する。
そのままだと 1.3 の次が 2.1 になってしまうので、h1 があったら h2 をclearする counter-reset を記述しておく。
<style>
h1 {
padding: 0;
margin: 0;
}
h2, h3, h4 {
padding: 0;
margin: 0 20px;
}
h1 {
counter-increment: number_h1;
counter-reset: number_h2;
}
h2 {
counter-increment: number_h2;
counter-reset: number_h3;
}
h3 {
counter-increment: number_h3;
counter-reset: number_h4;
}
h4 {
counter-increment: number_h4;
}
h1:before {
content: counter(number_h1)".";
}
h2:before {
content: counter(number_h1)"."counter(number_h2)".";
}
h3:before {
content: counter(number_h1)"."counter(number_h2)"."counter(number_h3)".";
}
h4:before {
content: counter(number_h1)"."counter(number_h2)"."counter(number_h3)"."counter(number_h4)".";
}
</style>3 表示のサンプル
