【CSS新時代】container-queryで親要素サイズに応じたデザインを実現！レスポンシブの新技術

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

最近、CSSに新たな風を吹き込む機能が登場しました。
それが container-query（コンテナクエリ） です。
これまでのレスポンシブデザインは「画面サイズ」つまり ビューポートサイズ に応じてデザインを変える手法が主流でした。
しかしながら、時代は変わり、WebコンポーネントやUI部品の再利用が進む今、画面サイズではなく 「親要素のサイズ」 に応じて見た目を変えたいというニーズが増えてきています。

このニーズに応えてくれるのが container-query です。
この記事では、container-queryの基本的な使い方から、実際の使用例まで詳しくご紹介します。
これからのレスポンシブデザインを支える新しい考え方「コンテナファースト」への第一歩を踏み出してみましょう。

container-queryとは？

container-queryは、親要素のサイズを基準にしてスタイルを変更するCSSの機能です。
今まではメディアクエリ（@media）でビューポートに応じた調整をしていましたが、container-queryを使えば、特定の要素のサイズによってデザインを調整できます。

たとえば、同じカードコンポーネントを2カラムと1カラムで表示したときに、サイズに応じて文字サイズや画像サイズを変えることができます。

container-queryの基本構文

使い方はとてもシンプルです。
以下のように、まずは親要素に対して container-type を設定し、子要素でクエリを定義します。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

それぞれの役割は以下の通りです。

container-queryを使うメリット

container-queryをサポートしているブラウザ

2025年5月時点で、主要なモダンブラウザ（Chrome、Edge、Firefox、Safari）はcontainer-queryをすでにサポートしています。
古いブラウザでは利用できないため、ユーザーの使用環境を考慮した導入が必要です。

よくある質問

Q：container-queryとmedia-queryの使い分けは？

A：全体のレイアウトに関わるものは media-query。 コンポーネント単位の調整にはcontainer-queryが最適です。

Q：IEなどの非対応ブラウザは？

A：IEなどでは動作しません。 ポリフィルも限定的なので、対象ユーザー層に応じた判断が必要です。

まとめ

container-queryはこれからのCSSにおけるレスポンシブ設計を大きく変える可能性を秘めた技術です。
コンポーネントの再利用性、保守性を高めるためにも、積極的に活用していきましょう。

satokotadesignキャンペーン実施中！