スティッキー サイドバーレイアウト
このスニペットは、本文をスクロールしてもサイドバーが画面内に留まり続ける 2 カラムレイアウトを、CSS だけで実現したものです。全体を display:grid で本文 1fr と固定幅 260px のサイドバーに分け、サイドバーに position:sticky と top:1rem を指定することで、スクロー…
解説
このスニペットは、本文をスクロールしてもサイドバーが画面内に留まり続ける 2 カラムレイアウトを、CSS だけで実現したものです。全体を display:grid で本文 1fr と固定幅 260px のサイドバーに分け、サイドバーに position:sticky と top:1rem を指定することで、スクロール位置がそのしきい値を超えると貼り付いて追従します。重要なのは親のグリッドに align-items:start を付けている点で、これがないとサイドバーが本文の高さに引き伸ばされて sticky が効きません。
こんな場面に
- 長い記事の脇に目次や著者情報を常に見せておきたいブログ
- 商品ページで購入ボタンや関連情報を追従させたいケース
- ドキュメントサイトのナビゲーションを画面内に固定したい用途
幅や余白は grid-template-columns と gap で調整します。max-width:640px のメディアクエリで 1 カラムに切り替え、スマホではサイドバーを本文の下へ回します。注意点として、position:sticky は親要素に overflow:hidden などが付いていると効かなくなります。またサイドバーの中身が画面の高さより長いと、最下部までスクロールしないと追従が止まって見えることがあるため、中身は必要十分な量に抑えるのがおすすめです。
使用例・適したシーン
- 記事ページの目次
- ドキュメントサイトのナビ
- ダッシュボードのメニュー
よくある質問
サイドバーが貼り付かないときは
親のグリッドに align-items:start が付いているか、また親要素に overflow:hidden などが指定されていないかを確認してください。これらが原因で position:sticky が効かなくなることがよくあります。
JavaScript は必要ですか
不要です。追従は CSS の position:sticky だけで実現しており、スクロール監視のスクリプトは使っていません。HTML と CSS をそのまま使えば動作します。