レスポンシブパターン

Container Queries、流動的なタイポグラフィ、モバイルファーストの戦略を使用した最新のレスポンシブデザインパターン（2026年のベストプラクティス）。

概要

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

コアコンセプト

Container Queries vs Media Queries

機能	Media Queries	Container Queries
応答対象	ビューポートサイズ	コンテナサイズ
コンポーネント再利用	コンテキスト依存	真に移植可能
ブラウザサポート	汎用	2023年以降がベースライン
ユースケース	ページレイアウト	コンポーネントレイアウト

モダン CSS レイアウト

Read("${CLAUDE_SKILL_DIR}/rules/css-subgrid.md") を読み込んで CSS Subgrid パターンを確認してください：ネストされたグリッドの配置、タイトル・コンテンツ・アクションが整列されたカードレイアウト、2次元 Subgrid。

Read("${CLAUDE_SKILL_DIR}/rules/css-intrinsic-responsive.md") を読み込んで本質的にレスポンシブなレイアウトを確認してください：auto-fit/minmax グリッド、あらゆるものに対する clamp()、コンポーネントロジック向けの Container Queries、メディアクエリゼロパターン。

Read("${CLAUDE_SKILL_DIR}/rules/responsive-foldables.md") を読み込んで折りたたみ式・マルチスクリーンデバイスのサポートを確認してください：env(safe-area-inset-*)、ビューポートセグメントクエリ、デュアルスクリーンレイアウト、段階的な機能拡張。

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

CSS パターン

Read("${CLAUDE_SKILL_DIR}/rules/css-patterns.md") を読み込んで完全な CSS 例を確認してください：Container Queries、cqi/cqb ユニット、clamp() を使用した流動的なタイポグラフィ、モバイルファーストのブレークポイント、CSS Grid パターン、スクロールクエリ。

対応パターン： Container Query の基礎、Container Query ユニット（cqi/cqb）、clamp() を使用した流動的なタイポグラフィ、コンテナベースの流動的なタイポグラフィ、モバイルファーストのブレークポイント、CSS Grid レスポンシブパターン、Container スクロールクエリ（Chrome 126以上）。

React パターン

Read("${CLAUDE_SKILL_DIR}/rules/react-patterns.md") を読み込んで完全な React 例を確認してください：ResponsiveCard コンポーネント、Tailwind Container Queries、useContainerQuery フック、レスポンシブ画像。

対応パターン： Container Queries を使用したレスポンシブコンポーネント、Tailwind CSS Container Queries、useContainerQuery フック、レスポンシブ画像パターン。

アクセシビリティの考慮事項

/* 重要：流動的なタイポグラフィには常に rem を含める */
/* これによりユーザーのフォント設定が尊重される */

/* ❌ 間違い：ビューポートのみではユーザーの設定が無視される */
font-size: 5vw;

/* ✅ 正解：rem を含めてユーザー設定を尊重する */
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);

/* ユーザーのズーム機能は引き続き機能する必要がある */
@media (min-width: 768px) {
  /* ブレークポイントには px ではなく em/rem を使用するのが理想的 */
  /* (ブラウザはまだ px を使用しているが、ユーザーズームを考慮する) */
}

アンチパターン（禁止）

/* ❌ 禁止：テキストに対しビューポートユニットのみを使用 */
.title {
  font-size: 5vw; /* ユーザーのフォント設定が無視される！ */
}

/* ❌ 禁止：cqw/cqh を使用（cqi/cqb を使用する） */
.card {
  padding: 5cqw; /* cqw = コンテナ幅、論理的ではない */
}
/* ✅ 正解：論理ユニットを使用 */
.card {
  padding: 5cqi; /* コンテナインライン = 論理的な方向 */
}

/* ❌ 禁止：container-type なしの Container Queries */
@container (min-width: 400px) {
  /* 親の container-type がないと機能しない！ */
}

/* ❌ 禁止：デスクトップファーストのメディアクエリ */
.element {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
  .element {
    grid-template-columns: 1fr; /* 上書き = より多くの CSS */
  }
}

/* ❌ 禁止：テキストに固定ピクセルブレークポイント */
@media (min-width: 768px) {
  body { font-size: 18px; } /* rem を使用すること！ */
}

/* ❌ 禁止：Container Queries の過度なネスト */
@container a {
  @container b {
    @container c {
      /* 複雑すぎる、アーキテクチャを再検討する */
    }
  }
}

ブラウザサポート

機能	Chrome	Safari	Firefox	Edge
Container Size Queries	105+	16+	110+	105+
Container Style Queries	111+	❌	❌	111+
Container Scroll-State	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	高	Container Queries、cqi/cqb、流動的なタイポグラフィ、グリッド、スクロールクエリ
React	rules/react-patterns.md	高	Container Query コンポーネント、Tailwind、useContainerQuery、レスポンシブ画像
PWA	rules/pwa-service-worker.md	高	Workbox キャッシング戦略、VitePWA、更新管理
PWA	rules/pwa-offline.md	高	オフラインフック、バックグラウンド同期、インストールプロンプト
アニメーション	rules/animation-motion.md	高	モーションプリセット、AnimatePresence、View Transitions
アニメーション	rules/animation-scroll.md	中	CSS スクロール駆動アニメーション、視差、段階的な機能拡張
タッチ・モバイル	rules/touch-interaction.md	高	タッチターゲット（44px 最小）、親指ゾーン、ピンチズーム、セーフエリア、ジェスチャー

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

主要な判断

判断	オプション A	オプション B	推奨
クエリタイプ	Media Queries	Container Queries	コンポーネント向けは Container、レイアウト向けは Media
コンテナユニット	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 解決内容: レスポンシブグリッドと flexbox レイアウト

container-units

キーワード: cqi、cqb、container width、container height 解決内容: コンテナの寸法に対する相対的なサイジング

リファレンス

Read("${CLAUDE_SKILL_DIR}/references/<file>") でオンデマンド読み込み：

ファイル	内容
container-queries.md	Container Query パターン
fluid-typography.md	アクセシブルな流動的タイプスケール