CSSカウンタで見出しに章番号を振る方法

この記事では、CSSカウンタで見出しに章番号を振る方法を紹介します。

対象読者

記事内のタイトルに番号を振りたい方

教科書や論文を読んでいるとよく「第○○章第××節」というような表示を見かけますよね？
ウェブサイトの記事に対してもこのような表示を付け加えることができます。

内容

CSSカウンタとは何か
CSSカウンタの使い方
CSSカウンタで見出しに章番号を振る方法

それではこれから、CSSカウンタで見出しに章番号を振る方法について解説していきます。

CSSカウンタとは何か
CSSカウンタの使い方
CSSカウントを用いて見出しに章番号を振る
まとめ

CSSカウンタとは何か

CSSカウンタとは、任意のHTML要素を数えて、ナンバリングする機能です。
contentプロパティのcounter()関数を使うことで、擬似クラス(:afterや:before)にナンバーを出力できます。

CSSカウンタの使い方

CSSカウンタを使うためには、「counter-reset」と「counter-increment」という2つのプロパティを理解する必要があります。

counter-reset：カウンタをリセット（カウンタ変数宣言）
counter-increment：カウンタに1を足す

counter-resetに設定する値は任意です。
C言語で言うところの「int i;」という文で、変数「i」を宣言するイメージです。

counter-incrementを設定した要素が呼び出されると、先ほどリセットしておいたカウンタに1が足されます。
C言語で言うところの「i++;」のイメージです。

CSSカウントを用いて見出しに章番号を振る

それでは、実際にはてなブログの記事内のタイトルに章番号を振るためのコードを紹介します。
まず、完成予想図です。

次のコードをデザインCSSに追記してください。

.entry-title {
counter-reset: h2;
}
.entry-content h2 {
counter-increment: h2;
counter-reset: h3;
}
.entry-content h3 {
counter-increment: h3;
counter-reset: h4;
}
.entry-content h4 {
counter-increment: h4;
counter-reset: h5;
}
.entry-content h5 {
counter-increment: h5;
counter-reset: h6;
}
.entry-content h6 {
counter-increment: h6;
}
.entry-content h2:before {
content: counter(h2) ". ";
}
.entry-content h3:before {
content: counter(h2) "." counter(h3) ". ";
}
.entry-content h4:before {
content: counter(h2) "." counter(h3) "." counter(h4) ". ";
}
.entry-content h4:before {
content: counter(h2) "." counter(h3) "." counter(h4) ". " counter(h5) ". ";
}
.entry-content h4:before {
content: counter(h2) "." counter(h3) "." counter(h4) ". " counter(h5) ". " counter(h6) ". " ;
}

見出しはh2~h6に対応しています。
contentプロパティの値を弄ることで、章番号のデザインを変更することができます。