【2025年最新版】コンテナクエリについて / メディアクエリとの違い〜文法までを紹介
こんにちは。今回はコンテナクエリについてのお話しです。
コンテナクエリ（Container Query）は、要素の親要素（コンテナ）のサイズに応じてスタイルを適用できるCSSの機能です。
従来のメディアクエリ（Media Query）はビューポートのサイズに基づいていましたが、コンテナクエリを使うことで、より柔軟なレスポンシブデザインが可能になります。
本記事では、コンテナクエリの基本から最新の活用方法までを詳しく解説します！
目次
ブラウザの対応状況
2025年現在、コンテナクエリは主要なすべてのブラウザで完全にサポートされ、Web開発において重要なツールの一つとなっています。
https://caniuse.com/css-container-queries
メディアクエリとコンテナクエリ
まず「コンテナクエリって何？メディアクエリと何が違うの？」という方に説明すると「メディアのサイズ（ビューポート）を基準として命令を出すものがメディアクエリ」であるのに対し、「コンテナ（祖先要素）のサイズを基準として命令を出すものがコンテナクエリ」になります。
下のイメージを見ていただくとより分かりやすいですね。
これまでレスポンシブWebデザインにおいては「メディアのサイズ」を基準としてレイアウトやデザインの命令を出していました。
上のイメージのように、メディアクエリの記述を使い「メディアのサイズが〇〇px以下になったらメニューをハンバーガーに切り替える / Section Aと Section Bを上下に並べる」といった命令でタブレットやスマホに対してレイアウトの指定をしてきました。
メディアクエリの問題点
しかしレスポンシブWebデザインで常に可変し続けるようなサイトを作る場合、PCからタブレット・スマホの間でレイアウトが崩れやすく（見辛く）なるタイミングもあります。
上のようにメディアのサイズが中途半端に小さくなった際、Section A部分が明らかに見づらくなってしまう経験がどなたにもあると思います。（ぼくは結構あります）
Section Aの幅がここまで小さくなった場合、サムネイルとテキストは上下に並んだ方が見やすいはずです。
このような時にもこれまではメディアクエリを使い対応してきましたが、この時の基準は「メディアのサイズ」ではなく「Section Aのコンテナサイズ」を基準とした方が考えやすくなります。
「Section Aのコンテナサイズが〇〇px以下になったらサムネイルとテキストを上下に並べる」という命令が出せるのがコンテナクエリになります。
ここで感じるのが「え？それメディクエリでも同じことできるじゃん」と言うことです。
当然、僕もそのように感じました。
「メディアのサイズが〇〇px以下になったらサムネイルとテキストを上下に並べる」と指示すれば良いわけですよね。
コンテナクエリの利点
メディアのサイズと言う大きな範囲を基準とするより、コンテナのサイズという細かな範囲を基準にすることができるというのがコンテナクエリの利点かなと感じています。
例えばサムネイルサイズが100pxだとして、メディアのサイズがいくつになったらテキストが見づらくなるかと考えようとすると、基準が大きすぎて想像しづらいと思います。（検証ツールで測れば良いだけの話ですが）
「サムネイルサイズが100pxだからコンテナのサイズ（SectionAの横幅）が150px以下くらいになったら、テキストの幅が小さくて読みづらくなりそうだなぁ」というのは容易に想像できますよね。
このように細かく可変をさせる際にはとても便利そうです。
メディアクエリとの使い分け
結論として完全にコンテナクエリに移行していくのではなく、
- メディアを基準に大きな構造を可変させていく箇所はメディアクエリ
（メニューの切り替えや、大きなレイアウトの変更など） - コンテナを基準に細かく可変をさせていく箇所はコンテナクエリ
（可変時におけるセクション内の調整など）
と使い分けると良いのかなと感じました。
もちろん今後色々な使われ方がしていく中で、それぞれの役割なども変わっていくこともあると思います。
実際の制作の中で「あぁ、こういう時に使うと便利だなぁ」と感じることもありそうだなと思うので、積極的に使っていきたいですね！
コンテナクエリの記述方・文法
コンテナクエリはcontainer-typeプロパティと@containerルールを使用します。
containerプロパティを指定したセレクタがコンテナクエリの基準となり、@containerルールを使って「基準となるコンテナのサイズによって指示を切り替える」イメージです。
container-typeプロパティ
基準としたいセレクタに対してcontainer-typeプロパティを記述します。
div {
container-type: inline-size;
}container-typeの値は以下の通りです。
- normal : 通常動作
- inline-size インライン方向(横方向)のサイズに応じる
- size インライン方向(横方向)とブロック方向(縦方向)のサイズに応じる
幅を基準とする場合はinline-sizeを適用します。
container-nameプロパティ
コンテナに名前をつけたい場合、container-nameプロパティを使用します。
複数の祖先要素にcontainer-typeを記述した際に、どちらを基準とするか明記する必要がある場合にはcontainer-nameプロパティで名前をつけておきます。（値 / 名前は任意でつけることができます）
必須の記述ではないため、記述がない場合は最も近い祖先要素が基準となります。
div {
container-type: inline-size;
container-name: layout;
}値（名前 / 上の記述例の layout 部分）は任意でつけることができます。
containerプロパティ
container-typeプロパティとcontainer-nameプロパティのショートハンドです。
まとめて記述したい場合に用います。
値はname/typeの順で記述します。
div {
container: layout/inline-size;
}@containerルール
@containerの記述でコンテナサイズを条件としてCSSを記述します。
@container (min-width:300px) {
.main {
background-color: #ffc;
}
}上の記述だと基準となるコンテナの幅が300pxを超えた場合、子要素の.mainの背景色が#ffcとなります。
container-nameプロパティで基準となるコンテナに名前をつけている場合、以下のように名前を指定して記述することができます。
@container layout (min-width:300px) {
.main {
background-color: #ffc;
}
}コンテナクエリ用の単位（Container Query Units）
2025年現在、CSSにはコンテナサイズを基準にした新しい単位が登場しています。
これにより、コンテナクエリと組み合わせて、より柔軟なデザインが可能になりました。具体的には、以下のような単位があります。
- ・cqw: コンテナの幅（width）の 1%
- ・cqh: コンテナの高さ（height）の 1%
- ・cqi: コンテナのインラインサイズの 1%（横書きでは幅と同じ）
- ・cqb: コンテナのブロックサイズの 1%（横書きでは高さと同じ）
- ・cqmin: cqi と cqb の小さい方
- ・cqmax: cqi と cqb の大きい方
実際の使い方
たとえば、以下のコードでは、コンテナの幅の 50% を要素の幅に、コンテナの高さの 100% を要素の高さに設定しています。
.container {
container-type: inline-size;
}
.element {
width: 50cqw; /* コンテナの幅の 50% */
height: 100cqh; /* コンテナの高さの 100% */
background-color: lightblue;
}
これによって親要素のサイズが変わると、自動で子要素のサイズも調整されます。
レスポンシブレイアウトがとてもシンプルに実現できます！
実用的な使い方
例えば、カードコンポーネントのデザインを考えたとき、コンテナ幅の 80% を画像に、20% をテキストエリアに割り振るようなことも、コンテナクエリ単位を使えば直感的に書けます。
.card {
container-type: inline-size;
display: flex;
}
.card img {
width: 80cqw;
}
.card .text {
width: 20cqw;
padding: 2cqi;
}コンテナクエリ単位を使うことで、コンポーネントのサイズに応じた柔軟なデザインがより簡単に実現できます。
メディアクエリよりも粒度が細かく、コンポーネント指向のデザインに最適です。
これからのCSS設計で、ぜひ活用してみてください！
HTML,CSSの記述例
最後にコンテナクエリを使ったHTMLとCSSの記述例を紹介します。
See the Pen container query by hiroshi nakazato (@nnc_nakazato) on CodePen.
コードとResultの画面が2分割になっている状態で見ると、リストの文字色が黒になっていると思います。
左側のコード画面を閉じ、Resultの画面が広がるとリストの文字色が赤く変化すると思います。
@containerルールでmin-width:500pxとしているため、コンテナのサイズが500pxを超えたら文字色が変わる仕様になっています。
まとめ
コンテナを基準として指示が出せるようになったことで、レスポンシブWebデザインにおいて細やかな設定がしやすくなりましたね。
初めて学ぶ方にとってはメディアクエリとの違いが分かりづらい部分になりますが、この記事を見ながらコードを書いていくと違いやメリットが見えてくると思います。
また次に記事を書くのが2年後にならないよう、年内にあと1つくらいは書きたいと思います！（スタッフは定期的に記事を書いてくれています）
参考にさせていただいたサイト、記事になります：
