- そもそもコンテナクエリ（@container）で、何ができるの？
- これまでのメディアクエリと、どう使い分けるの？
- 自分のサイトの、どこで使えばいいの？
CSSのレスポンシブ対応って、これまでずっと「画面サイズ」を基準にしてきましたよね。
でも、こんな経験はありませんか？
同じカードやフォームでも、サイドバーに置いたときと、本文の広いスペースに置いたときで、見た目を変えたい——。画面の幅は同じなのに、置き場所によって整え方を変えたいだけ。それなのに、メディアクエリで書こうとすると、急にややこしくなります。
私もWeb制作を長くやってきましたが、ここはずっと面倒なポイントでした。画面幅が同じだと同じスタイルになってしまうので、置き場所ごとの細かい調整を、半ば力技で書き分けていたんです。
そんなときに知ったのが、今回の主役「コンテナクエリ（@container）」です。画面全体ではなく、その部品が入っている「箱（コンテナ）」の状態を見て、スタイルを切り替えられる仕組みです。
この記事では、コンテナクエリを教科書のように並べるのではなく、Web制作の現場でどこに効くのかを、コード例と一緒にやさしく整理していきます。
コンテナクエリ（@container）とは？
まずは「で、これまでのメディアクエリと何が違うの？」という、いちばん引っかかりやすいところから整理しますね。
その前に、ひとつだけ言葉の整理をさせてください。@container を使ったこの仕組みは、正式には「コンテナクエリ」と呼ばれます。さらに細かく分けると、箱のサイズ（幅・高さ）で切り替える「サイズクエリ」と、箱のCSS変数の値で切り替える「スタイルクエリ」（@container style()）の2種類があります。この記事で扱うのは、おもに前者、つまりサイズに応じてレイアウトを切り替える使い方です。
コンテナクエリ（@container）は、CSSにおける最新の機能であり、従来のメディアクエリと異なり、要素のコンテナのサイズやスタイルに基づいてレイアウトやデザインを制御できるという画期的なものです。
従来のメディアクエリ（@media）は、画面サイズやデバイスの幅を基準にスタイルを変更するものでしたが、コンテナクエリは特定のコンテナの状態に基づいて動的にスタイルを変更します。
画面サイズじゃなくて、コンテナのサイズで切り替える……って言われても、正直まだピンと来ないです
ですよね。ざっくり言うと「その部品が入っている箱の幅」を見ているだけなんです。ページ全体じゃなくて、箱ひとつ単位で考えるのがコツです
これにより、要素自体が持つスタイルやサイズに応じたデザインの調整が可能となります。
例えば、従来は全体の画面幅に基づいてレイアウトを変更するしかなかったのですが、コンテナクエリを使えば、親要素（コンテナ）の幅や高さが変化した場合に、その子要素のデザインも自動的に変わるように設定できます。
これにより、複雑なモジュール設計や、再利用可能なコンポーネントをより柔軟に設計することができ、レスポンシブデザインの幅が大きく広がります。
この新機能は特に、デザインがモジュール化され、特定のセクションやコンポーネントのサイズに応じたレイアウト変更が必要なWebプロジェクトにおいて非常に便利です。
コンテナクエリの基本的な使い方
名前だけ聞くと身構えてしまいますが、書き方そのものは拍子抜けするくらいシンプルです。やることは、ざっくり2ステップだけです。
コンテナクエリ（@container）の基本的な使い方は、特定のコンテナのサイズやスタイルに基づいて、子要素に異なるスタイルを適用することです。
この機能を使用することで、従来のメディアクエリに比べて、より細かいレスポンシブデザインが可能になります。
コンテナクエリの基本構文
コンテナクエリの構文は非常にシンプルです。
まず、対象となるコンテナに対して container-type プロパティを設定します。
このプロパティは、どのような条件でスタイルを変更するかを指定します。
次に、@container を使ってコンテナの状態に基づくスタイルを定義します。
/* コンテナの設定 */
.container {
container-type: inline-size; /* 幅に基づいたレスポンシブ制御 */
}
/* コンテナの幅が500px以上になった場合のスタイル */
@container (min-width: 500px) {
.item {
display: flex;
justify-content: space-between;
}
}この例では、.container クラスに対して container-type: inline-size; を設定し、幅が500px以上になったときに .item クラスのレイアウトを変更しています。
コンテナクエリの設定例
コンテナクエリは、特定の条件をもとにさまざまなプロパティを適用できます。
以下は具体的な設定例です。
1. 高さに基づくレイアウト変更
.container {
container-type: size; /* 高さに基づいたレスポンシブ制御 */
}
@container (min-height: 300px) {
.box {
background-color: lightblue;
}
}この例では、コンテナの高さが300pxを超えた場合に、背景色を変更しています。
2. コンテナクエリで異なるレイアウト
.container {
container-type: inline-size;
}
@container (min-width: 600px) {
.item {
grid-template-columns: repeat(3, 1fr);
}
}このコードでは、コンテナの幅が600px以上になると、グリッドレイアウトが適用され、3列のレイアウトになります。
コンテナクエリの利点
- 柔軟なレスポンシブ対応:
コンテナのサイズやスタイルに応じてレイアウトを変更できるため、ページ全体ではなく特定のモジュールに対してレスポンシブ対応が可能。 - 再利用性の向上:
モジュール化されたデザインやコンポーネントベースの設計で、再利用可能なスタイルが簡単に実装できる。
コンテナクエリを活用すれば、従来のメディアクエリよりも詳細に、そして効率的にレスポンシブデザインを実現することができます。
コンテナクエリのユースケース
とはいえ、いちばん知りたいのは「で、自分のサイトのどこで使えるの？」というところですよね。ここからは具体的な場面で見ていきます。
コンテナクエリ（@container）は、特定のコンテナサイズやスタイルに応じたデザインを適用するための新しい手法です。
これにより、従来のメディアクエリでは実現できなかった、モジュールやコンポーネント単位での柔軟なレスポンシブデザインが可能になります。
以下は、コンテナクエリを実際のデザインに活用する具体的なユースケースです。
仕組みはなんとなくわかってきました。でも、自分のサイトのどこから手をつければいいんでしょう？
まずは「同じ部品をいろんな場所で使い回しているところ」を探すといいです。これから挙げるカードやフォームが、その代表例です
1. カード型コンポーネントのレイアウト調整
カード型コンポーネントは、多くのWebサイトで使用される一般的なレイアウトです。
コンテナクエリを使用すると、ページ全体ではなく、カードコンポーネント自体のサイズに応じてレイアウトを動的に変更できます。
ユースケースの例：
- コンテナが小さい場合：カードのレイアウトを縦並びにし、内容を積み重ねる。
- コンテナが広がる場合：カードのレイアウトを横並びにし、画像とテキストを並べる。
.card-container {
display: block;
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: flex;
flex-direction: row;
}
}このように、コンテナサイズに応じてレイアウトを変更することで、ページ全体のデザインに影響を与えず、特定のコンポーネントのみにスタイルを適用できます。
2. フォームのデザイン
フォームは、ユーザーインターフェースにおいて重要な要素です。
コンテナクエリを使用すれば、画面サイズに依存することなく、特定のコンテナ（フォーム）の幅に応じてレイアウトを調整できます。
ユースケースの例：
- 小さいコンテナでは、フォームの入力フィールドを縦並びに。
- コンテナが広くなると、入力フィールドを横に並べることでスペースを有効活用。
.form-container {
display: grid;
grid-template-columns: 1fr;
container-type: inline-size;
}
@container (min-width: 600px) {
.form-container {
grid-template-columns: repeat(2, 1fr);
}
}この設定により、フォームはデバイスの画面サイズに関係なく、コンテナ自体の幅に応じて動的に調整され、ユーザーに最適な体験を提供します。
3. ナビゲーションメニューのレスポンシブ対応
ナビゲーションメニューも、コンテナクエリで柔軟にデザインを変更できます。
例えば、特定のコンテナ幅以下ではドロップダウンメニューに変更し、コンテナ幅が大きいときは横にメニューを展開させることができます。
ユースケースの例：
- 小さなコンテナ：メニューを隠し、ドロップダウンに変更。
- 大きなコンテナ：全てのメニュー項目を横に並べて表示。
.nav-container {
container-type: inline-size;
}
@container (min-width: 700px) {
.nav-menu {
display: flex;
}
}4. コンポーネント単位での広告表示の最適化
広告表示も、コンテナクエリを活用して調整可能です。
特に、特定のコンテナ内に収まるかどうかを判断して、異なる広告サイズを表示させることができます。
これにより、ページ全体のレイアウトを壊さずに、最適な表示を行えます。
コンテナクエリを使えば、これまでメディアクエリで一括管理していたデザインを、コンポーネントごとに柔軟に最適化でき、よりモジュール化された設計が実現できます。
コンテナクエリを活用したモジュール化デザイン
ここまで来ると、コンテナクエリの本当のうまみが見えてきます。「部品を、どこに置いても勝手にいい感じになる」状態が作れるんです。
コンテナクエリ（@container）は、モジュール化デザインをさらに進化させるための強力なツールです。
モジュール化デザインとは、コンポーネントごとに独立してデザインし、再利用や保守がしやすいデザイン手法のことを指します。
コンテナクエリを使うことで、各コンポーネントがそれぞれのコンテナサイズに応じてデザインを変更できるため、柔軟で一貫性のあるモジュールを作成できます。
1. モジュール化デザインの利点
モジュール化デザインは、ページ全体ではなく、個々のコンポーネントのレイアウトやスタイルを管理できるため、デザインの一貫性を保ちながら柔軟なレイアウト調整が可能です。
また、モジュールごとにスタイルを分けることで、メンテナンスが容易になり、再利用性も向上します。
コンテナクエリを導入することで、コンポーネント単位でレスポンシブデザインを実現でき、モジュールの枠を超えた柔軟なデザインが可能となります。
2. コンポーネントの個別スタイリング
コンテナクエリは、従来のメディアクエリでは難しかった、特定のコンポーネントの状態に応じたスタイリングが可能です。
例えば、あるコンテナ（モジュール）が特定のサイズになったときに、ボタンやテキスト、画像などのスタイルを変化させることで、コンポーネントの見た目や機能を動的に調整できます。
実例：カード型レイアウト
.card-container {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
container-type: inline-size;
}
@container (min-width: 600px) {
.card-container {
grid-template-columns: 1fr 1fr;
}
}
@container (min-width: 900px) {
.card-container {
grid-template-columns: 1fr 1fr 1fr;
}
}このコード例では、カードコンポーネントが含まれる親コンテナの幅に応じて、カードの表示方法を変更します。
コンテナの幅が600px以上になると、2列レイアウトになり、900px以上では3列レイアウトに変わります。
このように、特定のコンテナサイズに応じたスタイリングが可能になり、コンポーネントのモジュール性を維持しつつ、柔軟なレイアウトを実現できます。
3. チームでの開発におけるメリット
モジュール化デザインを取り入れることで、チーム全体で統一されたデザインシステムを導入しやすくなります。
コンテナクエリを使えば、異なる画面サイズやデバイスに対応する際にも、各メンバーが担当するコンポーネントごとに適切なレスポンシブ対応を設定でき、デザインの破綻を防げます。これにより、開発速度やメンテナンス性が向上します。
4. プロトタイプと実装のギャップを埋める
デザインツールで作成したモックアップが、実際のブラウザ上でどのように動作するかをコンテナクエリでシミュレーションしやすくなります。
コンテナのスタイルやサイズに応じて自動的にレイアウトが調整されるため、プロトタイプで考えたデザインと実際の実装とのギャップを最小限に抑えることが可能です。
コンテナクエリを活用したモジュール化デザインを取り入れることで、柔軟で再利用可能なコンポーネントを作成し、保守性の高いプロジェクトを構築できます。
CSSコンテナクエリを使ったレスポンシブデザインのベストプラクティス
実際に使い始めると、「どう書くのが正解なんだろう」と迷う場面が出てきます。私がつまずいたところも含めて、コツを整理しておきます。
コンテナクエリ（@container）は、従来のメディアクエリでは対応しきれなかったモジュール単位でのレスポンシブ対応を実現するための非常に強力なツールです。
以下では、コンテナクエリを活用したレスポンシブデザインにおけるベストプラクティスを紹介します。
1. モジュール単位での設計
コンテナクエリを活用する際、重要なのは「モジュール単位」でレイアウトやデザインを考えることです。
従来のメディアクエリでは、画面全体の幅に応じてレイアウトを調整していましたが、コンテナクエリでは特定のコンテナ（モジュール）のサイズに基づいてスタイルを変更できます。
これにより、各コンポーネントが自立し、より細かいレスポンシブ対応が可能となります。
2. ネストされたクエリの活用
コンテナクエリを使用する際、親コンテナ内でさらに子コンテナが存在する場合、それぞれのコンテナに対して独自のスタイルを適用できます。
このようにネストされたクエリを使うことで、複数のサイズやレイアウトの条件に応じた柔軟なデザインが可能になります。
例: コンテナごとの異なるレイアウト
.card-container {
display: grid;
grid-template-columns: 1fr;
container-type: inline-size;
}
@container (min-width: 600px) {
.card-container {
grid-template-columns: repeat(2, 1fr);
}
}
@container (min-width: 900px) {
.card-container {
grid-template-columns: repeat(3, 1fr);
}
}このようなネストされたクエリを使用することで、親コンテナや子コンテナのサイズに応じたレイアウトを柔軟に設定できます。
3. コンテナサイズを意識したデザイン設計
コンテナクエリを活用する際には、モジュール（コンポーネント）のサイズに応じたレイアウト変更が可能となるため、デザイン設計時に「どのモジュールがどのコンテナサイズで変化するのか」を計画的に考えることが重要です。
ページ全体ではなく、各モジュールにどのような変化が必要かを考え、コンテナクエリを使って設定しましょう。
4. 不要なメディアクエリを減らす
コンテナクエリを使用することで、従来のメディアクエリの多用を避けることができます。
これにより、CSSが軽量化され、コードのメンテナンス性も向上します。メディアクエリを使用するよりも、必要な部分でのみコンテナクエリを使用する方が、パフォーマンスと拡張性の面でも有利です。
5. デザインシステムに統合する
コンテナクエリを活用する際は、デザインシステムやコンポーネントライブラリに組み込むことが重要です。
これにより、プロジェクト全体で一貫性を保ちながら、モジュールごとに異なるレスポンシブ対応を実現できます。
6. テストを重ねて最適化
コンテナクエリを使用する際には、さまざまな画面サイズやコンテナサイズでテストを行い、期待通りの動作を確認することが重要です。
特に異なるデバイスやブラウザでの表示が一貫しているかを確認し、必要に応じてクエリを最適化します。
これらのベストプラクティスを守ることで、コンテナクエリを効果的に活用し、より柔軟でモジュール化されたレスポンシブデザインを実現することができます。
コンテナクエリのデメリットや制限
便利な機能ほど、先に弱点を知っておきたいですよね。ここは正直に書きます。
コンテナクエリ（@container）はCSSの強力なツールですが、いくつかのデメリットや制限があるため、使う際には注意が必要です。以下に主なデメリットや制限を紹介します。
新しいCSSって、結局まだ実務では使えないんじゃ……？
その不安、よくわかります。心配な案件では、このあと出てくる「メディアクエリとの併用」でカバーしておけば安心です
1. ブラウザの対応状況
コンテナクエリは、比較的新しいCSS機能であるため、すべてのブラウザで完全にサポートされているわけではありません。
特に古いブラウザや一部のモバイルブラウザでは対応が遅れている場合があります。
これにより、デザインの互換性に問題が発生する可能性があるため、クロスブラウザ対応を考慮する必要があります。
具体的には、最新のブラウザバージョンが対象であり、対応していないブラウザでは従来のメディアクエリを併用することが必要になるかもしれません。
2. パフォーマンスへの影響
コンテナクエリは強力で柔軟な機能を提供しますが、複数のコンテナに対して多くのクエリを設定することで、レンダリングパフォーマンスに影響を与える可能性があります。
特に、大規模なサイトや複雑なレイアウトでは、クエリの数が増えるとブラウザがコンテナサイズを監視し続ける必要があるため、パフォーマンスが低下するリスクがあります。
そのため、パフォーマンス面での最適化や、無駄なクエリの追加を避けることが求められます。
3. 学習コスト
コンテナクエリはメディアクエリに比べてやや複雑であるため、CSSの初学者や慣れていない開発者にとっては学習コストがかかるかもしれません。
特に、従来の「画面サイズ」に基づいたデザインから「コンテナサイズ」に基づく設計に移行する際には、コンテナにフォーカスした考え方を理解し、コードを適切に構造化する必要があります。
4. 従来のワークフローとの併用が必要
コンテナクエリを導入する際、完全にメディアクエリを置き換えることは難しい場合があります。
プロジェクトの規模や既存のコードベースによっては、コンテナクエリとメディアクエリを併用する必要があり、コーディングの複雑さが増す可能性があります。
既存のプロジェクトに導入する際には、どこでコンテナクエリを活用するか、またどこで従来のメディアクエリを使い続けるかを慎重に判断する必要があります。
5. 一部のレイアウトには不向き
コンテナクエリは特定のコンテナサイズに応じてスタイルを変更できる点で便利ですが、すべてのレイアウトに適しているわけではありません。
例えば、ページ全体のレイアウトや、複数の異なるコンテナが密接に連携する場合には、メディアクエリの方が効率的でわかりやすいこともあります。
コンテナクエリが最適なシナリオと、そうでない場合の使い分けが求められます。
これらのデメリットや制限点を理解しつつ、コンテナクエリを使用することで、レスポンシブデザインにおいてより細かな調整や柔軟性を持たせることが可能になります。
デザインに応じて適切な技術を選択し、ベストなユーザー体験を提供しましょう。
まとめと次のステップ
ここまでお疲れさまでした。最後に、要点と次の一歩を整理しておきます。
コンテナクエリ（@container）は、画面全体ではなく「部品が入っている箱」を基準にできることで、これまでのレスポンシブデザインの考え方を一段広げてくれます。特定のモジュールのサイズに応じてデザインを変えられるので、より柔軟で精細なレイアウトが組めるようになります。
ただ、ブラウザ対応やパフォーマンスへの影響といった制約もあるので、そこを理解したうえで、必要なところから少しずつ使っていくのがおすすめです。
次の一歩としては、まず小さく試すのがいいと思います。基本の書き方に慣れたら、カードやフォームなど、この記事で挙げたユースケースを1つだけ自分のサイトで再現してみる。それだけで、感覚がぐっとつかめます。
ここで個人的に思うのは、新しいCSSを覚えること自体が目的ではない、ということです。大事なのは、「自分のサイトのどの部品が、どこで形を変えたいのか」を一度ちゃんと見てみること。手を動かしながら、自分のコードのつまずきポイントを観測してみる。そこから、次に直す一手が自然と見えてきます。コンテナクエリは、そのための道具のひとつです。
この記事は「モダンCSS完全ガイド」シリーズの一部です。
→ シリーズ全体を見る
あわせて読みたい
📚 モダンCSSの全体像は モダンCSS完全ガイド──設計からデザインシステムまで でシリーズ全14記事を体系的に整理しています。
Git/Claude Code 使い込んでる人ほど、止まりがちです。
「もっと勉強しなきゃ」「もっと作らなきゃ」――Claude Code, Cursor, GitLens を試すほど、知識は増えるのに、自分が前に進んでる感覚は薄れていく。
個人開発8本、月収2,000円。Web制作17年のクリエイターが、AI と「作る」「届ける」を honest に実験している過程をメルマガで公開しています。
登録特典:「AI時代に取り残されないための構造整理シート」（PDF 12p / 5ステップ）― スキル棚卸し → AI との組み方 → 自分のポジション設計。
