responsive-patterns

レスポンシブパターン

React アプリケーション向けの最新のレスポンシブデザインパターン。コンテナクエリ、流動的なタイポグラフィ、モバイルファースト戦略を活用します（2026年のベストプラクティス）。

概要

• コンテナに適応する再利用可能なコンポーネントの構築
• 滑らかに拡大縮小する流動的なタイポグラフィの実装
• メディアクエリが過剰にならないレスポンシブレイアウトの作成
• 複数のコンテキストで使えるデザインシステムコンポーネントの構築
• 可変のコンテナサイズ（サイドバー、モーダル、グリッド）に合わせた最適化

コアコンセプト

コンテナクエリとメディアクエリの比較

機能	メディアクエリ	コンテナクエリ
対応対象	ビューポートのサイズ	コンテナのサイズ
コンポーネントの再利用	コンテキストに依存	真にポータブル
ブラウザーのサポート	普遍的	Baseline 2023+
用途	ページレイアウト	コンポーネントレイアウト

最新の CSS レイアウト

CSS Subgrid パターン（ネストしたグリッドの配置、タイトル／コンテンツ／アクションを揃えたカードレイアウト、2 次元のサブグリッド）については、Read("rules/css-subgrid.md") を読み込んでください。

本質的にレスポンシブなレイアウト（auto-fit/minmax グリッド、あらゆる要素を流動的にする clamp()、コンポーネントのロジックに使うコンテナクエリ、メディアクエリを使わないパターン）については、Read("rules/css-intrinsic-responsive.md") を読み込んでください。

折りたたみ式／マルチスクリーンデバイスのサポート（env(safe-area-inset-*)、ビューポートセグメントクエリ、デュアルスクリーンレイアウト、プログレッシブエンハンスメント）については、Read("rules/responsive-foldables.md") を読み込んでください。

主なパターン： CSS Subgrid による配置、本質的にレスポンシブなグリッド（auto-fit + minmax）、流動的な clamp() スケール、折りたたみ式デバイスのレイアウト、セーフエリアのインセット、ビューポートセグメントクエリ。

CSS パターン

コンテナクエリ、cqi/cqb 単位、clamp() を使った流動的なタイポグラフィ、モバイルファーストのブレークポイント、CSS Grid パターン、スクロールクエリの完全な CSS サンプルについては、Read("rules/css-patterns.md") を読み込んでください。

主なパターン： コンテナクエリの基本、コンテナクエリ単位（cqi/cqb）、clamp() を使った流動的なタイポグラフィ、コンテナベースの流動的なタイポグラフィ、モバイルファーストのブレークポイント、レスポンシブな CSS Grid パターン、コンテナスクロールクエリ（Chrome 126+）。

React パターン

ResponsiveCard コンポーネント、Tailwind のコンテナクエリ、useContainerQuery フック、レスポンシブ画像の完全な React サンプルについては、Read("rules/react-patterns.md") を読み込んでください。

主なパターン： コンテナクエリを使ったレスポンシブコンポーネント、Tailwind CSS のコンテナクエリ、useContainerQuery フック、レスポンシブ画像パターン。

アクセシビリティに関する考慮事項

/* IMPORTANT: Always include rem in fluid typography */
/* This ensures user font preferences are respected */

/* ❌ WRONG: Viewport-only ignores user preferences */
font-size: 5vw;

/* ✅ CORRECT: Include rem to respect user settings */
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);

/* User zooming must still work */
@media (min-width: 768px) {
  /* Use em/rem, not px, for breakpoints in ideal world */
  /* (browsers still use px, but consider user zoom) */
}

アンチパターン（禁止）

/* ❌ NEVER: Use only viewport units for text */
.title {
  font-size: 5vw; /* Ignores user font preferences! */
}

/* ❌ NEVER: Use cqw/cqh (use cqi/cqb instead) */
.card {
  padding: 5cqw; /* cqw = container width, not logical */
}
/* ✅ CORRECT: Use logical units */
.card {
  padding: 5cqi; /* Container inline = logical direction */
}

/* ❌ NEVER: Container queries without container-type */
@container (min-width: 400px) {
  /* Won't work without container-type on parent! */
}

/* ❌ NEVER: Desktop-first media queries */
.element {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
  .element {
    grid-template-columns: 1fr; /* Overriding = more CSS */
  }
}

/* ❌ NEVER: Fixed pixel breakpoints for text */
@media (min-width: 768px) {
  body { font-size: 18px; } /* Use rem! */
}

/* ❌ NEVER: Over-nesting container queries */
@container a {
  @container b {
    @container c {
      /* Too complex, reconsider architecture */
    }
  }
}

ブラウザーのサポート

機能	Chrome	Safari	Firefox	Edge
コンテナサイズクエリ	105+	16+	110+	105+
コンテナスタイルクエリ	111+	❌	❌	111+
コンテナスクロール状態	126+	❌	❌	126+
cqi/cqb 単位	105+	16+	110+	105+
clamp()	79+	13.1+	75+	79+
Subgrid	117+	16+	71+	117+

ルール

各カテゴリには個別のルールファイルがあり、rules/ 内に保存され、必要に応じて読み込まれます。

カテゴリ	ルール	影響度	主なパターン
モダン CSS レイアウト	rules/css-subgrid.md	高	ネストされたグリッドの整列やカードレイアウトに CSS Subgrid を使用
モダン CSS レイアウト	rules/css-intrinsic-responsive.md	高	内在的なレスポンシブレイアウト、auto-fit/minmax、clamp()、ブレークポイントなし
モダン CSS レイアウト	rules/responsive-foldables.md	中	折りたたみ式デバイス、安全領域インセット、ビューポートセグメント
CSS	rules/css-patterns.md	高	コンテナークエリ、cqi/cqb、流動的なタイポグラフィ、グリッド、スクロールクエリ
React	rules/react-patterns.md	高	コンテナークエリコンポーネント、Tailwind、useContainerQuery、レスポンシブ画像
PWA	rules/pwa-service-worker.md	高	Workbox のキャッシュ戦略、VitePWA、更新管理
PWA	rules/pwa-offline.md	高	オフラインフック、バックグラウンド同期、インストールプロンプト
アニメーション	rules/animation-motion.md	高	モーションプリセット、AnimatePresence、ビュー遷移
アニメーション	rules/animation-scroll.md	中	CSS のスクロール駆動型アニメーション、視差効果、段階的な機能強化
タッチとモバイル	rules/touch-interaction.md	高	タッチターゲット（最小 44px）、親指で操作しやすい範囲、ピンチズーム、安全領域、ジェスチャー

合計：6 カテゴリにわたる 10 個のルール

主な決定事項

決定事項	選択肢 A	選択肢 B	推奨
クエリの種類	メディアクエリ	コンテナークエリ	コンポーネントには コンテナー、レイアウトには メディア
コンテナーユニット	cqw/cqh	cqi/cqb	cqi/cqb（論理的で、i18n に対応しやすい）
流動的な文字サイズの基準	vw のみ	rem + vw	rem + vw（アクセシビリティ）
モバイルファースト	はい	デスクトップファースト	モバイルファースト（CSS が少なく、段階的に機能強化できる）
グリッドパターン	auto-fit	auto-fill	カードには auto-fit、アイコンには auto-fill

関連スキル

• design-system-starter - レスポンシブデザインシステムの構築
• ork:performance - CLS、レスポンシブ画像、画像の最適化
• ork:i18n-date-patterns - RTL/LTR のレスポンシブ対応に関する考慮事項

機能の詳細

container-queries

キーワード：@container, container-type, inline-size, container-name 解決する課題：コンポーネント単位のレスポンシブデザイン

fluid-typography

キーワード：clamp(), fluid, vw, rem, scale, typography 解決する課題：ブレークポイントなしで滑らかにフォントサイズを拡大・縮小すること

responsive-images

キーワード：srcset, sizes, picture, art direction 解決する課題：異なるビューポートに対応したレスポンシブ画像

mobile-first-strategy

キーワード：min-width, mobile, progressive, breakpoints 解決する課題：効率的なレスポンシブ CSS アーキテクチャ

grid-flexbox-patterns

キーワード：auto-fit, auto-fill, subgrid, minmax 解決する課題：レスポンシブなグリッドとフレックスボックスのレイアウト

container-units

キーワード：cqi, cqb, container width, container height 解決する課題：コンテナーのサイズを基準とした寸法指定

参考資料

Read("references/<file>") で必要に応じて読み込みます。

ファイル	内容
container-queries.md	コンテナークエリのパターン
fluid-typography.md	アクセシブルな流動的文字サイズのスケール