Webサイトのレスポンシブ対応で、「画面幅じゃなくて、この部品の幅に合わせてスタイルを変えたいのに…」と感じたことはありませんか？
そんな悩みを解決するCSSの新機能が「コンテナクエリ（@container）」です。
この記事では、コンテナクエリの基本的な概念から具体的な使い方まで、初心者の方にも分かりやすく解説していきます。これまでのメディアクエリとの違いを理解し、より効率的で柔軟なCSS設計を手に入れましょう。
CSSコンテナクエリ（@container）とは？
CSSコンテナクエリ（@container）は、親要素のサイズを基準にして、子要素のスタイルを変化させるための新しいCSSの機能です。
これまでのレスポンシブ対応で主流だったメディアクエリ（@media）は、ブラウザの表示領域（ビューポート）全体の幅を基準にしていました。そのため、「PCでは3カラム、スマホでは1カラム」といったページ全体の大枠なレイアウト変更には適しています。
しかし、特定の「部品（コンポーネント）」、例えばカード型コンポーネントをメインコンテンツエリアとサイドバーの両方に配置したい場合、メディアクエリだけでは限界がありました。サイドバーは幅が狭いので、たとえPC表示でもスマホのような縦長のレイアウトで表示したい、というケースです。
コンテナクエリを使えば、コンポーネントが配置された親要素の幅を監視し、「親要素の幅が〇〇px以下ならこのスタイルを適用する」といった指定が可能になります。これにより、コンポーネントは自分が置かれた場所の広さに応じて最適な見た目に変化できるようになり、部品の独立性や再利用性が格段に向上するのです。
メディアクエリとの違いは「基準」【比較表あり】
コンテナクエリを理解する上で、最も重要なのがメディアクエリとの違いです。一言でいうと、「何を基準にスタイルを変化させるか」が根本的に異なります。
メディアクエリは「画面（ビューポート）」という、いわば“外的要因”を基準にします。ページ全体を地球だとすると、メディアクエリは天候のようなもので、サイト全体に影響を与えます。
一方、コンテナクエリは「親要素（コンテナ）」という“内的要因”を基準にします。コンポーネントを家だとすると、コンテナクエリは「リビングに置くならこのデザイン、寝室に置くならこのデザイン」と、その部屋の広さに合わせて家具の見た目を変えるようなイメージです。
この違いにより、コンポーネントの自己完結性が高まり、よりモジュラーな設計が実現しやすくなります。
両者の特徴を比較表にまとめました。
| 機能 | 基準となる対象 | 得意なこと | ユースケースの例 |
|---|---|---|---|
| コンテナクエリ | 親要素（コンテナ）のサイズ | 部品単位での柔軟なスタイル調整 | カード、ウィジェット、バナーなど再利用するコンポーネントのデザイン |
| メディアクエリ | 画面（ビューポート）のサイズ | ページ全体のグローバルなレイアウト変更 | ヘッダー・フッターの表示切り替え、カラム数の変更 |
このように、どちらが優れているというわけではなく、それぞれの役割に応じて使い分けることが大切です。ページ全体の骨格はメディアクエリで作り、個々の部品の見た目はコンテナクエリで調整する、という使い分けが理想的でしょう。
コンテナクエリの基本的な使い方
コンテナクエリの使い方は、とてもシンプルで2つのステップで実装できます。ここでは、基本的な書き方を順を追って見ていきましょう。
ステップ1：コンテナの定義（container-type）
まず、基準としたい親要素（コンテナ）を定義します。これは、「この要素のサイズを監視してください」とブラウザに伝えるための宣言です。
親要素にしたいセレクタに対して、container-typeプロパティを指定します。このプロパティには、どの方向のサイズを監視するかを設定します。
inline-size: 横幅（水平方向）を監視の対象にします。最もよく使われる値です。size: 横幅と高さ（水平・垂直方向）の両方を監視の対象にします。normal: コンテナとして定義しません（デフォルト値）。
/* card-containerクラスを持つ要素を、横幅を基準とするコンテナとして定義 */
.card-container {
container-type: inline-size;
}
また、container-nameプロパティを使えば、コンテナに名前を付けることも可能です。これにより、複数のコンテナが入れ子になっている場合でも、どのコンテナを基準にするか明示的に指定できます。
/* コンテナに「sidebar」という名前を付ける */
.sidebar {
container-type: inline-size;
container-name: sidebar;
}
ステップ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-nameで名前を付けた場合は、@container 名前 (条件)のように指定します。
@container sidebar (max-width: 300px) {
/* .sidebarコンテナの幅が300px以下の場合のスタイル */
}
このように、たった2つのステップで、部品単位のレスポンシブデザインが実現できます。
コンテナクエリの具体的な活用シーン
コンテナクエリは、どのような場面で特に役立つのでしょうか。ここでは、具体的な活用シーンをいくつか紹介します。
一番分かりやすい例は、カード型レイアウトのコンポーネントです。
例えば、商品や記事の一覧を表示するカードを考えてみましょう。このカードは、メインコンテンツエリアのような広い場所では「画像が左、テキストが右」という横長のレイアウトで表示し、サイドバーのような狭い場所では「画像が上、テキストが下」という縦長のレイアウトにしたいはずです。
コンテナクエリを使えば、このカードコンポーネントのCSSは一度書くだけで済みます。あとは、広い親要素に置けば自動的に横長に、狭い親要素に置けば自動的に縦長に変化してくれるのです。HTMLの構造やクラス名を変更する必要はありません。
また、汎用的なウィジェットにも効果的です。
カレンダーやプロフィール、広告バナーといったウィジェットは、サイトの様々な場所に配置される可能性があります。コンテナクエリを活用すれば、それぞれの配置場所の幅に応じて、文字の大きさや要素の表示・非表示を細かく制御できます。これにより、どんなレイアウトの隙間にもフィットする、自己完結したウィジェットが作成可能になります。
このように、コンテナクエリは「一度作れば、どこでも使える」再利用可能なコンポーネントを作成する上で非常に強力な武器となります。コンポーネント指向の開発が主流の現代において、まさに待望の機能と言えるでしょう。
コンテナクエリのメリットと注意点（デメリット）
コンテナクエリは非常に便利な機能ですが、メリットだけでなく、知っておくべき注意点も存在します。
メリット：再利用性と管理のしやすさが向上
最大のメリットは、やはりコンポーネントの再利用性と管理のしやすさが劇的に向上する点です。
これまでは、同じような部品でも配置場所によって異なるスタイルを当てるために、.card-in-sidebarや.card-wideのように、場所や状態に応じたクラス名を追加して対応する必要がありました。これはCSSの複雑化を招き、管理コストを増大させる原因でした。
コンテナクエリを使えば、コンポーネントは自分自身が置かれた環境（親要素の幅）を認識してスタイルを変化させられます。そのため、CSSはコンポーネントごとに完結し、HTML側で余計なクラスを付け外しする必要がなくなります。結果として、CSSの見通しが良くなり、メンテナンスが非常に楽になるのです。これは、大規模なプロジェクトやチームでの開発において、計り知れない恩恵をもたらします。
注意点：ブラウザの対応状況
コンテナクエリは比較的新しい技術であるため、一部の古いブラウザではサポートされていないという注意点があります。
2025年現在、主要なモダンブラウザ（Chrome, Firefox, Safari, Edge）ではすべて対応済みですが、Internet Explorerはもちろんのこと、数年前のバージョンのブラウザでは動作しません。
そのため、サポート対象のブラウザをどこまで広げるかによって、コンテナクエリを全面的に採用できるかが決まります。もし古いブラウザへの対応が必須な場合は、コンテナクエリが使えない環境での表示崩れを最小限に抑えるフォールバックのスタイルを用意したり、ポリフィル（機能を補うためのスクリプト）の導入を検討したりする必要があるでしょう。
とはいえ、Web標準として広く採用が進んでいるため、将来的にはこの問題は解消されていくと考えられます。新規のプロジェクトであれば、積極的に採用を検討して良い技術と言えます。
参考：Can I use… – CSS Container Queries
Geekly（ギークリー）は本当にやばい？評判・口コミから見るIT転職のリアル【2025年最新版】
まとめ：コンテナクエリでコンポーネント指向のCSS設計へ
今回は、CSSの新機能「コンテナクエリ」について、メディアクエリとの違いから具体的な使い方までを解説しました。
コンテナクエリは、親要素の幅に応じてスタイルを変化させることで、コンポーネントの独立性と再利用性を飛躍的に高めます。
- メディアクエリは「ページ全体」のレイアウトを制御するマクロな視点。
- コンテナクエリは「部品単位」の見た目を制御するミクロな視点。
この2つを適切に使い分けることで、より柔軟でメンテナンス性の高いCSS設計が実現できます。
これまでのレスポンシブデザインの常識を大きく変える可能性を秘めたコンテナクエリ。まだ新しい技術ではありますが、これからのWeb制作に欠かせないスキルになることは間違いありません。ぜひ、あなたのプロジェクトにも取り入れて、部品単位の新しいレスポンシブデザインを体験してみてください。
