記事用 目次（スティッキー）
長文記事の横に目次を固定表示するレイアウトです。 display:grid で「目次200px ＋ 本文」の2カラムに分け、目次側に position:sticky と top:20px を当てることで、本文をスクロールしても目次が画面上部に追従し続けます。
このパーツの使いどころと実装ポイント
長文記事の横に目次を固定表示するレイアウトです。display:gridで「目次200px ＋ 本文」の2カラムに分け、目次側にposition:stickyとtop:20pxを当てることで、本文をスクロールしても目次が画面上部に追従し続けます。読者は今どこを読んでいるか把握しやすく、見たい章へすぐ飛べるのが利点です。目次の各項目はリンクとして並んでおり、:hoverで色が変わります。
向いている場面
- ハウツーや解説など、章立てが多い長文ブログ記事
- 製品マニュアルやヘルプドキュメント
- 調査レポートやホワイトペーパーのオンライン版
カスタマイズの勘所
各リンクのhrefを本文中の見出しID（例：#section1）に合わせると、クリックで該当箇所へジャンプします。現在読んでいる章を強調したい場合は、スクロール位置を監視して該当リンクに目立つクラスを付ける処理を足すと、より親切になります。目次の幅200pxは項目名の長さに応じて調整してください。
レスポンシブの注意
2カラムは画面が狭いと窮屈になります。スマートフォンでは目次を本文の上に1カラムで置き、stickyを解除して通常の見出しリストとして見せると読みやすくなります。
よくある質問
目次のリンクをクリックしても本文の途中に飛びません。
目次のリンク先と本文の見出しに、同じIDを設定する必要があります。本文の各見出しにidを付け、目次のhrefをそのidに合わせると、クリックで該当箇所へスクロールするようになります。
スマートフォンでも目次は横に固定されますか？
狭い画面で2カラムのまま固定すると窮屈になります。スマートフォンでは1カラムに切り替え、目次を本文の冒頭に通常リストとして置く方が読みやすく、固定表示はパソコン幅のときだけにするのが一般的です。