【初学者向け】コンテナクエリとメディアクエリの違いをやさしく解説｜これからのレスポンシブ設計の新常識

レスポンシブデザインは、Web制作における必須スキルになりました。
その中心で長年使われてきたのが メディアクエリ（@media） ですが、近年は コンテナクエリ（@container） という新しい技術が登場し、Web業界で大きな注目を浴びています。

しかし初学者ほど「結局どっちを使えばいいの？」「どう違うの？」と迷いやすいポイント。
この記事では、そんな疑問を解消するために、メディアクエリとコンテナクエリの違い・使い分け・実例 をわかりやすく解説します。

1. メディアクエリとは？｜画面全体を基準にレイアウトが変わる仕組み

まずはおなじみのメディアクエリから。

メディアクエリは 「画面幅」や「デバイス特性」に応じてCSSを切り替える仕組み です。
スマホでは1列、PCでは3列…といった、ページ全体のレイアウト調整 が得意分野です。

@media (max-width: 768px) {
  .card {
    flex-direction: column;
  }
}

画面（ビューポート）の幅が768px以下になるとこのCSSが適用されます。

　メディアクエリが得意なこと

PC ↔ スマホの大きなレイアウト変更
ヘッダー・フッターなど、ページ全体の調整
サイト全体の“枠組み”を変える処理

初心者でも使いやすく、レスポンシブサイトに欠かせない存在です。

2. コンテナクエリとは？｜親要素の幅によってレイアウトが変わる新時代のCSS

一方で コンテナクエリ は、2023年頃からブラウザ対応が進み始めた比較的新しい仕組みです。

その特徴は、
“画面幅ではなく、親要素の幅を基準にスタイルを切り替える”
という点にあります。

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

@container (min-width: 500px) {
  .card {
    display: flex;
  }
}

この例では「カードの親要素」が500px以上の幅になったときだけ、カードが横並びになります。

　コンテナクエリが得意なこと

部品（カード、ボタン、バナーなど）のレイアウトを自動で最適化
どこに置いても崩れにくい再利用可能なUI設計
コンポーネントベースのCSS管理

特にコンポーネント設計との相性がよく、現代的な開発にぴったりです。

3. 両者の違いは “何を基準にするか”

もっとも大きくて、初学者が理解すべきポイントはこれ。

メディアクエリ → 画面全体の幅を基準に変える
コンテナクエリ → 親要素の幅を基準に変える

この “判断基準の違い” が、使いどころを分ける鍵になります。

　比較一覧

項目	メディアクエリ	コンテナクエリ
判断基準	画面幅（ビューポート）	親要素の幅（コンテナ）
得意分野	ページ全体のレイアウト	パーツ単位のレイアウト
再利用性	低め（場所次第）	高い（どこでも最適化）
使い勝手	設定不要で簡単	コンテナ設定が必要
主な用途	ナビ、全体グリッド、ヘッダーなど	カード、バナー、ボタンなど

4. メディアクエリの弱点と、コンテナクエリが生まれた背景

Webデザインは今、パーツ単位のUI設計 が主流です。
商品カード、ブログカード、CTAボタンなど、同じ部品をいろいろな場所に配置するケースが増えています。

しかしメディアクエリには次の弱点があります。

● 弱点1：パーツの“置かれた場所”による変化に対応できない

画面幅しか見ていないので、

サイドバー（狭い）に置いたとき
メインエリア（広い）に置いたとき

こうした差をコントロールしにくい。

● 弱点2：ブレークポイントが増えるほどCSSが複雑化

ページ全体の幅だけを基準にしているため、細かい調整が増えると管理が困難に。

これらを解決するために作られたのがコンテナクエリです。

5. コンテナクエリが解決すること

コンテナクエリを使うと、こんなメリットがあります。

● 自動で“配置された幅”に適応する

同じカードでも、

メインエリア → 横並び
サイドバー → 縦並び

のように変わります。

● コンポーネント単位で完結するCSSが書ける

パーツごとにクエリを書けるため、再利用性が高く崩れにくいデザインになります。

● 既存のブレークポイントから解放

今まで
768px, 1024px, 1280px...
などのブレークポイントは“画面幅の都合”でした。

コンテナクエリはコンポーネントの実際の幅に応じて変わるので、
そもそもブレークポイント存在の意味が変わります。

6. コンテナクエリの苦手な場面

もちろん万能ではありません。

× ページ全体のレイアウト変更には不向き

横3カラム → スマホで1カラム
ナビゲーションがハンバーガーに変わる
ヘッダーの高さ変更
ナビゲーションをドロワーに切り替え
PC版 → スマホ版の巨大なレイアウト転換

こういった“サイト全体の構造”はメディアクエリが得意。

× 事前に設定が必要

親要素に container-type を指定し忘れると機能しません。

コンテナクエリを使うには
container-type: inline-size;
の記述が必要。

7. 初心者向け：結局どう使い分ける？

結論はシンプルです。

● ページ全体を変える → メディアクエリ

（例：3カラム → 1カラム）

● パーツ単位で変える → コンテナクエリ

（例：カード、ボタン、バナー）

このルールを守るだけで、
CSS設計が驚くほどスッキリします。

8. 実例：メディアクエリ + コンテナクエリの併用

現代的なCSSは両方を組み合わせる形がスタンダードです。

/* ページ全体はメディアクエリ */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

/* パーツはコンテナクエリ */
.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 420px) {
  .card {
    display: flex;
    gap: 16px;
  }
}

これにより、

ページ全体はスマホに合わせて1列に
カードは「置かれた幅」に応じて最適化

という、柔軟で壊れにくいデザインが作れます。

9. まとめ｜これからのレスポンシブは “パーツ単位” が鍵になる

メディアクエリはまだまだ欠かせませんが、
コンテナクエリの登場でレスポンシブ設計は新しい時代に入りました。

大枠の調整 → メディアクエリ
細かいパーツの調整 → コンテナクエリ

この使い分けができると、
どんなレイアウトにも柔軟に対応できる“壊れにくいデザイン”が実現します。

今からWeb制作を学ぶ人にとって、コンテナクエリは大きな武器になります。
新しいCSSを取り入れながら、より扱いやすく美しいサイトを作っていきましょう。