コンテナクエリとメディアクエリの違いと使い分け｜実務で役立つ判断基準・実装テクニックを徹底解説

レスポンシブデザインを実装するときに欠かせないのが「メディアクエリ」ですが、近年「コンテナクエリ」という新しい仕組みが登場し、注目を集めています。これまで画面幅（viewport）に依存していたレスポンシブ対応を、コンポーネント単位で柔軟に制御できるようになったことで、よりモジュール化されたUI設計が可能になりました。しかし、「メディアクエリだけで十分なのでは？」「コンテナクエリを導入すべき場面はどこ？」「両者をどう使い分ければいいのか」と悩む方も多いのではないでしょうか。

実務では、単純に「新しいから使う」ではなく、プロジェクトの要件やデザイン方針に合わせて最適な判断をすることが重要です。本記事では、コンテナクエリとメディアクエリの基本から、具体的な使い分け、さらに実務で役立つ実装テクニックまでを整理して解説します。

本記事を読むことで、従来のメディアクエリだけでは解決しづらかった課題を整理し、次世代のレスポンシブ設計にスムーズに移行するための判断基準を身につけられます。

コンテナクエリとメディアクエリの基本理解

コンテナクエリとは？@containerの基本構文と書き方サンプル

コンテナクエリは、親要素（コンテナ）のサイズに基づいて、子要素のスタイルを変化させるCSSの新しい仕様です。従来のメディアクエリがビューポート（画面全体）のサイズに依存するのに対し、コンテナクエリは特定のコンポーネントが配置されている領域のサイズに応じてスタイルを適用できます。

これにより、ページ全体のレイアウトとは独立して、コンポーネントそのものを再利用可能なレスポンシブパーツとして設計することが可能になります。例えば、サイドバーに配置されたときと、メインコンテンツに配置されたときで、自動的に見た目が変わるカードコンポーネントなどが実現できます。

コンテナクエリを使用するには、まずコンテナとなる親要素にcontainer-typeプロパティを設定します。

• container-type: inline-size;：コンテナの幅に基づいてスタイルを適用します。
• container-type: size;：コンテナの幅と高さの両方に基づいてスタイルを適用します。

その後、子要素のスタイルを@container構文で記述します。

/* コンテナとなる親要素を定義 */
.card-container {
  /* 幅（inline-size）を基準にコンテナクエリを有効化 */
  container-type: inline-size;
  border: 1px solid #ccc;
  padding: 16px;
  width: 100%; /* コンテナの幅を変化させるために必要 */
}

/* @containerの基本構文 */
.card-container .card-content {
  /* 親コンポーネントの幅が300px未満の場合に適用 */
  @container (max-width: 300px) {
    /* 子要素のスタイルを上書き */
    display: flex;
    flex-direction: column;
  }

  /* 親コンポーネントの幅が450px以上の場合に適用 */
  @container (min-width: 450px) {
    /* 子要素のスタイルを上書き */
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

この例では、.card-containerの幅が300px未満になると、内部の.card-contentが縦に並び、450px以上になると2カラムのグリッドレイアウトに変化します。

@containerと@mediaのコード比較と使い方の具体例

メディアクエリとコンテナクエリは、見た目を変化させるという点では似ていますが、そのトリガーが根本的に異なります。以下のコード例で、その違いを明確に理解しましょう。

例：カードコンポーネントのレスポンシブ対応

メディアクエリによる実装

これは、ビューポート全体が特定の幅になったときに、すべてのカードのレイアウトを一斉に変更する方法です。

/* カードコンポーネントの基本スタイル */
.card {
  /* ... */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ビューポートの幅が600px未満になったら、すべてのカードを縦並びに変更 */
@media (max-width: 600px) {
  .card {
    grid-template-columns: 1fr;
  }
}

この方法の課題は、例えばサイドバーに小さなカードを配置した場合でも、メインコンテンツの大きなカードと同じタイミングでレイアウトが変更されてしまうことです。

コンテナクエリによる実装

これは、カードコンポーネント自身が配置されているコンテナの幅に基づいて、レイアウトを動的に変更する方法です。

/* カードコンポーネントを囲むコンテナを定義 */
.card-container {
  /* コンテナクエリを有効化 */
  container-type: inline-size;
}

/* カードコンポーネントの基本スタイル */
.card {
  /* ... */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* 親コンテナの幅が350px未満になったら、そのカードのみを縦並びに変更 */
@container (max-width: 350px) {
  .card {
    grid-template-columns: 1fr;
  }
}

この場合、メインコンテンツに配置された幅の広いカードはグリッドレイアウトを維持したまま、サイドバーに配置された幅の狭いカードだけが自動的に縦並びに切り替わります。

それぞれのメリット・デメリットと使い分けの前提知識

コンテナクエリとメディアクエリの特性を理解することで、より適切な使い分けが可能になります。

使い分けの前提知識として重要なのは、コンポーネントの「独立性」です。

• メディアクエリ：「この画面サイズなら、このレイアウト」というページ全体の設計思想に適しています。
• コンテナクエリ：「このコンポーネントは、この幅なら、この見た目」というコンポーネント単体の設計思想に適しています。

どちらか一方を選ぶのではなく、多くの場合、両者を組み合わせて使用することになります。ページ全体の骨格はメディアクエリで作り、その骨格に配置される各コンポーネントの振る舞いはコンテナクエリで制御するというハイブリッドなアプローチが、現代のWeb開発のベストプラクティスになりつつあります。

実務での使い分けと判断基準

どの場面でコンテナクエリを使い、どの場面でメディアクエリを使うべきか

実務において、コンテナクエリとメディアクエリのどちらを使うべきかは、「何に対してレスポンシブな変化を適用したいか」によって判断するのが最も合理的です。

メディアクエリは「ページ全体のレイアウト」に使う

メディアクエリは、サイト全体の骨格やマクロなレイアウトを定義するのに適しています。例えば、以下のような場面です。

• グローバルナビゲーションの切り替え: PCでは横並び、スマホではハンバーガーメニューに切り替える。
• ページ全体のカラム数の変更: PCでは3カラム、タブレットでは2カラム、スマホでは1カラムにする。
• フォントサイズの基本設定: ビューポートの幅に応じて、body要素のfont-sizeを段階的に変更する。

これらはすべて、画面全体のサイズが変わることで初めて意味を持つ変化です。

コンテナクエリは「コンポーネント単位のレイアウト」に使う

コンテナクエリは、特定のUIコンポーネントが、その配置場所に応じて見た目を変える必要がある場合に威力を発揮します。

• カードコンポーネント: メインコンテンツエリアでは画像とテキストを横並びにし、サイドバーに配置されたときは画像の上にテキストを重ねるようにする。
• プロフィールウィジェット: ヘッダーの幅の狭い領域ではアイコンと名前だけを表示し、メインコンテンツでは詳細なプロフィール情報を追加する。
• 広告バナー: 画面のどこに配置されても、自身の親要素のサイズに合わせて画像の比率やテキストの配置を調整する。

これらのコンポーネントは、どのページに、どの幅のコンテナに配置されるかによって見え方が変わるため、コンテナクエリが最適です。

コンポーネント単位のレスポンシブ設計を実現するベストプラクティス

コンポーネント指向の設計思想（Atomic Designなど）を採用している場合、コンテナクエリは欠かせないツールです。ここでは、具体的なUIコンポーネントを例に、その実践的なアプローチを解説します。

【実践例：ArticleCardコンポーネント】

このカードは、記事のタイトル、概要、画像、著者情報を含みます。これを様々なレイアウトで再利用したいと考えます。

1.コンポーネントの基本スタイルを定義:CSS

まず、コンテナクエリが適用されない場合のデフォルトスタイルを定義します。これは最も一般的なレイアウト（例：画像とテキストの横並び）で構いません。

/* ArticleCardコンポーネントの基本スタイル */
.article-card {
  /* コンテナクエリを有効化 */
  container-type: inline-size;
  /* デフォルトのレイアウト */
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  border: 1px solid #ddd;
  padding: 16px;
}

2.コンテナクエリでバリエーションを作成:CSS

親要素の幅に応じてスタイルを上書きします。これにより、コンポーネントの内部的なレイアウトが動的に変化します。

/* 親要素の幅が350px未満の場合、縦並びレイアウトに切り替え */
@container (max-width: 350px) {
  .article-card {
    grid-template-columns: 1fr; /* 1カラムに */
  }
  /* 画像とテキストの配置を変更 */
  .article-card .card-image {
    order: 1;
  }
  .article-card .card-content {
    order: 2;
  }
}

/* 親要素の幅が700px以上の場合、さらに別のレイアウトに */
@container (min-width: 700px) {
  .article-card {
    /* 例：画像をもっと大きく表示 */
    grid-template-columns: 1fr 3fr;
  }
}

この設計により、ArticleCardはメインカラムに配置されれば広いグリッドレイアウトに、サイドバーに配置されれば縦並びのレイアウトに、自動的に適応します。ページ全体のメディアクエリを意識する必要がなくなるため、コンポーネントの再利用性が飛躍的に向上します。

メディアクエリとの併用方法と移行のステップ

コンテナクエリはメディアクエリの代替ではなく、補完する技術です。両者を組み合わせて使うことで、より柔軟かつ効率的な開発が実現できます。

ハイブリッドなアプローチ

1. メディアクエリでマクロレイアウトを定義: まずは、ページ全体のレスポンシブデザインをメディアクエリで作成します。これにより、主要なブレークポイント（例：600px, 1024pxなど）で、grid-template-columnsなどを使ってページ全体の骨格を切り替えます。
2. コンテナクエリでミクロレイアウトを制御: その骨格の中に配置される個々のコンポーネント（例：カード、ウィジェット、フォーム要素）の内部レイアウトは、コンテナクエリで制御します。

具体的な移行のステップ

• ステップ1: 既存のメディアクエリを分析
  現在適用されているメディアクエリのうち、「コンポーネントの内部スタイル」を変更している部分を特定します。例：@media (max-width: 600px) { .card { … } }のようなコードです。
• ステップ2: コンテナとなる要素を特定
  .cardコンポーネントを囲んでいる親要素を特定し、container-typeプロパティを追加します。
• ステップ3: @mediaから@containerに置き換え
  ステップ1で特定したメディアクエリのコードを、コンテナクエリに置き換えます。この際、ブレークポイントの値をビューポートの幅から、コンテナの幅に調整する必要があります。

この段階的な移行により、既存のコードベースを大きく変更することなく、コンポーネントの独立性を高め、保守性を向上させることができます。また、新規プロジェクトでは、最初からこのハイブリッドな設計を導入することで、将来のレイアウト変更にも柔軟に対応できる強固なCSS設計を構築できます。

実装テクニックと注意点

Grid・Flexboxとコンテナクエリを組み合わせた具体例

コンテナクエリの真価は、CSS GridやFlexboxといった最新のレイアウトモジュールと組み合わせることで最大限に発揮されます。コンポーネントの内部レイアウトを柔軟に制御し、より複雑なレスポンシブデザインを少ないコードで実現できます。

【具体例1：コンテナクエリ + Flexbox】

複数のアイテムを並べるコンポーネントを考えます。親要素の幅が狭いときは縦に積み重ね、広いときは横並びにするという、よくあるレイアウトです。

.flex-container {
  container-type: inline-size;
  display: flex; /* Flexboxコンテナとして設定 */
  gap: 1rem;
}

.flex-item {
  flex: 1 1 200px; /* アイテムの基本サイズを200pxに設定 */
  padding: 1rem;
  background-color: #e8f5e9;
  border-radius: 8px;
  text-align: center;
}

/* 親コンテナの幅が400px未満になったら、アイテムを縦並びに変更 */
@container (max-width: 400px) {
  .flex-container {
    flex-direction: column; /* 縦並びに変更 */
  }
}

このコードでは、.flex-containerの幅が400px以上あればアイテムは横に並びますが、400px未満になると自動的にflex-direction: column;が適用され、縦並びになります。メディアクエリと異なり、このコンポーネントをどこに配置しても、その親の幅に応じて自律的にレイアウトを切り替えます。

【具体例2：コンテナクエリ + Grid】

より複雑なレイアウトにはCSS Gridが役立ちます。カードコンポーネントを例に、コンテナの幅によってグリッドのテンプレートを完全に切り替える方法を見てみましょう。

.grid-card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  padding: 1rem;
}

.grid-card {
  display: grid;
  grid-template-areas:
    "image content"
    "image meta"; /* デフォルトのレイアウト */
  grid-template-columns: 1fr 2fr;
  gap: 16px;
}

/* 親コンテナの幅が500px未満になったら、画像とコンテンツを縦に並べる */
@container (max-width: 500px) {
  .grid-card {
    grid-template-areas:
      "image"
      "content"
      "meta"; /* グリッドエリアを縦並びに再定義 */
    grid-template-columns: 1fr; /* 1カラムに */
  }
}

grid-template-areasを使用することで、コンテナの幅に応じてレイアウトの骨格を完全に再構築できます。これにより、コンポーネントの内部的なレスポンシブ対応が、非常に直感的かつ強力になります。

cqw・cqh・qi などコンテナクエリ特有の単位の使い方

コンテナクエリには、そのコンテナのサイズに相対的な新しい単位が導入されました。これらの単位を使いこなすことで、よりきめ細やかなレスポンシブデザインが可能です。

最も頻繁に使用されるのはcqw（Container Query Width）です。これはビューポート単位のvwに似ていますが、その基準が親コンテナの幅になります。

【使用例：コンテナの幅に合わせてフォントサイズを調整】

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

.responsive-text {
  /* 親コンテナの幅の2%をフォントサイズにする */
  font-size: 2cqw;
}

この例では、親コンテナが広くなれば文字が大きくなり、狭くなれば小さくなります。これは、カードコンポーネントのタイトルなど、コンポーネント自身のサイズに連動して文字のサイズを変えたい場合に非常に便利です。vwだとビューポートのサイズに依存するため、サイドバーの小さなコンポーネントの文字まで大きくなってしまうという問題がありましたが、cqwはそれを解決します。

「効かない」ときの原因とデバッグ方法

コンテナクエリが期待通りに動作しない場合、いくつかの典型的な原因が考えられます。

container-typeの設定漏れ:

最もよくある原因です。コンテナクエリを使用する親要素に、container-type: inline-size;またはcontainer-type: size;が設定されていないと、@containerブロックは機能しません。

コンテナにサイズが指定されていない:

container-typeを設定した親要素が、widthやinline-sizeプロパティで明示的なサイズを持っていない場合、コンテナクエリは発火しません。FlexboxやGridのアイテムとして配置されている場合など、親のサイズが自動的に決まるレイアウトでは注意が必要です。

ブラウザのサポート状況:

コンテナクエリは比較的新しい仕様です。古いブラウザでは動作しません。開発中は、Chrome、Firefox、Safariなどの最新版で動作確認をしましょう。執筆時点（2023年時点）では、主要なモダンブラウザのほとんどがサポートしています。Can I useなどのサイトで最新の情報を確認できます。

【デバッグ方法】

ブラウザのDevToolsを活用:

ChromeやEdgeのDevToolsには、コンテナクエリのデバッグを支援する機能があります。要素を検証する際に、コンテナに指定したcontainer-typeの横に表示される「container」バッジをクリックすると、コンテナのサイズを動的に変更できるスライダーが表示されます。これを使えば、@containerのブレークポイントが正しく機能しているか簡単にテストできます。

CSSのルールを確認:

@containerブロックのCSSルールが、より詳細度の高い（Specificity）セレクタに上書きされていないか確認しましょう。

シンプルな例でテスト:

コンポーネント全体で問題が切り分けられない場合、シンプルなdiv要素にcontainer-typeを設定し、簡単な@containerルールを試すことで、問題がコンポーネントの実装にあるのか、環境設定にあるのかを切り分けることができます。

開発環境での活用方法

コンテナクエリは、単体のCSSとしてだけでなく、現代的な開発ワークフローに組み込むことで、その効果をさらに高めることができます。Sassなどのプリプロセッサ、Reactなどのコンポーネント指向フレームワーク、そしてTailwind CSSのようなユーティリティファーストのフレームワークと組み合わせることで、より効率的かつ保守性の高い開発が実現します。

SassやCSS変数との組み合わせ方とサンプルコード

CSS変数は、コンテナクエリと非常に相性が良い機能です。コンテナのサイズに応じて変数の値を動的に変更し、その変数を子要素のスタイルに適用することで、よりスマートなレスポンシブデザインを構築できます。

【CSS変数を使ったコンテナクエリの例】

この例では、カードの幅に応じてパディングとフォントサイズを動的に変更します。

.card-container {
  container-type: inline-size;
  /* デフォルトのCSS変数を設定 */
  --card-padding: 1rem;
  --card-font-size: 1rem;
}

/* 親コンテナの幅が300px未満の場合、CSS変数を上書き */
@container (max-width: 300px) {
  .card-container {
    --card-padding: 0.5rem;
    --card-font-size: 0.8rem;
  }
}

/* 親コンテナの幅が600px以上の場合、CSS変数を上書き */
@container (min-width: 600px) {
  .card-container {
    --card-padding: 2rem;
    --card-font-size: 1.2rem;
  }
}

/* 子要素でCSS変数を適用 */
.card-content {
  padding: var(--card-padding);
  font-size: var(--card-font-size);
}

このアプローチの利点は、スタイルの変更が一箇所に集約されるため、保守性が向上することです。

【Sassを使ったコンテナクエリのミックスイン】

Sassのミックスイン機能を使えば、コンテナクエリの記述をより再利用しやすく、DRY（Don’t Repeat Yourself）なコードにできます。

// コンテナクエリのミックスイン
@mixin container-query($breakpoint) {
  @container (min-width: $breakpoint) {
    @content; // この中にCSSルールを記述
  }
}

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

.card-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;

  // ミックスインを呼び出して使用
  @include container-query(500px) {
    grid-template-columns: 1fr 1fr;
    .card-image {
      order: 0;
    }
  }

  @include container-query(800px) {
    grid-template-columns: 1fr 2fr;
  }
}

React・Vueなどコンポーネント指向フレームワークでの実装例

コンポーネント指向フレームワークでは、UI部品を独立した単位として扱います。コンテナクエリは、この思想と完璧にマッチします。特定のコンポーネント内部のスタイルを、そのコンポーネントが置かれている環境（親要素）に依存させて制御することで、コンポーネントの移植性と再利用性を最大化できます。

【Reactでの実装例】

Reactでは、CSS-in-JSライブラリ（Styled ComponentsやEmotionなど）と組み合わせて使用することが一般的です。

// components/Card.jsx

import React from 'react';
import styled from 'styled-components';

// コンテナとなるコンポーネントを定義
const StyledCardContainer = styled.div`
  container-type: inline-size;
  border: 1px solid #ccc;
  padding: 1rem;
`;

// コンテナクエリを適用するコンポーネントを定義
const StyledCardContent = styled.div`
  display: flex;
  flex-direction: column;

  // コンテナの幅に応じてスタイルを変更
  @container (min-width: 500px) {
    flex-direction: row;
  }
`;

const Card = ({ title, body }) => {
  return (
    <StyledCardContainer>
      <StyledCardContent>
        <h3>{title}</h3>
        <p>{body}</p>
      </StyledCardContent>
    </StyledCardContainer>
  );
};

export default Card;

このCardコンポーネントは、親要素の幅が500pxを超えると自動的に中身が横並びになります。このコンポーネントを、SidebarやMainContentなど、どんなレイアウトの親要素に配置しても期待通りに動作するため、非常に強力です。

Tailwind CSSやBootstrapでのコンテナクエリ対応状況

主要なCSSフレームワークも、コンテナクエリへの対応を進めています。

Tailwind CSS:

Tailwindはバージョン3.2から、コンテナクエリに正式に対応しています。@container構文を直接書く代わりに、ユーティリティクラスとして利用できます。 例えば、md:w-1/2のようにメディアクエリでmdブレークポイントを使う代わりに、@containerを親要素に指定し、子要素に@container-md:w-1/2のようなクラスを適用します。これにより、Tailwindの哲学に沿った形でコンポーネント単位のレスポンシブデザインが可能です。

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

tailwindcss.com

Bootstrap:

Bootstrapは、グリッドシステムがメディアクエリに深く依存しているため、現時点ではネイティブなコンテナクエリのユーティリティは提供していません。しかし、コンテナクエリは既存のCSSと共存できるため、Bootstrapのグリッドシステムでページ全体のレイアウトを構築し、その中に配置されるコンポーネントの内部スタイルを、独自のコンテナクエリで制御するというハイブリッドな使い方が可能です。

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to lif...

getbootstrap.com

これらのフレームワークも、コンポーネント指向の設計を加速させるために、コンテナクエリを積極的に取り入れていることがわかります。

よくある質問（FAQ)

まとめ

ここまで、コンテナクエリとメディアクエリのそれぞれの特性、そして実務での効果的な使い分けについて解説してきました。今回の解説を通して、この2つのCSS機能が対立するものではなく、お互いを補完し合う関係にあることがお分かりいただけたかと思います。

Webサイトやアプリケーションを構築する際、メディアクエリは「ページ全体の骨格」を、コンテナクエリは「個々のコンポーネントの振る舞い」を制御する、という役割分担が現代のフロントエンド開発におけるベストプラクティスです。この考え方を導入することで、開発の効率とメンテナンス性が飛躍的に向上します。

従来のメディアクエリによるレスポンシブデザインでは、一つのCSS変更がページ全体のレイアウトに意図しない影響を与えたり、コンポーネントの再利用性が制限されたりする課題がありました。しかし、コンテナクエリを使えば、コンポーネントがどこに配置されても、自身の親要素のサイズに合わせて自律的にスタイルを調整できます。これにより、まるでブロックを組み立てるように、柔軟で再利用性の高いUIを構築することが可能になります。

コンテナクエリは、フロントエンド開発の未来を担う重要な技術です。これを習得することで、皆さんのスキルはさらに磨かれ、より効率的で、より高品質なWebサイトやアプリケーションを構築できるようになるでしょう。ぜひ今日から、この新しい技術を皆さんのプロジェクトに積極的に取り入れてみてください。

あわせて読みたい

【2025年】レスポンシブブレイクポイントの決め方・書き方完全ガイド！CSSの最適解と実装テクニック

スマホ・タブレット・PCに対応するブレイクポイントの決め方や、CSS・SCSSでの効率的な書き方を解説。mobile-first／desktop-firstの設計方針や、チームで共有しやすいルール作り、SEOにも強いレスポンシブ対応の考え方まで網羅。ブレイクポイント設計に悩む方に向けた実用ガイドです。

watashi.xyz

2025.06.29