コンテナクエリ（Container Queries）が来てもメディアクエリは捨てない。モダンCSSで両者を『共存』させるべき理由とは？
2025.12.23
最近のブラウザの進化はとっても凄くて、例えばword-break:anywhereやword-break:auto-phraseなど、とても便利なプロパティが増えてきました。
今回はそんな新しい技術である、コンテナクエリ（@container）について自分なりの感想です。
メディアクエリとコンテナクエリの根本的な違い
メディアクエリ：ビューポート（画面幅）を監視する。
例えば画面サイズにより、2カラム、3カラムといった大枠を決める時にとても便利。
コンテナクエリ：親要素の幅を監視する。
例えば1つのバナーをメインカラムとサイドバーに設置する場合、どこに配置されても適切な見え方にする。
コンテナクエリは結構面倒
再利用するコンポーネントを扱う場合は、コンテナクエリはとても便利。
だけど、単純にcssの行数がすごく増えて、見通しが悪くなったり、どの要素をcontainerの親要素にするか逆算して作らないといけなかったりする。
なぜコンテナクエリだけではダメなのか。
コンテナクエリだけではページ全体のレイアウトができなかったり、ダークモードや印刷用の設定、フォントサイズなどの一括設定ができない。
なぜメディアクエリだけだとダメなのか。
メディアクエリだけだと、コンポーネントの再利用ができない。
要素の再利用の際に条件が増えたり例外処理が増えたりと、DOMの構造にどうしても縛られてしまう。
まとめ
レスポンシブなコンポーネントには、メディアクエリとコンテナクエリの両方を使うことが、現代のベストプラクティス。
だけれども、コンテナクエリを使う場合には事前の準備が多く必要になり、コード量も増えるケースも多い。
この文章を書いた人
学生時代よりウェブ技術に興味を持ち、独学でウェブ制作を開始。当時からPerl、CSSなどの技術を用いたサイト構築に取り組んでいました。 その後、営業会社にて法人営業を経験し、ウェブ開発・運営に本格復帰して以降は、WordPressを活用した多様なサイト開発、及びECサイトの制作・運用に従事。 ウェブ戦略の立案から実行、効果測定までを一貫して担当しています。