CSS Container Queries 完全ガイド｜コンポーネント駆動デザインの新常識【2026年版】

メディアクエリ（@media）はビューポート（画面）のサイズに基づくレスポンシブ実装ですが、コンポーネント指向の現代ウェブ開発では「親コンテナのサイズに応じた調整」が必要です。これを実現するのが CSS Container Queries です。2026年現在、全主要ブラウザでサポートされ、実務投入可能な機能となっています。

Container Queries とは

Container Queries は、要素の親コンテナのサイズに応じてスタイルを変更できる機能です。同じコンポーネントが、サイドバーでは縦積み、メインエリアでは横並びに、という実装が容易になります。

/* 親要素を「クエリコンテナ」として宣言 */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* コンテナが 400px 以上の時だけ横並び */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

メディアクエリとの違い

項目	Media Queries	Container Queries
基準	ビューポート全体	親コンテナ
用途	ページ全体のレイアウト	コンポーネント単位
再利用性	低い（配置場所に依存）	高い（どこに置いても動く）

メディアクエリでは「画面幅 768px 以上で横並び」と書くしかありませんでしたが、同じコンポーネントをサイドバー・メインエリア・フッターに配置すると、それぞれで異なる調整が必要になります。Container Queries はこの問題を解決します。

ブラウザ対応（2026年4月）

ブラウザ	サポート開始
Chrome 105	2022年8月
Safari 16	2022年9月
Edge 105	2022年9月
Firefox 110	2023年2月

全主要ブラウザで 2年以上前から安定サポートされています。

container-type の3つのモード

size（両軸）

.container {
  container-type: size;
}

幅・高さの両方をクエリに使えます。ただし、親要素の高さに依存するレイアウトは避けるべき（レイアウトシフトの原因）のため、使用頻度は低めです。

inline-size（幅のみ、推奨）

.container {
  container-type: inline-size;
}

最もよく使われるモードです。幅のみをクエリに使い、高さは子要素で自動的に決まります。実務ではほぼこれを使用します。

normal

.container {
  container-type: normal;
}

クエリ対象外にします。親要素のデフォルト挙動を保ったまま、@container style() などスタイルクエリだけを使いたい場合に使います。

実践パターン

1. 汎用的なカードコンポーネント

.card-wrapper {
  container-type: inline-size;
}

.card {
  padding: 1rem;
  border-radius: 0.5rem;
  background: white;
}

/* 狭い時は縦積み */
.card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* 400px 以上で横並び */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
  }
  .card-image {
    aspect-ratio: 1;
  }
}

/* 600px 以上で余裕のあるレイアウト */
@container (min-width: 600px) {
  .card {
    grid-template-columns: 200px 1fr;
    padding: 1.5rem;
  }
}

このコンポーネントは、配置場所を問わず適切なレイアウトになります。

2. ナビゲーションの適応

.nav-container {
  container-type: inline-size;
}

.nav {
  display: flex;
  gap: 0.5rem;
}

.nav-label {
  display: none; /* 狭い時はアイコンのみ */
}

@container (min-width: 500px) {
  .nav-label {
    display: inline; /* 広い時はラベル表示 */
  }
}

3. サイドバーとメインエリアで同じコンポーネントを使う

<aside class="sidebar">
  <div class="card-wrapper">
    <article class="card">...</article>
  </div>
</aside>

<main class="main">
  <div class="card-wrapper">
    <article class="card">...</article>
  </div>
</main>

.sidebar .card-wrapper {
  container-type: inline-size;
  width: 280px;
}

.main .card-wrapper {
  container-type: inline-size;
  width: 100%;
  max-width: 800px;
}

同じ .card が、配置場所に応じて自動的にレイアウトを切り替えます。

コンテナクエリ単位

Container Queries では、コンテナのサイズに対する相対単位が使えます。

単位	意味
cqw	コンテナの幅の 1%
cqh	コンテナの高さの 1%
cqi	コンテナのインライン方向の 1%（通常は幅）
cqb	コンテナのブロック方向の 1%（通常は高さ）
cqmin	cqi と cqb の小さい方
cqmax	cqi と cqb の大きい方

.card-title {
  /* コンテナ幅の 5% を基準にフォントサイズを決定 */
  font-size: clamp(1rem, 5cqi, 2rem);
}

.card-padding {
  /* コンテナ幅の 4% をパディングに */
  padding: 4cqi;
}

これにより、コンテナサイズに応じてなめらかにスケールするUIが作れます。

スタイルクエリ（Style Queries）

CSS カスタムプロパティの値に応じてスタイルを変える機能です（Chrome 111+でサポート）。

.theme {
  container-name: theme;
}

.theme.dark {
  --theme: dark;
}

@container theme style(--theme: dark) {
  .card {
    background: #1e293b;
    color: #f1f5f9;
  }
}

テーマ切り替えなどの実装で重宝します。

パフォーマンスへの配慮

Container Queries はブラウザに追加の計算を要求します。以下に注意しましょう。

1. クエリコンテナを広範囲にしない

/* 悪い例: body 全体をクエリコンテナに */
body {
  container-type: inline-size;
}

/* 良い例: コンポーネント単位 */
.card-wrapper {
  container-type: inline-size;
}

2. container-type: size は慎重に

高さが動的に変わるレイアウトでは、循環参照を引き起こす可能性があります。幅だけで十分な場合は inline-size を使いましょう。

3. ブレークポイントの数を適切に

/* 過度にブレークポイントを増やすと保守が困難 */
@container (min-width: 200px) { ... }
@container (min-width: 300px) { ... }
@container (min-width: 400px) { ... }
@container (min-width: 500px) { ... }

実務では 2-3 個のブレークポイントで十分なことが多いです。

メディアクエリとの併用

実務では両方を組み合わせて使います。

/* ページ全体のレイアウトはメディアクエリ */
@media (min-width: 1024px) {
  .layout {
    display: grid;
    grid-template-columns: 280px 1fr;
  }
}

/* コンポーネントの内部は Container Queries */
.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card { /* ... */ }
}

まとめ

CSS Container Queries は、コンポーネント駆動の現代的な Web 開発における必須機能です。

主な利点:

• コンポーネントの再利用性向上: 配置場所を問わず動作
• メディアクエリの補完: ビューポート以外の軸でのレスポンシブ
• 保守性の向上: 実装がコンポーネントに閉じる

小さなコンポーネントから導入し始めるのがおすすめです。特にカード、ナビゲーション、フォームなど、複数の場所で使い回すコンポーネントで効果を実感できます。

参考リンク

• CSS Container Queries - MDN Web Docs
• A Primer On CSS Container Queries - CSS-Tricks
• Say Hello to CSS Container Queries - Chrome for Developers
• CSS Containment Module Level 3 - W3C