記事内目次（追従）

このパーツの使いどころと実装ポイント

このパーツは、記事本文の左に目次を配置し、position:sticky;top:30px でスクロールしても画面内に追従させる目次サイドバーです。レイアウトは grid-template-columns:240px 1fr の 2 カラムで、目次は番号付きの ol、本文は各見出しに id（#a1〜#a5）を振ってアンカーリンクで対応させています。現在地の項目には is-act クラスでハイライトを当てる想定です。

向いている場面

長文の解説記事、技術ドキュメント、マニュアル、利用規約やヘルプページなど、セクションが多く読者が目的の箇所へ素早く飛びたいコンテンツに最適です。WordPress のブログ記事やナレッジベース、社内 wiki の長いページでも活躍します。

カスタマイズの勘所

• 本文の各見出しに付けた id と、目次の a href="#..." を必ず一致させる
• 現在地ハイライトはスクロール位置を監視する IntersectionObserver で is-act を付け替えると滑らかに動く
• アンカー飛びの際に見出しがヘッダー下に隠れるなら scroll-margin-top を見出しに足す

注意点として、position:sticky は親要素に十分な高さがないと固定されないため、本文側に内容を確保します。スマホなど狭い画面では 2 カラムが成立しにくいので、目次を本文上部に折りたたみ表示へ切り替えると読みやすくなります。アンカーリンクはキーボードでもたどれるため、アクセシビリティ面でも有効です。