レイアウト・構造
ページの骨組みをつくる、配置と余白の型。
ページの骨組みをつくる配置と余白の型のカテゴリ。auto-fill のグリッド、columns のメイソンリー、カード、左右分割、ヒーロー、grid-template-areas のホーリーグレイル、記事内の全幅ブレイクアウト、sticky のサイドバーがある。原則はゲシュタルトの近接。何をどれだけ近くに置くかで「同じ仲間」が決まるので、レイアウトは装飾ではなく情報のグループ分けそのものになる。見本はメディアクエリを最小限にして枠幅に追従させているので、部品を置く前に、まず器の切り方を決めるときに引く。
使い分け同じ形の並びは grid-layout、高さが揃わない並びは masonry-layout、1件の器は card-layout。ページ全体はナビと本文があるなら holy-grail、目次を追従させたいなら sticky-sidebar。冒頭は hero-section か split-screen のどちらか1つ。
まず見る3件
- 静的
グリッドレイアウト
Grid Layout
枠幅に応じて列数が自動で増減する等幅グリッド。grid-template-columns の repeat(auto-fill, minmax()) だけで、メディアクエリなしにレスポンシブする基本形。
- 列数は minmax(90px, 1fr) の最小幅だけで決まる。ブレークポイントを書かないので、置かれる枠の幅が変わっても崩れない
- gap は 10px で固定。列数が増減しても余白が同じなら、一覧として同じリズムで読める
- タイルの高さは揃えようとしない。サムネ 52px＋番号だけの構造にしておけば、どの列数でも高さが自然に一致する
- CSSのみ
- 静的
ホーリーグレイル
Holy Grail Layout
ヘッダー／（左ナビ・メイン・右アサイド）／フッターの3段5領域を、CSS Grid の grid-template-areas で組む古典的な万能レイアウト。
- grid-template-areas に領域名を書くだけで配置が決まる。DOM は header→nav→main→aside→footer の読み順のまま
- 列幅は 0.8fr / 1.6fr / 0.9fr。本文を最も広く取り、ナビとアサイドは同格に見えない程度の微差を付ける
- ヘッダーとフッターは auto、中段だけ 1fr。高さが余ったときフッターが浮かず、余りは本文が吸収する
- CSSのみ
- スクロール
スティッキーサイドバー
Sticky Sidebar
本文をスクロールしても、横のサイドレールが position:sticky で画面上部に貼り付いて追従する2カラム。目次や広告、要約を常時見せる型。枠内をスクロールすると挙動が見えます。
- position: sticky; top: 0 だけで追従する。JS のスクロール監視は要らない
- グリッドの align-items: start が必須。既定の stretch だとレールが本文と同じ高さに伸び、貼り付く余地が無くなる
- 祖先に overflow: hidden があると sticky は効かない。効かないときはまず親をたどって確認する
- CSSのみ
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| グリッドレイアウト Grid Layout | 静的 | CSSのみ | 商品・作品などの等幅タイル一覧・メディアクエリ無しで列数を増減させたい格子 | default |
| メイソンリー Masonry Layout | 静的 | CSSのみ | 写真・メモなど高さがばらつくカードの一覧・Pinterest 風に隙間なく積みたい画面 | default |
| カードレイアウト Card Layout | 静的 | CSSのみ | 記事・商品を 1 枚に要約する基本カード・画像→見出し→本文→メタの優先順位を示す一覧 | default |
| スプリットスクリーン Split Screen | 静的 | CSSのみ | LP 冒頭でビジュアルと言葉を半々に置く構図・枠が狭いと上下積みに切り替えたいヒーロー | default / focus / active |
| ヒーローセクション Hero Section | 静的 | CSSのみ | サービス紹介のページ最上部・見出し・一行・主副 CTA を中央に置く第一印象 | default / focus / active |
| ホーリーグレイル Holy Grail Layout | 静的 | CSSのみ | ヘッダー／左ナビ／本文／右アサイド／フッターの管理画面・grid-template-areas で領域を名前で置きたいとき | default |
| フルブリード Full Bleed | 静的 | CSSのみ | 読み幅を絞った記事の中で写真や引用だけを全幅にする・負のマージンや 100vw を使わずに帯を広げたいとき | default |
| スティッキーサイドバー Sticky Sidebar | スクロール | CSSのみ | 記事の目次・購入ボックス・著者情報を追従させる 2 カラム・JS 無しで固定追従したいレール | default / focus |
すべての見本（8件）
- 静的
グリッドレイアウト
Grid Layout
枠幅に応じて列数が自動で増減する等幅グリッド。grid-template-columns の repeat(auto-fill, minmax()) だけで、メディアクエリなしにレスポンシブする基本形。
- CSSのみ
- 静的
メイソンリー
Masonry Layout
高さの違うカードを隙間なく積み上げる石垣（メイソンリー）配置。CSS の columns で縦方向に流し込むだけの、Pinterest 風レイアウト。
- CSSのみ
- 静的
カードレイアウト
Card Layout
画像帯・見出し・本文・メタ情報を縦に積んだ、王道のコンテンツカード。一覧にも詳細にも使える、最も基本的なカード部品。
- CSSのみ
- 静的
スプリットスクリーン
Split Screen
画面を左右50/50に割り、片側にビジュアル・片側にテキストを置くヒーロー。枠が狭いと上下に積み替わる、LP冒頭の定番構図。
- CSSのみ
- 静的
ヒーローセクション
Hero Section
グラデーション背景の上に、見出し・サブコピー・CTAを中央に重ねたページ最上部の主役ブロック。LPやサービス紹介の第一印象をつくる型。
- CSSのみ
- 静的
ホーリーグレイル
Holy Grail Layout
ヘッダー／（左ナビ・メイン・右アサイド）／フッターの3段5領域を、CSS Grid の grid-template-areas で組む古典的な万能レイアウト。
- CSSのみ
- 静的
フルブリード
Full Bleed
読み幅を制限した記事の中で、1つの帯だけを枠の端から端まで広げる全幅ブレイクアウト。本文は狭く、写真や引用だけを大きく見せる型。
- CSSのみ
- スクロール
スティッキーサイドバー
Sticky Sidebar
本文をスクロールしても、横のサイドレールが position:sticky で画面上部に貼り付いて追従する2カラム。目次や広告、要約を常時見せる型。枠内をスクロールすると挙動が見えます。
- CSSのみ