固定サイドバー2カラム
固定サイドバー2カラムは、左にサイドバー、右に本文を並べ、スクロールしてもサイドバーが画面上部に留まるレイアウトです。 display:grid で 200px と 1fr の2列を作り、サイドバーに position:sticky と top:20px を与えることで、本文を読み進めても定位置に貼り付きます。
解説
固定サイドバー2カラムは、左にサイドバー、右に本文を並べ、スクロールしてもサイドバーが画面上部に留まるレイアウトです。display:grid で 200px と 1fr の2列を作り、サイドバーに position:sticky と top:20px を与えることで、本文を読み進めても定位置に貼り付きます。height:fit-content を併用し、サイドバー自体は中身の高さで収まるようにしています。
使う場面
- ドキュメントやブログの目次・カテゴリーナビ
- 管理画面の左メニューと右コンテンツ
- 商品詳細ページで購入ボックスを追従させたいとき
サイドバーの幅は grid-template-columns の 200px を、追従し始める位置は sticky の top を変えて調整します。このサンプルは max-width:680px 以下で1列に切り替わり、サイドバーの position を static に戻して縦積みにするため、スマホでも破綻しません。固定要素が縦に長くなりすぎると本文が読みにくくなるので、サイドバーの中身は要点に絞るのがコツです。
よくある質問
サイドバーの幅を変えるにはどこを編集しますか
grid-template-columns の最初の値 200px を変更します。ここを広げたり狭めたりするだけで、本文側の幅は自動的に調整されます。
スマホでは横並びのままですか
いいえ。画面幅680px以下で1列の縦積みに切り替わり、サイドバーの固定も解除されるため、狭い画面でも自然に表示されます。