h3やh4などのページ内の見出しに自動で番号をつけたい場合は、CSSカウンターとナンバリングを実装しておくと便利です。
Automatic counters and numbering / W3C
どのページのh3の見出しにも番号が付いてしまうのは不都合な場合が多いかもしれません。
その場合は、class指定して任意のエリアやページにだけ連番を表示させることができます。
このページでも実装しています。
カウンターを0にリセットする
CSSカウンタの使用するためにまず最初に 0 を初期値として値をリセットしなければなりません。
bodyに設定しておくと良いと思います。
CSS
body {
counter-reset: titleNum; /* titleNum カウンターを 0 にセット */
}
見出しを任意のclassで指定する
任意の範囲だけ番号を付ける場合は、各見出しにclass指定する必要があります。
例ではsectionで囲んでclass指定しています。
HTML
<section class="numbering"> <h3>カウンターを0にリセットする</h3> </section> <section class="numbering"> <h3>見出しを任意のclassで指定する</h3> </section> <section class="numbering"> <h3>CSSで番号を装飾する</h3> </section>
CSSでカウンターを表示させて装飾する
自動で番号を表示させていますが、その番号をCSSで装飾することが可能です。
下記の例ではこのページの丸で囲まれた数字の表示になります。
CSS
.numbering {
counter-increment: titleNum; /* titleNum カウンターを増加 */
}
.numbering h3 {
padding-left: 2.5rem;
}
.numbering h3::before {
content: counter(titleNum); /* titleNum カウンターを表示 */
position: absolute;
margin-top: -2px;
margin-left: -2.5rem;
width: 30px;
height: 30px;
line-height: 30px;
background-color: #e02f2f;
border-radius: 100%;
color: #fff;
font-size: .9em;
text-align: center;
}
ページやコンテンツによって装飾を変えたい場合はclassをいくつか用意してCSS設定すると良いですね。
