番号付き目次
番号付き目次は、章番号を自動で振りながら見出しへのリンクを並べるナビゲーションです。 <ol> を入れ子にして親子の章立てを表現し、CSSの counter-reset と counter-increment で「1」「2」「2-1」のような番号を生成しています。
このパーツの使いどころと実装ポイント
番号付き目次は、章番号を自動で振りながら見出しへのリンクを並べるナビゲーションです。<ol> を入れ子にして親子の章立てを表現し、CSSの counter-reset と counter-increment で「1」「2」「2-1」のような番号を生成しています。番号を手書きしないので、項目を入れ替えても自動で振り直される点が手軽です。左端の黄色いバーで目次らしい存在感を出しています。
向いている場面
- 手順が多いハウツー記事やマニュアル
- 章立てがはっきりした長文ドキュメント
- 読了前に全体像を見せたい解説ページ
カスタマイズの勘所は、入れ子の深さを2段までに抑えること。3段以上にすると番号が長くなり読みにくくなります。リンク先は href="#2-1" のようにページ内アンカーで、本文側の見出しに同じidを振っておく必要があります。
実装上の注意
カウンターはCSSの装飾なので、読み上げ環境には番号が伝わらないことがあります。重要な順序はリンク文言自体にも込めておくと安全です。クリックで該当見出しへ飛んだ際、固定ヘッダーに隠れないよう scroll-margin-top を見出し側に付けておくと、目的の段落がきれいに頭出しされます。
よくある質問
番号は手で入力していますか
いいえ。CSSのカウンター機能で自動生成しています。項目を増やしたり順番を入れ替えたりしても番号は自動で振り直されるため、メンテナンスが楽です。
本文の見出しと連動させるには
目次のリンク先アンカー（#2-1など）と同じidを本文側の見出しに付けておきます。クリックでその見出しまでスクロールし、固定ヘッダーがあるならscroll-margin-topで隠れを防ぎます。