スティッキーサイドバーレイアウト
スクロールしても左のナビゲーションがついてくる、2カラムのレイアウトです。土台は CSS Grid で、 grid-template-columns:200px 1fr によりサイドバーを固定幅、本文を可変幅にしています。
解説
スクロールしても左のナビゲーションがついてくる、2カラムのレイアウトです。土台は CSS Grid で、grid-template-columns:200px 1fr によりサイドバーを固定幅、本文を可変幅にしています。追従の主役は position:sticky と top:20px で、JavaScript を一切使わずに「親要素の範囲内でスクロールに合わせて貼り付く」挙動を実現しているのが特徴です。align-items:start を入れているのも重要で、これがないとサイドバーが本文の高さに引き伸ばされて sticky が効きにくくなります。
使う場面
- ドキュメントやヘルプページの目次を常に見える位置に置きたいとき
- 料金表やプラン選択で、長い説明を読みながら操作パネルを残したいとき
- 記事の目次ナビをスクロールに追従させたいとき
幅は grid-template-columns の数値を変えるだけで調整できます。スマホでは横並びが窮屈になるため、grid-template-columns:1fr に切り替えて縦積みにする対応がおすすめです。top の値はヘッダーの高さに合わせると、固定ヘッダーと重ならず収まります。
使用例・適したシーン
- 記事ページの目次
- ドキュメントサイトのナビ
- ダッシュボードのメニュー
よくある質問
サイドバーが追従しないのですが？
多くの場合、親要素にalign-items:stretchが効いてサイドバーが本文の高さまで伸び、貼り付く余地が無くなっています。このサンプルのようにalign-items:startを指定し、親やbodyにoverflow:hiddenが掛かっていないか確認してください。
スマホ表示はどうすればいい？
メディアクエリで画面が狭いときにgrid-template-columnsを1frにして縦並びにするのが定番です。サイドバーを上に置くか、ハンバーガーメニューに格納すると窮屈さを避けられます。