クラスター C4: CSS とデザイン
開発者が知っておくべき CSS レイアウトパターン
レイアウトパターンは見た目の話だけでなく、再利用性とレスポンシブ挙動の予測可能性を高めるための基盤です。
タスクからレイアウトを選ぶ
フォーム中心なら縦 stack、比較やプレビューなら split、パワーツールなら sidebar + content というように役割で選ぶと迷いが減ります。
毎回ゼロから画面構造を決めると、ブレークポイントやアクション配置で同じ議論を繰り返すことになります。
狭い画面でも意味が残るようにする
- 2 カラムは狭幅で縦積みにし、各ペインの見出しを残す。
- 主要アクションは入力や結果の近くに置き、密なサイドバーに埋め込まない。
- 余白、最大幅、sticky ルールをページごとでなく共通化する。
実用的な入出力例
入力
画面: データ比較 要件: 左に入力、右に結果 1024px 以下では縦積み
出力
デスクトップ: 2 カラム split モバイル: 縦 stack + ペイン見出し + 固定アクションバー