CSSコンテナクエリ完全ガイド｜親要素に応じたデザイン制御

Webデザインにおいて、レスポンシブデザインは欠かせません。これまでは画面幅に応じてレイアウトを変更する「メディアクエリ」が主流でしたが、CSSコンテナクエリの登場により、より柔軟なデザインが可能になりました。

本記事では、CSSコンテナクエリの基本から応用まで、具体的なコード例を交えてわかりやすく解説します。
特に「container: card / inline-size;」の意味や使い方に焦点を当て、実際のデザインに役立つノウハウも紹介します。

コンテナクエリとは？

コンテナクエリ（Container Queries）は、親要素のサイズに応じて子要素のスタイルを変更するCSSの新機能です。

従来のメディアクエリは「ビューポート（画面幅）」に応じてスタイルを切り替えていましたが、コンテナクエリでは親要素の幅や高さを基準にデザインが切り替わるのが大きな特徴です。

これにより、コンポーネント単位のデザイン管理がしやすくなり、再利用性の高いモジュールデザインが実現します。

🧩 container: card / inline-size; の意味と役割

「container: card / inline-size;」は、次の2つの要素で構成されています。

.container {
  container: card / inline-size;
}

🔹 card（コンテナ名）

• コンテナクエリに名前を付けることで、他のコンテナとの区別が可能です。
• 複数のコンテナがある場合に、@container で個別指定できるため、管理しやすくなります。

🔹 inline-size（サイズ基準）

• 親要素の横幅の変化に応じてスタイルが切り替わる指定です。
• block-size（高さ）、size（幅と高さの両方）も指定できますが、最も一般的な使用例は inline-size です。

実践！コンテナクエリを使ったカードレイアウト

HTML

<div class="card">
  <h2>タイトル</h2>
  <p>コンテナクエリを活用したカードデザインのサンプルです。</p>
</div>

CSS

.card {
  container: card / inline-size; /* 横幅の変化に対応 */
  width: 100%;
  max-width: 400px;
  padding: 20px;
  border: 2px solid #333;
  background-color: #f5f5f5;
}

@container card (width > 300px) {
  .card {
    background-color: #4CAF50;
    color: #fff;
  }
}

効果

✅ 親要素の横幅が300pxを超えた場合に、背景色が緑に変化します。
✅ ビューポートのサイズではなく、親要素の幅に応じてデザインが変わるのがポイントです。

🚀 block-size や size も活用しよう

inline-size 以外にも、デザインに応じて以下の指定が可能です。

❗ block-size の使用例

.container {
  container: card / block-size; /* 高さの変化に対応 */
  height: 300px;
  border: 2px solid #2196F3;
  padding: 20px;
}

@container card (height > 250px) {
  .content {
    background-color: #2196F3;
    color: #fff;
  }
}

✅ 高さが250pxを超えると背景色が変わる

❗ size の使用例（幅・高さの両方に対応）

.container {
  container: card / size; /* 幅と高さの両方に対応 */
  width: 100%;
  height: 300px;
  border: 2px solid #FFC107;
  padding: 20px;
}

@container card (width > 400px) and (height > 250px) {
  .content {
    background-color: #FFC107;
    color: #000;
  }
}

✅ 幅が400pxかつ高さが250pxを超えると背景色が変わる

コンテナクエリが活躍する場面

• カードレイアウト：サイズに応じて柔軟にデザインを切り替えられる
• ナビゲーションメニュー：サイドバーの幅に応じてスタイルを変更可能
• モーダルウィンドウ：可変サイズのウィンドウに対応
• ブログ記事やランディングページなどの再利用可能なコンポーネントに最適

注意点

• コンテナクエリは、親要素が display: block;, inline-block;, flex;, grid; などのレイアウトコンテキストを持つ必要があります。
• position: absolute; や float ではコンテナクエリは機能しません。

コンテナクエリとメディアクエリの違い

コンテナクエリとメディアクエリはどちらもレスポンシブデザインに使われますが、基準となる対象が異なります。

メディアクエリは「画面全体のレイアウト」、コンテナクエリは「コンポーネント単位のレイアウト」を制御するものとして使い分けるのが実務での推奨パターンです。両方を組み合わせることで、より柔軟なレスポンシブデザインが実現できます。

コンテナクエリのブラウザ対応状況

2025年時点では主要ブラウザすべてがコンテナクエリに対応しています。非対応ブラウザへのフォールバックが必要な場合は、@supportsクエリでコンテナクエリの対応を検出できます。

よくある質問（FAQ）

Q. コンテナクエリはメディアクエリの代替になりますか？

完全な代替ではありません。ページ全体のレイアウト変更にはメディアクエリが適しており、コンポーネント単位のスタイル制御にはコンテナクエリが適しています。実務では両方を組み合わせて使うのが一般的です。

Q. container-typeのinline-sizeとsizeの違いは何ですか？

inline-sizeは横幅のみを基準にしたクエリで、最も一般的に使われます。sizeは横幅と高さの両方を基準にできますが、要素の高さがコンテンツに依存する場合はレイアウトが不安定になることがあるため、通常はinline-sizeを推奨します。

Q. コンテナクエリのパフォーマンスへの影響はありますか？

コンテナクエリはブラウザのレイアウトエンジンに組み込まれているため、JavaScriptでResizeObserverを使った実装と比べてパフォーマンスは良好です。通常の使用範囲では体感できるほどのパフォーマンス影響はありません。

Q. コンテナクエリをReactやVueで使えますか？

コンテナクエリは純粋なCSS機能なので、ReactやVueなどのフレームワークでもそのまま使えます。コンポーネントのCSSファイルやCSS Modulesにcontainerプロパティと@containerルールを記述するだけで動作します。

まとめ

CSSコンテナクエリは、これからのレスポンシブデザインにおいて欠かせない技術です。
特に、コンポーネント単位のデザイン制御がしやすくなり、再利用可能なモジュール設計に最適です。

ポイント

✅ container: card / inline-size; → 横幅の変化に対応（最も一般的）
✅ container: card / block-size; → 高さの変化に対応
✅ container: card / size; → 幅と高さの両方に対応

今後、レスポンシブデザインの新常識として、ぜひ積極的に活用してみてください！