スティッキーサイドバーレイアウト
このレイアウトは、本文を左に、補足情報のサイドバーを右に置いた2カラム構成です。 display:grid に grid-template-columns:1fr 240px を指定して可変の本文列と固定幅のサイド列に分け、サイドバー要素に position:sticky を与えることで、本文を読み進めてもサイドバ…
解説
このレイアウトは、本文を左に、補足情報のサイドバーを右に置いた2カラム構成です。display:grid に grid-template-columns:1fr 240px を指定して可変の本文列と固定幅のサイド列に分け、サイドバー要素に position:sticky を与えることで、本文を読み進めてもサイドバーが画面内にとどまります。先に紹介した目次タイプとは左右の配置が逆で、関連リンクや広告枠を脇に追従させる用途に向いています。
使う場面
- 記事本文を主役にしつつ、関連記事や著者プロフィールを横に添えたいとき
- ブログのサイドバーに人気記事やカテゴリ一覧を固定したいとき
- 商品説明の横に価格やカート導線を追従させたいとき
サイドバー幅は grid-template-columns の240pxを、追従の固定位置はサイドバー側の top を調整します。画面幅640px以下では1カラムへ切り替わるメディアクエリを備え、スマホでは本文の下にサイドバーが回り込みます。注意点として、position:sticky は親に overflow 指定があると効かないこと、サイドバーの中身が画面より長いと追従しないことに気をつけます。
使用例・適したシーン
- 記事ページの目次
- ドキュメントサイトのナビ
- ダッシュボードのメニュー
よくある質問
目次タイプのスティッキーレイアウトと何が違いますか
基本の仕組みは同じく grid と position:sticky ですが、こちらは本文が左、サイドバーが右の配置で、サイド列を 240px の固定幅にしています。関連リンクや著者情報を本文の脇に添える用途に向いた構成です。
サイドバーが追従しないことがあります
サイドバーの中身が画面の高さより長いと、最後までスクロールするまで固定が始まりません。また親要素に overflow:hidden などがあると sticky 自体が無効になります。中身の量と祖先のスタイルを確認してください。