[CSS] コンテナクエリ入門：基本の使い方とメディアクエリとの違いをやさしく解説

MARKLEAPS

2025.04.21

CSSでのレスポンシブ対応といえば「メディアクエリ」が定番でしたが、近年、「コンテナクエリ（Container Queries）」という新しい選択肢が登場しました。

これは「画面幅」ではなく、「コンテナ（親要素）のサイズ」に応じてスタイルを切り替える仕組みです。
これにより、より柔軟で再利用しやすいUI設計が可能になります。

この記事では、コンテナクエリとは何か、基本的な書き方、どのような場面で活用できるのかを初心者向けにわかりやすく解説します。

コンテナクエリとは？

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

従来のメディアクエリは「画面全体（ビューポート）」を基準にスタイルを切り替えていましたが、コンテナクエリでは「コンポーネント単位」でスタイルを調整できます。

「コンポーネント」について

コンテナクエリを理解するうえで、「コンポーネント」という言葉がよく登場します。
HTML・CSSにおけるコンポーネントとは、ボタンやカードなど、再利用できるUI（ユーザーインターフェース）のパーツのことを指します。
たとえば「もっと見る」ボタンや、画像とテキストがセットになったカード表示などがその例です。

● コンポーネント設計

再利用可能なUIパーツごとにHTML・CSSを分割し、整理された構造で設計すること

● コンポーネントベース

こうしたUIパーツ（＝コンポーネント）を組み合わせてWebページ全体を構築する手法のこと

メディアクエリとの違い

・メディアクエリ
画面全体の幅に基づいてスタイルが変化します。
例：画面幅が768px未満のときに特定のスタイルを適用

・コンテナクエリ
指定した親要素（＝コンテナ）のサイズに応じてスタイルが変化します。
例：親要素の幅が400px未満のときにスタイルを変更

コンテナクエリを使えば、各コンポーネントごとに柔軟なレスポンシブ対応が可能になります。

基本的な書き方

まず、親要素（＝コンテナ）に container-type を指定する必要があります。

/* 親要素 */
.parent {
  container-type: inline-size;
}

/* 親要素 */

.parent {

container-type: inline-size;

}

この設定によって、.parent 要素が「コンテナ」として認識され、そのサイズを基準に子要素のスタイルを切り替えることが可能になります。

次に、@container ルールを使って条件式を記述します。

/* 子要素にスタイルを適用する条件式 */
@container (max-width: 500px) {
  .child {
    width: 100%;
  }
}

/* 子要素にスタイルを適用する条件式 */

@container (max-width: 500px) {

.child {

width: 100%;

}

container-type の主な種類

タイプ	内容	主な用途
inline-size	横幅（インライン方向）に基づいてスタイルを適用	最も一般的に使われる
size	横幅と高さの両方を基準にスタイルを適用	縦横の比率で調整したいとき
normal	初期状態（コンテナとして無効）	コンテナクエリを使わない場合

多くの場面では inline-size を指定すれば十分ですが、より細かい制御が必要なケースでは size の使用も検討できます。
ただし size は一部のブラウザで対応状況が異なるため、使用前に確認しましょう。

このように、記述方法はメディアクエリに似ていますが、対象が画面ではなく“親要素のサイズ”である点が大きな違いです。

よくある疑問：コンテナクエリの影響範囲について

コンテナクエリを使うとき、「どの要素にスタイルが適用されるのか？」という点で混乱しやすいことがあります。
以下のようなケースを見てみましょう。

ケース①：指定したクラスだけが影響を受ける？

以下のように .child だけにスタイルを指定した場合

・css

@container (max-width: 500px) {
  .child {
    width: 100%;
  }
}

@container (max-width: 500px) {

.child {

width: 100%;

}

・html

<div class="parent">
  <div class="child"></div>
  <div class="child02"></div>
</div>

</div>

この場合、.child だけにスタイルが適用され、.child02 には影響しません。

複数の要素に適用したい場合は、カンマで区切ってセレクタを並べます。

@container (max-width: 500px) {
  .child ,
  .child02 {
    width: 100%;
  }
}

@container (max-width: 500px) {

.child ,

.child02 {

width: 100%;

}

ケース②：子要素内のどこまでスタイルが届く？

次のように .child p にスタイルを指定した場合：

・css

@container (max-width: 500px) {
  .child p {
    font-size: 1.5rem;
  }
}

@container (max-width: 500px) {

.child p {

font-size: 1.5rem;

}

・html

<div class="parent">
  <div class="child">
    <p>子要素のテキスト</p>
    <div class="grandchild">
      <p>孫要素のテキスト</p>
    </div>
  </div>
</div>

<p>子要素のテキスト</p>

<p>孫要素のテキスト</p>

</div>

この場合、.child 内のすべての p 要素にスタイルが適用され、孫要素である .grandchild > p にも影響します。

直下の要素だけにスタイルを適用したいときは、セレクタを以下のように変えましょう。

@container (max-width: 500px) {
  .child > p {
    font-size: 1.5rem;
  }
}

@container (max-width: 500px) {

.child > p {

font-size: 1.5rem;

}

どんなときに便利？

たとえば「カード一覧」のようなコンポーネントを、親要素の幅に応じて「2カラム」や「1カラム」に切り替えたい場面があります。
これまでは画面幅に応じたメディアクエリで対応していましたが、コンテナクエリを使えば、親要素のサイズだけを基準に柔軟なスタイルの切り替えが可能になります。

・html

<div class="card-container large">
  <div class="card"><p>カード</p></div>
  <div class="card"><p>カード</p></div>
</div>

<div class="card-container small">
  <div class="card"><p>カード</p></div>
  <div class="card"><p>カード</p></div>
</div>

</div>

</div>

・css

.card-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background: #CCC;
  padding: 20px;
  margin-bottom: 30px;
}

.card-container.large {
  width: 1000px;
}

.card-container.small {
  width: 500px;
}

.card {
  width: calc(50% - 20px);
  background: white;
  padding: 10px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

@container (max-width: 500px) {
  .card {
    width: 100%;
  }
}

.card-container {

container-type: inline-size;

display: flex;

flex-wrap: wrap;

gap: 20px;

background: #CCC;

padding: 20px;

margin-bottom: 30px;

}

.card-container.large {

width: 1000px;

}

.card-container.small {

width: 500px;

}

.card {

width: calc(50% - 20px);

background: white;

padding: 10px;

box-shadow: 0 0 5px rgba(0,0,0,0.1);

}

@container (max-width: 500px) {

.card {

width: 100%;

}

デモ

このように、各コンポーネントが自律的にレスポンシブになるため、メディアクエリのように全体の画面サイズを常に気にする必要がありません。

対応ブラウザ

2025年4月現在、主要ブラウザ（Chrome、Safari、Firefox、Edge）ではコンテナクエリがほぼ対応済みです。
なお、container-type を設定していない要素にはコンテナクエリを適用できないため、必ず事前にコンテナ指定を行いましょう。

今後のWeb制作にどう活かせる？

コンポーネントベースの設計が主流となっている今、「どこに配置されても最適な表示ができるUI」を目指すうえで、コンテナクエリは非常に便利な機能です。

特に再利用性を重視するWeb制作の現場では、より柔軟でメンテナンスしやすいCSSを実現するために、ぜひ取り入れたい機能の一つです。

CSS

よく読まれている関連記事

[CSS] カラーコードで透明度を指定する方法

[CSS] コンテナクエリ入門：基本の使い方とメディアクエリとの違いをやさしく解説

コンテナクエリとは？

メディアクエリとの違い

基本的な書き方

container-type の主な種類

よくある疑問：コンテナクエリの影響範囲について

ケース①：指定したクラスだけが影響を受ける？

ケース②：子要素内のどこまでスタイルが届く？

どんなときに便利？

対応ブラウザ

今後のWeb制作にどう活かせる？

よく読まれている関連記事

[CSS] カラーコードで透明度を指定する方法

関連最新記事

[CSS] Grid（グリッドレイアウト）入門：超基本を学ぶ

[CSS] Grid（グリッドレイアウト）入門：図で理解する CSS Grid の構造とパーツ

[HTML] 見出しタグ（h1～h6）のよくあるミスと正しい使い方

[CSS] transform scale()を使って画像をマウスオーバー時に拡大する方法

社内風景

社内風景2