スティッキーフッターとサイドバーのレイアウト

スティッキーフッターは、コンテンツが少ないときはビューポートの下部にとどまり、コンテンツが多いときはコンテンツに合わせて下へ移動します。歴史的な課題は、コンテンツの高さを把握したりJavaScriptを使用したりせずに、フッターを固定することでした。

現代的な最も簡単な解決策は、body { display: flex; flex-direction: column; min-height: 100vh; }とmain { flex: 1; }です。メインコンテンツが利用可能な空間を埋めるように広がるため、コンテンツの長さに関係なくフッターが下部に押し下げられます。

CSS Gridを使う方法もあります。body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }とします。ヘッダーの高さはauto、メインには1fr（残りの空間を埋める）、フッターにはautoが割り当てられます。明確で簡潔な方法であり、行テンプレートからレイアウトの意図が一目で分かります。

フッターにposition: sticky; bottom: 0を設定すると、スクロール中はビューポートの下部に固定されますが、それはスクロールコンテキストが許容する場合に限られます。スクロールコンテナー内のフッターには適していますが、ページレベルのスティッキーフッターではFlexboxやGridの方が簡潔で適切です。

サイドバーとメインコンテンツのレイアウトは、wrapper { display: flex; }、sidebar { width: 280px; flex-shrink: 0; }、main { flex: 1; min-width: 0; }で構成できます。mainのmin-width: 0により、幅の広いコンテンツを含む場合でもFlexアイテムがコンテナーからはみ出すのを防げます。

Gridでサイドバーを配置するには、wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }とします。サイドバーの列は固定され、コンテンツの列が残りの空間を埋めます。ヘッダー行を追加する場合は、grid-template-rows: auto 1frとし、サイドバーを両方の行にまたがらせます。

モバイルでは、サイドバーをメインコンテンツの上または下に折りたたみます。メディアクエリを使って、Gridの列レイアウトから1列の縦積みレイアウトに切り替えます。または、grid-template-columns: min(280px, 30%) 1frを使うと、ビューポートが小さくなったときにサイドバーも縮む柔軟なレイアウトにできます。

サイドバーを独立してスクロールさせるには、sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }とします。メインコンテンツのスクロール中もサイドバーが表示され続けるため、長文コンテンツページのナビゲーションや目次用サイドバーに適しています。

折りたたみ可能なサイドバーは、全幅の状態とアイコンだけの状態を切り替えます。サイドバーの幅にはCSSカスタムプロパティを使用し、ラッパーに--sidebar-width: 280pxを設定して、クラスによって64pxに切り替えます。トランジションにより、幅の変化を滑らかにアニメーションできます。

固定配置のサイドバー（position: fixed; left: 0; top: 0; height: 100vh）では、サイドバーの幅の分だけメインコンテンツをずらす必要があります。main { margin-left: 280px }のように設定します。モバイルでは、閉じるボタンと背後のオーバーレイを備え、サイドバーがコンテンツの上にスライドして表示されるようにします。

ナビゲーション用サイドバーには<nav>とaria-label="Sidebar navigation"を設定します。折りたたみ可能なサイドバーには、aria-expandedとaria-controlsを備えたアクセシブルな切り替えボタンが必要です。スキップリンクを用意すると、キーボードユーザーはサイドバーを飛ばしてメインコンテンツに移動できます。

サイドバーレイアウトで、メインコンテンツのFlexアイテムにmin-width: 0を設定する必要があるのはなぜですか？

mainにflex: 1を設定したFlexboxや、3行のGridを使うと、最小限のCSSで整ったスティッキーフッターを実現できます。サイドバーレイアウトでは、固定または可変の列定義とレスポンシブなブレークポイントを使って、モバイルで折りたたみます。スティッキーサイドバー、幅の折りたたみ、アクセシブルなARIA属性を組み合わせることで、本番環境に適したサイドバーとフッターのパターンが完成します。