【実案件で使える】新しいレスポンシブ対応 | CSSのコンテナクエリ実装方法を徹底解説

2026年2月2日

生徒

先生、メディアクエリだとサイドバーに配置したカードのレイアウトが崩れてしまいます…もっと柔軟にスタイルを切り替える方法はありませんか？

ペン博士

よーく聞くんだぞ。今日はコンテナクエリについて詳しく解説するぞい！親要素のサイズに応じてスタイルを切り替える最新のCSS機能じゃ！

生徒

そういう機能もあるんですね！ぜひ教えてください！

レスポンシブデザインの実装において、メディアクエリはビューポート全体のサイズを基準にスタイルを切り替えます。しかし、サイドバーとメインエリアで同じコンポーネントを配置したい場合、メディアクエリだけでは柔軟な対応が困難です。

そこで登場したのが、コンテナクエリ（Container Queries）です。コンテナクエリを使えば、親要素のサイズに応じて子要素のスタイルを動的に変更でき、より柔軟でモジュール指向のレスポンシブデザインが実現できます。

本記事では、コンテナクエリの基本から実案件での導入方法、応用パターンまで、実装例を交えながら詳しく解説します。

「学習→就職」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

吉池さん
Web制作を体系的に学びたいと考え、WithCodeに入会されました。卒業後は、WithCode経由で実案件を経験したほか、ご自身でも案件を獲得。今後はWeb系の業務に携わりたいという思いから転職活動を行い、受託開発の会社への転職を成功させました。

詳しくはこちらの記事をご覧ください。

吉池さんの主な制作実績はこちら

信用力向上を目的にした新規HP制作

株式会社YOURDELT 様

コンテナクエリとは？

コンテナクエリ（Container Queries）は、親要素（コンテナ）のサイズに基づいて、子要素のスタイルを変更できるCSS機能です。2023年から主要ブラウザで正式サポートされた比較的新しい機能で、レスポンシブデザインの新しい標準となりつつあります。

従来の問題点

従来のメディアクエリでは、ビューポート（画面全体）のサイズに基づいてスタイルを切り替えていました。しかし、実際のWebサイトでは、同じ画面幅でも配置場所によって要素の幅が異なることがあります。

例えば：

メインエリア：幅900px
サイドバー：幅300px

同じカードコンポーネントを両方に配置した場合、メディアクエリだけでは配置場所ごとに最適なレイアウトを実現できません。

コンテナクエリによる解決

コンテナクエリを使えば、カードコンポーネント自身がその親要素のサイズを判断し、最適なレイアウトに自動的に切り替わります。これにより、配置場所に依存しない真のコンポーネント指向設計が可能になります。

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

生徒

メディアクエリとコンテナクエリは、具体的に何が違うんですか？

ペン博士

基準が「画面全体」か「親要素」かの違いじゃ。実例で見ていこう！

メディアクエリ（Media Queries）

基準：ビューポート（画面全体）のサイズ

/* メディアクエリの例 */
.card {
  display: flex;
  flex-direction: column;
}

/* 画面幅が768px以上の場合 */
@media (min-width: 768px) {
  .card {
    flex-direction: row;
  }
}

この場合、画面幅が768px以上なら、すべての.card要素が横並びになります。サイドバー内のカードも強制的に横並びになってしまい、レイアウトが崩れる可能性があります。

コンテナクエリ（Container Queries）

基準：親要素（コンテナ）のサイズ

/* コンテナクエリの例 */
.card-container {
  container-type: inline-size; /* この要素をコンテナとして定義 */
}

.card {
  display: flex;
  flex-direction: column;
}

/* 親要素の幅が480px以上の場合 */
@container (min-width: 480px) {
  .card {
    flex-direction: row;
  }
}

この場合、親要素の幅が480px以上のカードのみが横並びになります。サイドバー内のカード（親幅300px）は縦並びのまま、メインエリアのカード（親幅900px）だけが横並びになります。

比較表

項目	メディアクエリ	コンテナクエリ
基準	ビューポート（画面全体）	親要素（コンテナ）
スタイル適用範囲	画面全体に一律適用	コンテナごとに個別適用
柔軟性	低い	高い
コンポーネント指向	困難	実現可能
使い分け	グローバルなレイアウト変更	コンポーネント単位の調整

コンテナクエリのメリット

生徒

コンテナクエリのメリットを知りたいです！

ペン博士

うむ。ここでは、コンテナクエリの5つのメリットを紹介しよう！

1. 真のコンポーネント指向設計

コンテナクエリを活用すると、コンポーネントは配置場所に依存せず、自律的に最適なレイアウトを選択できるようになります。

従来のメディアクエリでは「画面サイズ」によって見た目を変更していましたが、コンテナクエリでは「親要素のサイズ」に応じてスタイルを変化させます。

その結果、同じカードコンポーネントを

サイドバー
メインコンテンツ
フッター
モーダルウィンドウ

など、どこに配置しても適切に表示されます。

これが真のコンポーネント志向設計です。
コンポーネントが環境に適応するUI部品として機能するため、大規模開発やマイクロフロントエンド構成との相性も非常に良くなります。

2. コードの再利用性向上

配置場所ごとに専用のCSSクラスを用意する必要がなくなり、コードの保守性が大幅に向上します。

/* メディアクエリの場合（配置場所ごとにクラスが必要） */
.card-main { /* メインエリア用 */ }
.card-sidebar { /* サイドバー用 */ }
.card-footer { /* フッター用 */ }

/* コンテナクエリの場合（1つのクラスで対応） */
.card { /* すべての場所で使用可能 */ }

3. デザインシステムとの相性が良い

Atomic Design、BEM、Utility First（Tailwind）などの設計思想では、「UIを部品単位で管理する」ことが重要です。

コンテナクエリはこの思想と非常に相性が良く、

Molecule単位でレスポンシブ対応
Component単位で自己完結したスタイル設計
Design Tokenとの組み合わせ

が可能になります。

特に大規模プロジェクトでは、

デザインガイドラインの統一
ブランド横断UIの共通化
SaaSプロダクトのスケール対応

といった観点で、スケーラブルなデザインシステムの構築に貢献します。

単なるレスポンシブ技術ではなく、設計思想を進化させる技術と言えます。

4. メンテナンスコストの削減

従来のレスポンシブ設計では、レイアウト変更が発生すると：

メディアクエリを再調整
特定ページのCSSを修正
想定外のブレイクポイント崩れ

などの修正コストが発生していました。

しかしコンテナクエリでは、
コンポーネント自身のサイズ条件だけを変更するのみの構造になります。

例えば、

サイドバー幅が変更された
2カラム→3カラムに変更された
ダッシュボードのウィジェットサイズが変わった

といった場合でも、
親コンテナの幅に応じて自動調整されるため、影響範囲が限定的です。

これは長期運用プロジェクトにおいて、
開発コスト・改修コストの削減に直結します。

5. より直感的なコード

コンテナクエリの最大の魅力は、コードの意図が明確になることです。

従来：

「画面幅が768px以上ならこうする」

という条件は、
なぜそのサイズなのかが曖昧でした。

しかしコンテナクエリでは：

「このコンポーネントが400px以上になったらこうする」
という記述になります。

つまり、

UIの振る舞いが論理的になる
条件が意味ベースになる
コードの可読性が向上する
新規メンバーが理解しやすい

というメリットがあります。

結果として、
設計意図がコードにそのまま表現される、直感的で美しいCSS設計が実現します。

コンテナクエリの基本実装

生徒

コンテナクエリの具体的な実装方法を教えてください！

ペン博士

いい心構えじゃ！ここでは、2つのステップに分けて解説するぞ！

ステップ1：親要素をコンテナとして定義

まず、基準となる親要素にcontainer-typeプロパティを指定します。

.container {
  container-type: inline-size; /* 横幅を基準にする */
}

container-typeの値

inline-size：横幅を基準（最も一般的）
size：横幅と高さの両方を基準
normal：コンテナクエリを無効化（デフォルト値）

推奨：ほとんどの場合、inline-sizeを使用します。

ステップ2：コンテナクエリを記述

次に、@containerルールでコンテナのサイズに応じたスタイルを定義します。

/* 親要素の幅が480px以上の場合 */
@container (min-width: 480px) {
  .card {
    flex-direction: row;
  }
}

/* 親要素の幅が768px以上の場合 */
@container (min-width: 768px) {
  .card {
    padding: 32px;
    font-size: 1.2rem;
  }
}

完全な実装例：カードコンポーネント

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

コード解説

.card-container：container-type: inline-sizeでコンテナとして定義
基本スタイル：縦並びレイアウトで定義（モバイルファースト）
@container (min-width: 480px)：コンテナ幅480px以上で横並びに変更
@container (min-width: 768px)：コンテナ幅768px以上でさらに大きなスタイルに

ポイント： 同じHTMLとCSSで、メインエリア（広い）とサイドバー（狭い）に配置したカードが、それぞれ最適なレイアウトで表示されます。

実案件での導入パターン

生徒

実際の案件では、どんな場面でコンテナクエリを使うんですか？

ペン博士

よくある実案件のパターンを紹介するぞい！

パターン1：ブログカードコンポーネント

ブログ記事一覧、関連記事、サイドバーなど、さまざまな場所で使いまわすカードに最適です。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

パターン2：商品カードグリッド

ECサイトの商品一覧で、表示カラム数に応じてカードの表示内容を変更します。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

パターン3：ナビゲーションメニュー

親要素の幅に応じて、メニューの表示形式を切り替えます。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

パターン4：フォームレイアウト

親要素の幅に応じて、フォームフィールドの配置を変更します。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

コンテナ名（container-name）の活用方法

生徒

コンテナ名の活用方法も知りたいです！

ペン博士

うむ。複数のコンテナがネストしている場合、container-nameで特定のコンテナを指定できるぞ！

コンテナ名の定義

.sidebar-container {
  container-type: inline-size;
  container-name: sidebar; /* コンテナに名前をつける */
}

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

特定のコンテナを対象にしたクエリ

/* sidebar コンテナのサイズに応じたスタイル */
@container sidebar (min-width: 300px) {
  .widget {
    padding: 20px;
  }
}

/* card コンテナのサイズに応じたスタイル */
@container card (min-width: 480px) {
  .card {
    flex-direction: row;
  }
}

ショートハンド記法

container-typeとcontainer-nameは、containerプロパティでまとめて指定できます。

/* 個別指定 */
.container {
  container-type: inline-size;
  container-name: mycontainer;
}

/* ショートハンド */
.container {
  container: mycontainer / inline-size;
}

コンテナクエリの応用テクニック

生徒

コンテナクエリの応用テクニックは具体的にどんなものがあるのですか？

ペン博士

良い質問じゃ！ここでは、主な応用テクニックを3つ紹介するぞ！

1. コンテナクエリユニット（cqw、cqh）

コンテナのサイズに基づいた相対単位を使用できます。

cqw：コンテナ幅の1%
cqh：コンテナ高さの1%
cqi：コンテナのインラインサイズ（横幅）の1%
cqb：コンテナのブロックサイズ（高さ）の1%
cqmin：cqiとcqbの小さい方
cqmax：cqiとcqbの大きい方

実装例

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

.card-title {
  /* コンテナ幅に応じてフォントサイズが変わる */
  font-size: clamp(1rem, 5cqw, 2rem);
}

.card-image {
  /* コンテナ幅の80% */
  width: 80cqw;
  height: 50cqw;
}

2. 複数条件の組み合わせ

論理演算子（and、or、not）を使って、複雑な条件を指定できます。

/* AND条件：幅が400px以上かつ600px以下 */
@container (min-width: 400px) and (max-width: 600px) {
  .card {
    background: lightblue;
  }
}

/* OR条件：幅が300px以下または900px以上 */
@container (max-width: 300px), (min-width: 900px) {
  .card {
    border: 2px solid red;
  }
}

/* NOT条件：幅が500px以上でない場合 */
@container not (min-width: 500px) {
  .card {
    padding: 8px;
  }
}

3. アスペクト比を基準にした分岐

コンテナのアスペクト比に応じてスタイルを変更できます。

.media-container {
  container-type: size; /* widthとheightの両方を基準にする */
}
/* 横長のコンテナ */
@container (aspect-ratio > 16/9) {
  .media-content {
    display: flex;
    flex-direction: row;
  }
}
/* 縦長のコンテナ */
@container (aspect-ratio < 1/1) {
  .media-content {
    display: flex;
    flex-direction: column;
  }
}

ブラウザ対応とフォールバック

ブラウザ対応状況（2026年2月現在）

ブラウザ	対応バージョン	対応状況
Chrome	105以降	完全対応
Edge	105以降	完全対応
Firefox	110以降	完全対応
Safari	16.0以降	完全対応
iOS Safari	16.0以降	完全対応
Samsung Internet	20以降	完全対応

2023年以降、すべての主要ブラウザで正式サポートされています。実案件でも安心して導入できる状況です。

フォールバック（代替手段）の実装

古いブラウザ向けに、フォールバックを用意することをおすすめします。

/* 基本スタイル（すべてのブラウザで適用） */
.card {
  display: flex;
  flex-direction: column;
}

/* コンテナクエリをサポートしているブラウザのみ */
@supports (container-type: inline-size) {
  .card-container {
    container-type: inline-size;
  }

  @container (min-width: 480px) {
    .card {
      flex-direction: row;
    }
  }
}

/* コンテナクエリ非対応の場合はメディアクエリで代替 */
@supports not (container-type: inline-size) {
  @media (min-width: 768px) {
    .card {
      flex-direction: row;
    }
  }
}

プログレッシブエンハンスメント

基本的なレイアウトをメディアクエリで実装し、コンテナクエリで段階的に機能を追加する方法も有効です。

/* ステップ1：メディアクエリで基本レイアウト */
@media (min-width: 768px) {
  .card {
    flex-direction: row;
  }
}

/* ステップ2：コンテナクエリでより柔軟に */
@container (min-width: 480px) {
  .card {
    flex-direction: row;
  }
}

パフォーマンスを最適化するには？

生徒

パフォーマンスを最適化するにはどうしたら良いですか？

ペン博士

うむ。主に3つの方法が挙げれらる。順を追って説明するぞい！

1. 過度なネストを避ける

コンテナを深くネストしすぎると、パフォーマンスが低下する可能性があります。必要最小限のネストに留めましょう。

/* 悪い例：過度なネスト */
.container1 { container-type: inline-size; }
  .container2 { container-type: inline-size; }
    .container3 { container-type: inline-size; }
      .container4 { container-type: inline-size; }

/* 良い例：必要な箇所のみ */
.main-container { container-type: inline-size; }
  .card-container { container-type: inline-size; }

2. container-typeを使い分ける

inline-size：横幅のみを監視（パフォーマンスが良い）
size：横幅と高さの両方を監視（処理コストが高い）

ほとんどの場合、inline-sizeで十分です。

3. 適切なブレークポイントを設定する

ブレークポイントを細かく設定しすぎると、再計算のコストが増えます。3〜4段階程度に留めるのが理想的です。

トラブルシューティング

生徒

コンテナクエリを使用するにあたってトラブルシューティングのことも知りたいです！

ペン博士

うむ。ここでは、主なトラブルシューティングを3つ紹介するぞい！

問題1: コンテナクエリが効かない

原因と解決法:

container-typeの指定忘れ → 親要素にcontainer-typeを指定
ブラウザが非対応 → ブラウザのバージョンを確認
親要素のサイズが0 → 親要素に明示的なサイズを指定

問題2: レイアウトが崩れる

原因と解決法:

ブレークポイントの値が不適切 → 実際のコンテナサイズを確認して調整
container-typeがsize → inline-sizeに変更

問題3: 古いブラウザで表示が崩れる

原因と解決法:

フォールバックがない → @supportsとメディアクエリで代替実装

生徒

コンテナクエリって、本当に便利ですね！これからのレスポンシブデザインの標準になりそうです！

ペン博士

その通りじゃ！コンテナクエリを使えば、真のコンポーネント指向設計が実現できるんじゃ。まずは小さなコンポーネントから始めて、徐々に実案件に導入していくんじゃぞ！

生徒

はい！次のプロジェクトでブログカードコンポーネントに導入してみます！ありがとうございました！

まとめ

本記事では、コンテナクエリ（Container Queries）の実案件での導入方法について、実装例を交えながら詳しく解説しました。

重要なポイントは以下の通りです。

・コンテナクエリの特徴：親要素のサイズを基準にスタイルを変更できる最新のCSS機能
・メディアクエリとの違い：ビューポート基準ではなく、コンテナ基準でスタイルを切り替え
・実装方法：container-typeで親要素を定義し、@containerで条件分岐
・実案件のパターン：カード、グリッド、ナビゲーション、フォームなど幅広く活用可能
・ブラウザ対応：2023年以降の主要ブラウザで完全サポート
・最適化：過度なネストを避け、inline-sizeを優先的に使用

WithCodeで学んだHTML・CSSの基礎知識に、コンテナクエリの技術を組み合わせれば、どんな複雑なレスポンシブデザインでも柔軟に実装できます。

コンテナクエリは、真のコンポーネント指向設計を実現する強力な技術です。ぜひ実際のプロジェクトで活用し、保守性の高いWebサイトを作成してください。

WithCodeを体験できる初級コース公開中！

初級コース（¥49,800）が完全無料に！

期間：1週間
学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

公式サイトから無料カウンセリングに申し込む →

この記事を書いた人

WithCode 編集部

WithCode（ウィズコード）は「目指すなら稼げる人材」をビジョンに、累計400名以上のフリーランスを輩出してきた超実践型プログラミングスクールです。150社以上の実案件支援を特徴にWeb制作・Webデザインなどの役立つ情報を現場のノウハウに基づいて発信していきます。

【実案件で使える】新しいレスポンシブ対応 | CSSのコンテナクエリ実装方法を徹底解説

コンテナクエリとは？

従来の問題点

コンテナクエリによる解決

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

メディアクエリ（Media Queries）

コンテナクエリ（Container Queries）

比較表

コンテナクエリのメリット

1. 真のコンポーネント指向設計

2. コードの再利用性向上

3. デザインシステムとの相性が良い

4. メンテナンスコストの削減

5. より直感的なコード

コンテナクエリの基本実装

ステップ1：親要素をコンテナとして定義

container-typeの値

ステップ2：コンテナクエリを記述

完全な実装例：カードコンポーネント

コード解説

実案件での導入パターン

パターン1：ブログカードコンポーネント

パターン2：商品カードグリッド

パターン3：ナビゲーションメニュー

パターン4：フォームレイアウト

コンテナ名（container-name）の活用方法

コンテナ名の定義

特定のコンテナを対象にしたクエリ

ショートハンド記法

コンテナクエリの応用テクニック

1. コンテナクエリユニット（cqw、cqh）

実装例

2. 複数条件の組み合わせ

3. アスペクト比を基準にした分岐

ブラウザ対応とフォールバック

ブラウザ対応状況（2026年2月現在）

フォールバック（代替手段）の実装

プログレッシブエンハンスメント

パフォーマンスを最適化するには？

1. 過度なネストを避ける

2. container-typeを使い分ける

3. 適切なブレークポイントを設定する

トラブルシューティング

問題1: コンテナクエリが効かない

問題2: レイアウトが崩れる

問題3: 古いブラウザで表示が崩れる

まとめ

WithCodeを体験できる初級コース公開中！

初級コース（¥49,800）が完全無料に！

この記事を書いた人

関連記事

– service –WithCodeの運営サービス