CSSレイアウト｜Flexbox・Grid・中央寄せ・sticky

CSSレイアウトとは｜このカテゴリで分かること

CSSレイアウトは、要素を横に並べる、2カラムにする、中央に寄せる、スクロールに追従させるといった、ページの骨組みを作る技術です。このカテゴリでは、CSS Flexbox、CSS Grid、CSSで中央寄せする方法、position: sticky の4本を扱います。floatで組んでいた古い書き方から抜け出したい人や、横並びや中央寄せを毎回検索して書いている初心者から中級のコーダーを想定しています。

現在のレイアウトは、Flexbox と Grid を軸に組むのが標準的です。MDN では Flexbox を、アイテムを行または列に並べる1次元のレイアウト方法と説明しており、Grid は表のように要素を列と行に整列させるものです。どちらを選ぶかで、コードの量と保守のしやすさが変わります。ここでは、その判断の目安と、よくあるつまずきを地図として示します。

読む順番（おすすめの順路）

1. CSS Flexboxの使い方｜横並び・gap・flex:1の基本 … 横並びとgapの基本です。まず一番使う頻度の高い Flexbox から始めます。
2. CSSで中央寄せする方法｜水平・垂直・上下左右の使い分け … 中央寄せを、Flexbox や Grid を使う方法も含めて整理します。
3. CSS Gridの使い方｜2カラム・自動折り返し・aspect-ratio … 2カラムや自動折り返しなど、2次元のレイアウトを学びます。
4. position: stickyが効かない原因｜追従サイドバーの作り方 … 追従サイドバーの作り方と、効かない原因を確認します。

4本と少なめですが、順に読むと一通りのレイアウトが組めるようになります。前提として、box-sizing: border-boxとは｜幅の計算と全体指定のやり方 と CSS positionの使い方｜relative・absolute・fixedの違い を先に読んでおくと理解が早まります。

押さえておきたいポイント（リサーチ）

MDN のフレックスボックスの解説で確認できる要点です。

• Flexbox は1次元のレイアウトで、主軸と交差軸という2つの軸で考えます。既定は flex-direction: row で、flex-direction: column にすると軸が入れ替わります。
• display: flex を親に指定すると、子要素（フレックスアイテム）が既定で同じ高さに揃います。
• 配置は、主軸方向を justify-content、交差軸方向を align-items で指定します。
• アイテムの伸縮は flex（flex-grow・flex-shrink・flex-basis の一括指定）で調整します。
• 使い分けの目安は、1方向の並びなら Flexbox、行と列を同時に決めるなら Grid です（Grid の解説は MDN の CSS グリッドレイアウトのページを参照）。

実際の対応ブラウザや新しい機能は更新されるため、最新は MDN など公式で確認してください。

よくある疑問

Q. Flexbox と Grid はどちらを使えばよいですか。
A. 1方向に並べるなら Flexbox、行と列を同時に決めるなら Grid が目安です。具体例は CSS Flexboxの使い方｜横並び・gap・flex:1の基本 と CSS Gridの使い方｜2カラム・自動折り返し・aspect-ratio を参照してください。

Q. 上下左右の中央寄せの最短の書き方は。
A. 親に display: grid と place-items: center を使う方法などがあります。一覧は CSSで中央寄せする方法｜水平・垂直・上下左右の使い分け にまとめています。

Q. position: sticky が効きません。
A. 親要素の overflow や高さの指定が原因になることが多いです。切り分けは position: stickyが効かない原因｜追従サイドバーの作り方 を見てください。