スティッキーサイドバーレイアウト
このスティッキーサイドバーは、本文をスクロールしてもサイドバーが画面内に追従して止まる2カラムレイアウトです。 display:grid で本文とサイドバーを左右に分け、サイドバーに position:sticky と top を指定するだけで、JavaScript なしに固定追従を実現します。
解説
このスティッキーサイドバーは、本文をスクロールしてもサイドバーが画面内に追従して止まる2カラムレイアウトです。display:grid で本文とサイドバーを左右に分け、サイドバーに position:sticky と top を指定するだけで、JavaScript なしに固定追従を実現します。本文側には min-width:0 を入れて、長い文章や画像でレイアウトが崩れるのを防いでいます。広い画面では2カラム、狭い画面では1カラムに切り替えるのがセオリーです。
使う場面
- ブログ記事の横に目次や関連リンクを常時表示
- 商品ページで購入ボタンや価格を追従させる
- ドキュメントサイトのナビゲーション固定
カラムの幅は grid-template-columns の数値（例：1fr 220px）で調整します。固定位置は top の値で決まり、固定ヘッダーがある場合はその高さ分だけ余白を取ります。注意点として、position:sticky は親要素に overflow:hidden があると効かなくなることがあります。また追従できる範囲は親要素の高さまでなので、サイドバーが本文より長いと途中で止まります。スマホでは縦積みにして固定を外すのが読みやすくなります。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
サイドバーが固定されず一緒にスクロールしてしまいます。
position:stickyは親要素にoverflow:hiddenやoverflow:autoが付いていると効かなくなります。また高さの基準となる親要素が必要です。トップからの固定位置はtopの値で指定するので、topが設定されているかも確認してください。
スマホでは縦に並べたいのですが可能ですか？
可能です。メディアクエリでgrid-template-columnsを1列に変え、サイドバーのposition:stickyを解除すれば縦積みになります。狭い画面では追従させないほうが本文を読みやすく、推奨される作り方です。