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 ではコンテナクエリは機能しません。

✅ まとめ

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

🔎 ポイント

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

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