| name | css-layout |
| description | CSSのレイアウト課題に対し、中央配置・レスポンシブグリッド・ページ骨格・サイズ制御のパターンを選定し適用する。Flexbox、Grid、clamp、aspect-ratio、コンテナクエリを扱う。中央配置、スティッキーフッター、オーバーレイ、カードグリッド、幅制約の実装時に使う。アニメーション、タイポグラフィ刻度、カラーテーマ、JavaScript主導のレイアウトには使わない。 |
CSSレイアウト・パターン選択
課題を分類し、名前付きパターンと核心CSSへ落とし込む。詳細は references/ をオンデマンドで読む。
いつ使うか
- 要素の中央配置で手段が定まらないとき
- レスポンシブなグリッドやカード列を組むとき
- Header / Main / Footer やサイドバーを含むページ骨格を設計するとき
clamp や aspect-ratio、コンテナクエリでサイズや見え方を制御するとき
使わない場合
- アニメーション・トランジション主体の演出
- フォントサイズスケールや行間などタイポグラフィ専用の調整
- テーマカラー／デザイントークンだけの変更
- レイアウトを JavaScript で測り回す実装方針（仮想リスト等）が主題のとき
手順
1. 課題を分類する
ユーザーの要求を次の分岐に当てはめる。迷ったら Step 4 の即決表を先に当てる。
何を実現したい？
│
├─ 要素を中央に配置したい
│ ├─ 単一要素 → Super Centered または Autobot
│ ├─ 複数要素を縦に → Gentle Flex
│ ├─ グループ全体を → Content Center
│ └─ オーバーレイ／モーダル → Pop n' Plop
│
├─ レスポンシブなグリッド／カード配置
│ ├─ メディアクエリなしで列を組む → RAM
│ ├─ 折り返して縦に積む → Deconstructed Pancake
│ └─ コンテナ幅に応じてスタイルを切る → Container Query
│
├─ ページ全体の骨格
│ ├─ Header + Main + Footer → Pancake Stack
│ └─ サイドバー込みの定番グリッド → Holy Grail
│
└─ サイズを制御したい
├─ 幅の最小・最大・希望値 → Clamping（clamp）
└─ 縦横比を固定 → Aspect Ratio
2. 詳細を読み込む
分類結果に応じて、次の いずれかだけ を読む（トークン節約のため一ファイルずつ）。
| 分類 | 読むファイル |
|---|
| 中央配置 | references/centering.md |
| レスポンシブ | references/responsive.md |
| ページ構造 | references/page-structure.md |
| コンポーネント寸法 | references/component.md |
3. 実装する
- 参照ファイル内の When（適用条件）が今回の要件と一致することを確認する。
- 核心コードをそのまままたは変数名・寸法だけ差し替えて適用する。
- 同ファイルの Gotchas（注意点）をすべて確認する。
4. 即決表（迷い回避）
| やりたいこと | 最初に試すパターン |
|---|
| とにかく中央に置きたい | Super Centered（place-items: center） |
| カードを並べたい | RAM（repeat(auto-fit, minmax(...))） |
| フッターを下に固定したい | Pancake Stack（grid-template-rows: auto 1fr auto） |
| 幅を柔軟に制限したい | Clamping（clamp(min, preferred, max)） |
5. 検証する
references/antipatterns.md に該当する実装になっていないか確認する。- 用語や一覧の突合が必要なら
references/quick-reference.md を開く。
- 具体例が欲しい場合のみ
references/examples.md を読む。
参照ファイル一覧
references/centering.md — 中央配置パターン（5種）references/responsive.md — レスポンシブパターン（4種）references/page-structure.md — ページ構造パターン（2種）references/component.md — コンポーネント寸法（1種）references/quick-reference.md — 全パターン早見表references/antipatterns.md — 避けるべき実装references/examples.md — 実装例
エラーハンドリング
- どのパターンにも当てはまらない:
references/quick-reference.md の表で最も近い行を選び、そのパターンの詳細ファイルを読む。
- パターンは決まったがコードがブラウザで崩れる:
references/antipatterns.md と該当パターンの Gotchas を再確認する。親の display／min-height／overflow が前提を壊していないか見る。
- フロントマター（name / description）を変更したとき: リポジトリの skills ルートで次を実行し、成功まで文言を直す。
python3 skill-creator/scripts/validate-metadata.py --name "css-layout" --description "[新しい説明文]"
- スキル構造の監査:
skill-creator/references/checklist.md の各項目に照らして差し戻し原因を特定する。
メタデータ検証（開発者向け）
description を更新する場合は、必ず上記 validate-metadata.py を通す。三人称・1024文字以内・名前とディレクトリ名 css-layout の一致を満たす。
