Container Queriesを使った柔軟なレイアウト調整術【CSSだけで要素に応じたデザイン制御】

7月 18, 2025 7月 18, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
「あれ、このカードだけレイアウト崩れてる…？」

このセリフ、Web制作をしていると1度や2度はつぶやいたことがあるはずです。
全体の画面幅は十分あるのに、特定の要素だけが不自然に詰まる・崩れる。
それはきっと、Media Queriesだけでは補いきれないレイアウトの柔軟性が必要な場面なのです。

そこで登場するのが、今日ご紹介するContainer Queries（コンテナクエリ）。
待望のCSS機能として、今まさにデザイン設計の主役に躍り出ています。

「コンテナ」って何？まずは考え方を整理しよう

Media Queriesとの決定的な違い

まず知っておくべきなのは、Media Queriesが「ビューポート（画面全体）」に依存しているという点。
例えば「画面幅が768px以下なら2段組 → 1段組にしよう」といった指定は簡単にできますが、 「このカードだけ狭くなったから1段にしたい」といった制御はできません。

Media Queries = 画面（viewport）基準のスタイル切り替え
Container Queries = 親要素（コンテナ）の幅や高さ基準でスタイル変更

Container Queriesはどんなときに便利？

サイドバーに配置したカードの表示切替（狭ければ縦並び）
メインエリアとサイドでレイアウトが変わる同一コンポーネント
再利用性の高いUI部品のレスポンシブ対応

実装編：CSSだけで柔軟なレイアウト切替をする方法

1. 親要素に「container-type」を指定

 .card {
 container-type: inline-size; 
}

container-typeの役割

コンテナクエリを有効にするには、親要素にcontainer-typeを指定します。
通常はinline-size（横幅のみ判定）で十分です。全体サイズで判断したい場合はsizeも使えます。

2. 子要素に対して@containerで条件分岐

@container (min-width: 480px) {
 .card { 
flex-direction: row;
 } 
}

親にcontainer-type: inline-size を設定
@container (条件) { ... } でスタイルを分岐
カードやボックスごとのレイアウトが柔軟に制御可能

デモ：カードのレイアウト切り替え

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

さらに知っておきたいTips

container-name を指定すれば複数クエリの使い分けも可能
対応ブラウザは2023年以降ほぼ主要ブラウザでOK
テスト時は Chrome DevTools の「コンテナクエリ」機能が便利

CSS設計が変わる

コンテナクエリを導入すると、従来の「ページ単位」の設計から「パーツ単位」の柔軟なUI制御が可能になります。
UIライブラリやデザインシステムとの相性も非常に良く、今後のCSS設計思想の主軸になっていくことは間違いありません。

まとめ

画面ではなく“状況”に応じて変化するCSSへ
Container Queriesは、単なる新機能ではなく、CSSの概念そのものを大きく進化させる存在です。
これからのWebは、画面サイズだけでなく「文脈」や「レイアウトの状況」によって動的に見せ方を変えていく時代。
その第一歩として、あなたのCSSにぜひコンテナクエリを取り入れてみてください。