MENU
  1. ホーム
  2. IT・ガジェット
  3. IT知識
  4. CSSコンテナクエリの使い方｜@containerとメディアクエリの違い

CSSコンテナクエリの使い方｜@containerとメディアクエリの違い

本記事には広告が含まれています
IT知識
CSS
しん@IT・開発・教育の専門家
CSSコンテナクエリの使い方｜@containerとメディアクエリの違い

Webサイトのレスポンシブ対応で、「画面幅じゃなくて、この部品の幅に合わせてスタイルを変えたいのに…」と感じたことはありませんか？

そんな悩みを解決するのが、CSSの「コンテナクエリ（@container）」です。結論から言うと、親要素にcontainer-type: inline-size;を指定し、@container (条件) { … }の中に子要素のスタイルを書くだけで、部品単位のレスポンシブが実現できます。

サイズを基準にしたコンテナクエリは、2023年2月に主要ブラウザすべてで使えるようになり、2026年10月時点では「新機能」というより実務で普通に使える標準機能になっています。

この記事では、コンテナクエリの基本的な概念から具体的な使い方まで、初心者の方にも分かりやすく解説していきます。この記事で分かることは次のとおりです。

  • コンテナクエリとメディアクエリの違いと使い分け
  • container-typeと@containerの基本的な書き方
  • コピペで試せるカードレイアウトの実例
  • コンテナクエリ単位（cqiなど）の使い方
  • コンテナクエリが効かないときの原因と対処法
  • スタイルクエリなど発展的な機能と、2026年10月時点のブラウザ対応状況

これまでのメディアクエリとの違いを理解し、より効率的で柔軟なCSS設計を手に入れましょう。

目次

CSSコンテナクエリ（@container）とは？

CSSコンテナクエリ（@container）は、親要素のサイズを基準にして、子要素のスタイルを変化させるためのCSSの機能です。

これまでのレスポンシブ対応で主流だったメディアクエリ（@media）は、ブラウザの表示領域（ビューポート）全体の幅を基準にしていました。そのため、「PCでは3カラム、スマホでは1カラム」といったページ全体の大枠なレイアウト変更には適しています。

しかし、特定の「部品（コンポーネント）」、例えばカード型コンポーネントをメインコンテンツエリアとサイドバーの両方に配置したい場合、メディアクエリだけでは限界がありました。サイドバーは幅が狭いので、たとえPC表示でもスマホのような縦長のレイアウトで表示したい、というケースです。

コンテナクエリを使えば、コンポーネントが配置された親要素の幅を監視し、「親要素の幅が〇〇px以下ならこのスタイルを適用する」といった指定が可能になります。これにより、コンポーネントは自分が置かれた場所の広さに応じて最適な見た目に変化できるようになり、部品の独立性や再利用性が格段に向上するのです。

なお、コンテナクエリには大きく分けて次の種類があります。単に「コンテナクエリ」と言う場合は、最も基本的な「サイズクエリ」を指すのが一般的で、この記事でも主にサイズクエリを扱います。

  • サイズクエリ：親要素の幅や高さを条件にする（この記事のメイン）
  • スタイルクエリ：親要素のカスタムプロパティの値を条件にする
  • スクロール状態クエリ：スクロール位置や固定（sticky）の状態を条件にする

メディアクエリとの違いは「基準」【比較表あり】

コンテナクエリを理解する上で、最も重要なのがメディアクエリとの違いです。一言でいうと、「何を基準にスタイルを変化させるか」が根本的に異なります。

メディアクエリは「画面（ビューポート）」という、いわば“外的要因”を基準にします。ページ全体を地球だとすると、メディアクエリは天候のようなもので、サイト全体に影響を与えます。

一方、コンテナクエリは「親要素（コンテナ）」という“内的要因”を基準にします。コンポーネントを家だとすると、コンテナクエリは「リビングに置くならこのデザイン、寝室に置くならこのデザイン」と、その部屋の広さに合わせて家具の見た目を変えるようなイメージです。

この違いにより、コンポーネントの自己完結性が高まり、よりモジュラーな設計が実現しやすくなります。

両者の特徴を比較表にまとめました。

機能基準となる対象得意なことユースケースの例
コンテナクエリ親要素（コンテナ）のサイズ部品単位での柔軟なスタイル調整カード、ウィジェット、バナーなど再利用するコンポーネントのデザイン
メディアクエリ画面（ビューポート）のサイズページ全体のグローバルなレイアウト変更ヘッダー・フッターの表示切り替え、カラム数の変更

このように、どちらが優れているというわけではなく、それぞれの役割に応じて使い分けることが大切です。ページ全体の骨格はメディアクエリで作り、個々の部品の見た目はコンテナクエリで調整する、という使い分けが理想的でしょう。

書き方の面でも違いが1つあります。メディアクエリは@mediaを書くだけで使えますが、コンテナクエリは「どの要素を基準にするか」を先に宣言する必要があるという点です。次の章で、その手順を見ていきましょう。

コンテナクエリの基本的な使い方

コンテナクエリの使い方は、とてもシンプルで2つのステップで実装できます。ここでは、基本的な書き方を順を追って見ていきましょう。

ステップ1：コンテナの定義（container-type）

まず、基準としたい親要素（コンテナ）を定義します。これは、「この要素のサイズを監視してください」とブラウザに伝えるための宣言です。

親要素にしたいセレクタに対して、container-typeプロパティを指定します。このプロパティには、どの方向のサイズを監視するかを設定します。

  • inline-size: 横幅（水平方向）を監視の対象にします。最もよく使われる値です。
  • size: 横幅と高さ（水平・垂直方向）の両方を監視の対象にします。
  • normal: サイズクエリのコンテナとして定義しません（デフォルト値）。
/* card-containerクラスを持つ要素を、横幅を基準とするコンテナとして定義 */
.card-container {
  container-type: inline-size;
}

厳密には、inline-sizeは「インライン方向（文字が進む方向）のサイズ」を意味します。日本語や英語の横書きページでは横幅と同じなので、まずは「inline-size＝横幅」と覚えておけば問題ありません。

迷ったらinline-sizeを選びましょう。sizeは高さも監視できる反面、コンテナの高さを自分で指定しないと要素がつぶれてしまうため、高さで判定したい明確な理由があるときだけ使います（詳しくは後述の「効かないときの原因」で解説します）。

また、container-nameプロパティを使えば、コンテナに名前を付けることも可能です。これにより、複数のコンテナが入れ子になっている場合でも、どのコンテナを基準にするか明示的に指定できます。

/* コンテナに「sidebar」という名前を付ける */
.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

この2つのプロパティは、containerというショートハンドで1行にまとめられます。「名前 / 種類」の順にスラッシュで区切るのがルールです。

/* container-name: sidebar; と container-type: inline-size; をまとめた書き方 */
.sidebar {
  container: sidebar / inline-size;
}

ステップ2：スタイルの記述（@container）

コンテナを定義したら、次はそのコンテナのサイズに応じてスタイルを記述します。メディアクエリでおなじみの@mediaと非常によく似た@containerというルールを使います。

@containerの後に、条件式（コンテナの幅など）を書き、その中に適用したいスタイルを記述します。

/* .card-containerの幅が400px以下の場合に適用されるスタイル */
@container (max-width: 400px) {
  .card {
    flex-direction: column; /* カード内の要素を縦並びにする */
    align-items: flex-start;
  }

  .card-image {
    width: 100%; /* 画像の幅を100%にする */
    height: auto;
  }
}

名前を指定しない@containerは、スタイルを当てる要素から見て最も近い祖先のコンテナを基準にします。上の例では、.cardに一番近いコンテナである.card-containerの幅で判定されます。

もしcontainer-nameで名前を付けた場合は、@container 名前 (条件)のように指定します。

@container sidebar (max-width: 300px) {
  /* .sidebarコンテナの幅が300px以下の場合のスタイル */
}

このように、たった2つのステップで、部品単位のレスポンシブデザインが実現できます。

条件式の書き方：範囲構文と and / or / not

条件式には、max-widthやmin-widthのほかに、不等号を使った「範囲構文」も使えます。「以上」「以下」が直感的に読めるので、慣れるとこちらの方が書きやすいでしょう。

/* コンテナの幅が400pxより大きい場合 */
@container (width > 400px) {
  .card { flex-direction: row; }
}

/* コンテナの幅が400px以上800px以下の場合 */
@container (400px <= width <= 800px) {
  .card-title { font-size: 1.25rem; }
}

/* 複数の条件を and でつなぐ */
@container (width > 400px) and (height > 300px) {
  .card { padding: 2rem; }
}

使える比較演算子は=、<、<=、>、>=の5種類で、条件同士はand・or・notで組み合わせられます。

条件に使える主な項目は次のとおりです。

項目判定する内容必要なcontainer-type
width / inline-sizeコンテナの幅（インライン方向のサイズ）inline-sizeまたはsize
height / block-sizeコンテナの高さ（ブロック方向のサイズ）size
aspect-ratioコンテナの縦横比size
orientation横長（landscape）か縦長（portrait）かsize

高さが関わる項目はcontainer-type: sizeが必要になる点に注意してください。

参考：MDN Web Docs – @container

【コピペOK】コンテナクエリでカードの縦並び・横並びを切り替える実例

ここまでの内容を組み合わせて、実際に動くカードコンポーネントを作ってみましょう。同じカードを「広いメインエリア」と「狭いサイドバー」の両方に置き、置き場所に応じてレイアウトが変わることを確認します。

まずはHTMLです。ポイントは、カード（.card）を包む親要素（.card-container）を用意することです。

<div class="layout">
  <main class="main">
    <div class="card-container">
      <article class="card">
        <img class="card-image" src="sample.jpg" alt="サンプル画像">
        <div class="card-body">
          <h3 class="card-title">カードのタイトル</h3>
          <p class="card-text">カードの説明文が入ります。</p>
        </div>
      </article>
    </div>
  </main>

  <aside class="sidebar">
    <div class="card-container">
      <!-- メインエリアとまったく同じカードを置く -->
      <article class="card">…</article>
    </div>
  </aside>
</div>

続いてCSSです。

/* ページ全体の骨格（ここはメディアクエリの担当） */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 900px) {
  .layout {
    grid-template-columns: 1fr 280px; /* メイン＋サイドバー */
  }
}

/* ステップ1：カードを包む要素をコンテナにする */
.card-container {
  container: card / inline-size;
}

/* 基本のスタイル（狭いとき＝縦並び） */
.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.card-image {
  width: 100%;
  height: auto;
}

/* ステップ2：コンテナの幅が400px以上なら横並びにする */
@container card (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }

  .card-image {
    width: 40%;
  }
}

このコードでは、PC表示（画面幅900px以上）のとき、メインエリアのカードは親の幅が400px以上あるので横並びに、幅280pxのサイドバーに置いたカードは縦並びになります。画面幅は同じなのに、置き場所によって見た目が変わるのがコンテナクエリならではの動きです。

実装のコツは次の3つです。

  • 基本のスタイルを先に書く：@containerの外に「狭いとき」のスタイルを書いておけば、コンテナクエリ非対応の環境でも最低限の表示が保てます。
  • コンテナ用のラッパーを用意する：コンテナクエリで変えられるのはコンテナの「中身」だけなので、カード本体を変えたいならその外側をコンテナにします。
  • 役割を分ける：ページの骨格（カラム数）は@media、部品の見た目は@containerと分担すると、CSSが整理しやすくなります。

コンテナクエリ単位（cqw・cqi）で文字サイズや余白も親要素基準にする

コンテナクエリには、@containerルールとセットで覚えておきたい「コンテナクエリ単位」があります。vwやvhが画面サイズに対する割合なのに対し、コンテナクエリ単位はコンテナのサイズに対する割合を表す単位です。

単位意味
cqwコンテナの幅の1%
cqhコンテナの高さの1%
cqiコンテナのインライン方向のサイズの1%（横書きなら幅）
cqbコンテナのブロック方向のサイズの1%（横書きなら高さ）
cqmincqiとcqbのうち小さい方
cqmaxcqiとcqbのうち大きい方

例えば、カードの幅に合わせてタイトルの文字サイズをなめらかに変えたい場合は、clamp()と組み合わせて次のように書けます。

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

.card-title {
  /* 最小1rem、最大2rem。その間はコンテナ幅の5%に連動 */
  font-size: clamp(1rem, 5cqi, 2rem);
}

.card-body {
  /* 余白もコンテナ幅に連動させる */
  padding: 4cqi;
}

ブレークポイントで段階的に切り替えるのではなく、幅に応じて連続的に変化させたい場面で便利です。clamp()で最小値と最大値を決めておくと、文字が小さくなりすぎたり大きくなりすぎたりするのを防げます。

1つ注意したいのは、基準になるコンテナが見つからない場合、これらの単位はビューポート基準（スモールビューポート単位）で計算されることです。「思ったより文字が大きい」というときは、祖先にcontainer-typeを指定し忘れていないか確認してください。

コンテナクエリの具体的な活用シーン

コンテナクエリは、どのような場面で特に役立つのでしょうか。ここでは、具体的な活用シーンをいくつか紹介します。

一番分かりやすい例は、カード型レイアウトのコンポーネントです。

例えば、商品や記事の一覧を表示するカードを考えてみましょう。このカードは、メインコンテンツエリアのような広い場所では「画像が左、テキストが右」という横長のレイアウトで表示し、サイドバーのような狭い場所では「画像が上、テキストが下」という縦長のレイアウトにしたいはずです。

コンテナクエリを使えば、このカードコンポーネントのCSSは一度書くだけで済みます。あとは、広い親要素に置けば自動的に横長に、狭い親要素に置けば自動的に縦長に変化してくれるのです。HTMLの構造やクラス名を変更する必要はありません。

また、汎用的なウィジェットにも効果的です。

カレンダーやプロフィール、広告バナーといったウィジェットは、サイトの様々な場所に配置される可能性があります。コンテナクエリを活用すれば、それぞれの配置場所の幅に応じて、文字の大きさや要素の表示・非表示を細かく制御できます。これにより、どんなレイアウトの隙間にもフィットする、自己完結したウィジェットが作成可能になります。

そのほか、次のような場面でも力を発揮します。

  • グリッドの中のカード：カラム数が2列・3列・4列と変わると、1枚あたりの幅も変わります。画面幅ではなくカード自身の幅で判定できるので、カラム数ごとにメディアクエリを計算し直す必要がありません。
  • 幅が変わるパネル：開閉できるサイドメニューや、ドラッグで幅を変えられるパネルなど、画面幅は同じでも中身の領域だけが伸び縮みするUIにも対応できます。
  • 表やフォーム：狭い場所ではラベルを入力欄の上に、広い場所では横に並べる、といった切り替えを部品の中だけで完結させられます。

このように、コンテナクエリは「一度作れば、どこでも使える」再利用可能なコンポーネントを作成する上で非常に強力な武器となります。コンポーネント指向の開発が主流の現代において、まさに待望の機能と言えるでしょう。

コンテナクエリが効かないときの原因と対処法

書き方はシンプルなコンテナクエリですが、初めて使うと「書いたのに反映されない」「レイアウトが崩れた」とつまずきやすいポイントがあります。代表的な4つの原因を押さえておきましょう。

原因1：コンテナ自身にスタイルを当てようとしている

最も多い失敗がこれです。コンテナクエリでスタイルを変えられるのはコンテナの子孫要素だけで、コンテナ自身は対象になりません。

/* NG：.card をコンテナにして、.card 自身を変えようとしている */
.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card { flex-direction: row; } /* 効かない */
}

/* OK：.card を包む要素をコンテナにする */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card { flex-direction: row; } /* 効く */
}

変えたい要素の1つ外側をコンテナにする、と覚えておくと迷いません。

原因2：container-typeの指定漏れ・意図しないコンテナを参照している

@containerだけ書いて、親要素にcontainer-typeを指定していないケースです。container-typeの初期値はnormalなので、指定しない限りサイズクエリの基準にはなりません。

また、コンテナが入れ子になっている場合、名前なしの@containerは最も近い祖先のコンテナを参照します。「サイドバーの幅で判定したいのに、内側の別のコンテナの幅で判定されていた」ということが起こるので、複数のコンテナを使うときはcontainer-nameで名前を付け、@container sidebar (…)のように明示するのが安全です。

原因3：container-type: size を指定して高さがつぶれた

container-type: sizeを指定すると、ブラウザは「中身を無視して」コンテナのサイズを計算するようになります。そのため、高さを指定していないコンテナは中身があっても高さが0になり、要素がつぶれて見えなくなります。

対処法は次のどちらかです。

  • 幅だけで判定できるなら、container-type: inline-sizeに変える
  • 高さでも判定したいなら、コンテナにheightやaspect-ratioなどで高さを明示する

原因4：幅が「中身しだい」の要素をコンテナにしている

inline-sizeの場合も、横幅については同じ仕組みが働きます。コンテナの幅は中身を無視して計算されるため、幅が中身の量で決まる要素（display: inline-blockの要素、floatさせた要素、width: fit-contentを指定した要素など）をコンテナにすると、幅が0になってしまいます。

コンテナにする要素は、親いっぱいに広がるブロック要素や、グリッドで幅が割り当てられる要素など、外側の状況か明示的な指定で幅が決まる要素を選びましょう。

なぜこのような制約があるのかというと、「中身に応じてコンテナの幅が変わる → クエリの結果が変わる → 中身のスタイルが変わる → またコンテナの幅が変わる…」という無限ループを防ぐためです。仕組みを知っておくと、エラーの原因に気づきやすくなります。

上記に当てはまらないのに反映されない場合は、セレクタの詳細度や記述ミス、キャッシュなど、コンテナクエリ以外に原因がある可能性もあります。CSS全般の「反映されない」原因は、次の記事でまとめています。

CSSが反映されない原因と対策5選｜初心者がつまずくポイントを解決！

スタイルクエリなど、サイズ以外のコンテナクエリ

コンテナクエリは、サイズ以外の条件でも使えるように拡張が続いています。ここでは発展的な機能を3つ、概要だけ紹介します。まずはサイズクエリを使いこなしてから、必要に応じて取り入れれば十分です。

スタイルクエリ：style() でカスタムプロパティの値を条件にする

スタイルクエリは、親要素に設定されたカスタムプロパティ（CSS変数）の値を条件にスタイルを切り替える機能です。

/* 親要素にテーマを設定する */
.card-container {
  --theme: dark;
}

/* 親の --theme が dark のときだけ適用 */
@container style(--theme: dark) {
  .card {
    background: #222;
    color: #fff;
  }
}

サイズクエリと違い、スタイルクエリではcontainer-typeの指定は必要ありません。親要素のカスタムプロパティを1つ変えるだけで、中の部品の見た目をまとめて切り替えられるので、テーマやバリエーションの管理に向いています。

カスタムプロパティを対象としたスタイルクエリは、2026年5月にFirefox 151が対応したことで、主要ブラウザすべてで使えるようになりました（Chrome 111・Edge 111・Safari 18・Firefox 151以降）。ただし対応したばかりなので、少し前のバージョンのFirefoxでは動かない点に注意してください。

スクロール状態クエリ：scroll-state() で固定中・スクロール可能かを条件にする

スクロール状態クエリは、「position: stickyの要素が今くっついているか」「まだスクロールできる余地があるか」「スクロールスナップで止まっているか」といった状態を条件にできる機能です。これまでJavaScriptが必要だった「固定されたヘッダーにだけ影を付ける」といった表現がCSSだけで書けます。

.site-header {
  position: sticky;
  top: 0;
  container-type: scroll-state;
}

/* ヘッダーが上部に固定されている間だけ、中の要素に影を付ける */
@container scroll-state(stuck: top) {
  .site-header-inner {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

ただし、2026年10月時点で対応しているのはChromeとEdge（バージョン133以降）のみで、FirefoxとSafariは未対応です。使う場合は、「対応ブラウザでは見た目が少し良くなる」程度の装飾にとどめ、非対応でも困らない設計にしておきましょう。

名前だけのコンテナクエリ：条件なしで「どのコンテナの中か」を判定する

@container sidebar { … }のように、条件式を書かずにコンテナ名だけを指定する書き方です。「sidebarという名前のコンテナの中にあるとき」という判定ができ、置き場所ごとのスタイル分けがシンプルに書けます。

こちらも2026年5月に主要ブラウザすべてで使えるようになったばかりの機能です（Chrome 148・Edge 148・Firefox 149・Safari 26.4以降）。

コンテナクエリのメリットと注意点（デメリット）

コンテナクエリは非常に便利な機能ですが、メリットだけでなく、知っておくべき注意点も存在します。

メリット：再利用性と管理のしやすさが向上

最大のメリットは、やはりコンポーネントの再利用性と管理のしやすさが劇的に向上する点です。

これまでは、同じような部品でも配置場所によって異なるスタイルを当てるために、.card-in-sidebarや.card-wideのように、場所や状態に応じたクラス名を追加して対応する必要がありました。これはCSSの複雑化を招き、管理コストを増大させる原因でした。

コンテナクエリを使えば、コンポーネントは自分自身が置かれた環境（親要素の幅）を認識してスタイルを変化させられます。そのため、CSSはコンポーネントごとに完結し、HTML側で余計なクラスを付け外しする必要がなくなります。結果として、CSSの見通しが良くなり、メンテナンスが非常に楽になるのです。これは、大規模なプロジェクトやチームでの開発において、計り知れない恩恵をもたらします。

注意点1：ブラウザの対応状況（2026年10月時点）

基本となるサイズクエリは、主要なモダンブラウザ（Chrome, Firefox, Safari, Edge）ですべて対応済みです。2023年2月のFirefox 110で主要ブラウザの対応が出そろい、2025年8月には、幅広い環境で安心して使えることを示す「Baseline Widely available」の段階に入りました。Can I useの集計でも、世界全体で約96%の利用環境が対応しています（2026年10月時点）。

機能ごとの対応状況をまとめると、次のとおりです。

機能Chrome / EdgeFirefoxSafari実務での目安
サイズクエリ・コンテナクエリ単位105〜110〜16〜通常のサイトなら問題なく使える
スタイルクエリ（カスタムプロパティ）111〜151〜18〜対応したばかり。非対応時の表示を確認して使う
名前だけのコンテナクエリ148〜149〜26.4〜対応したばかり。非対応時の表示を確認して使う
スクロール状態クエリ133〜未対応未対応なくても困らない装飾に限定する

一方で、Internet Explorerはもちろんのこと、2022年以前のバージョンのブラウザではサイズクエリも動作しません。サポート対象のブラウザをどこまで広げるかによって、コンテナクエリを全面的に採用できるかが決まります。

参考：Can I use… – CSS Container Queries

注意点2：古いブラウザにはフォールバックを用意する

古いブラウザへの対応が必須な場合は、コンテナクエリが使えない環境での表示崩れを最小限に抑えるフォールバックのスタイルを用意しましょう。

いちばん簡単なのは、実例でも紹介した「基本のスタイルを@containerの外に書いておく」方法です。非対応のブラウザは@containerのブロックを丸ごと無視するので、基本のスタイル（例えば縦並び）だけが適用され、レイアウトが大きく崩れることはありません。

非対応のブラウザにだけ別のスタイルを当てたい場合は、@supportsで出し分けられます。

/* コンテナクエリ非対応のブラウザでは、メディアクエリで代用する */
@supports not (container-type: inline-size) {
  @media (min-width: 900px) {
    .main .card {
      flex-direction: row;
    }
  }
}

ポリフィル（機能を補うためのスクリプト）としては、Google Chrome Labsが公開している「container-query-polyfill」があります。ただし、2022年11月からメンテナンスモード（新機能の追加は行わない状態）になっており、Shadow DOMに対応していないなどの制限もあります。これから導入するなら、ポリフィルに頼るよりも、上記のようなCSSだけのフォールバックを基本にするのがおすすめです。

とはいえ、サイズクエリはすでにWeb標準として広く普及しています。新規のプロジェクトであれば、積極的に採用して良い技術と言えます。

Geekly（ギークリー）は本当にやばい？評判・口コミから見るIT転職のリアル【2025年最新版】

コンテナクエリに関するよくある質問

コンテナクエリがあれば、メディアクエリはもう不要ですか？

いいえ、今後も両方使います。ページ全体のカラム数の切り替えやヘッダー・フッターの表示切り替えなど、画面サイズそのものに応じた変更はメディアクエリの役割です。また、ダークモード（prefers-color-scheme）や印刷用スタイル（print）のように、メディアクエリでしか判定できない条件もあります。

コンテナが入れ子になっているとき、どのコンテナが基準になりますか？

名前を指定しない場合は、スタイルを当てる要素から見て最も近い祖先のコンテナが基準になります。特定のコンテナを基準にしたいときは、container-nameで名前を付けて@container 名前 (条件)と書きます。

コンテナの高さを条件にできますか？

できます。container-type: sizeを指定すれば、heightやaspect-ratioを条件に使えます。ただし、コンテナの高さを明示的に指定しないと要素がつぶれてしまうため、高さが決まっている領域（固定の高さのバナー枠など）で使うのが基本です。

FlexboxやGridと一緒に使えますか？

使えます。むしろ相性が良く、「グリッドで並べたカードの1枚1枚をコンテナにして、カードの幅に応じて中身を切り替える」という組み合わせが定番です。グリッドのアイテムは外側のレイアウトから幅が割り当てられるため、コンテナにしても幅がつぶれにくいというメリットもあります。フレックスのアイテムをコンテナにする場合は、中身の量で幅が決まる設定だとつぶれてしまうので、flex: 1やwidthなどで幅が決まるようにしておきましょう。

WordPressのサイトでも使えますか？

使えます。コンテナクエリはCSSの標準機能なので、テーマやプラグインに関係なく、追加CSSや子テーマのスタイルシートに書けば動作します。動くかどうかは、サイトを見る人のブラウザが対応しているかで決まります。

まとめ：コンテナクエリでコンポーネント指向のCSS設計へ

今回は、CSSの「コンテナクエリ」について、メディアクエリとの違いから具体的な使い方、効かないときの対処法までを解説しました。

コンテナクエリは、親要素の幅に応じてスタイルを変化させることで、コンポーネントの独立性と再利用性を飛躍的に高めます。

  • メディアクエリは「ページ全体」のレイアウトを制御するマクロな視点。
  • コンテナクエリは「部品単位」の見た目を制御するミクロな視点。
  • 使い方は、親要素にcontainer-type: inline-size;を指定し、@container (条件)の中に子要素のスタイルを書く2ステップ。
  • 効かないときは「コンテナ自身を変えようとしていないか」「container-typeを指定したか」をまず確認する。

この2つを適切に使い分けることで、より柔軟でメンテナンス性の高いCSS設計が実現できます。

これまでのレスポンシブデザインの常識を大きく変えたコンテナクエリは、すでに主要ブラウザで安心して使える段階に入っており、これからのWeb制作に欠かせないスキルです。まずはカード1つから、あなたのプロジェクトにも取り入れて、部品単位の新しいレスポンシブデザインを体験してみてください。

IT知識
CSS
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次