スティッキーサイドバーレイアウト
このレイアウトは、記事本文の左側に目次サイドバーを並べた2カラム構成です。配置は display:grid に grid-template-columns:200px 1fr を指定して幅を固定列と可変列に分け、サイドバー側の要素に position:sticky と top:20px を与えることで、スクロールし…
解説
このレイアウトは、記事本文の左側に目次サイドバーを並べた2カラム構成です。配置は display:grid に grid-template-columns:200px 1fr を指定して幅を固定列と可変列に分け、サイドバー側の要素に position:sticky と top:20px を与えることで、スクロールしても目次が画面上部に貼り付いたまま追従します。JavaScript を使わず CSS だけで追従を実現しているのが特徴です。
使う場面
- 長文の解説記事やドキュメントで、現在位置がわかる目次を常に見せたいとき
- ヘルプページやマニュアルで章へのジャンプ導線を固定したいとき
- 商品詳細ページで仕様や購入ボタンを横に追従させたいとき
カスタマイズは grid-template-columns の数値でサイドバー幅を、top の値で固定位置を調整できます。本コードは画面幅600px以下で1カラムに切り替わるメディアクエリを備えているため、スマホでは目次が本文の上下に回り込みます。注意点として、position:sticky は親要素に overflow:hidden があると効かなくなるため、祖先要素のスタイルを確認してください。align-items:start を外すと列が引き伸ばされ追従が崩れる点にも気をつけます。
使用例・適したシーン
- 記事ページの目次
- ドキュメントサイトのナビ
- ダッシュボードのメニュー
よくある質問
目次がスクロールに追従しません。なぜですか
親要素やその祖先に overflow:hidden や overflow:auto が指定されていると position:sticky は機能しません。また grid の align-items:start を消すと列が伸びて追従位置がずれます。まず祖先要素の overflow とこの2点を確認してください。
サイドバーの幅を変えるにはどうしますか
grid-template-columns の最初の値、たとえば 200px を好きな数値に変えるだけでサイドバー幅を調整できます。本文側は 1fr のまま残りの幅を自動で使います。固定する高さ位置は top の値で調整します。