レスポンシブデザインで必須となるメディアクエリ（Media Query）とコンテナクエリ（Container Query）。どちらを採用すべきなのか迷うことがありましたので、目的や使用シーンを整理しました。

メディアクエリ（Media Query）とは？

メディアクエリは、主にビューポート（viewport）のサイズに基づいてスタイルを変更するために使用されます。デバイスの画面幅や高さに応じて、異なるCSSスタイルを適用することができます。

ブレークポイントを設定することで、ブラウザの画面幅のピクセル数や、デバイスの向き（縦向き、横向き）などでCSSスタイルを切り替えることが出来ます。

@media screen and (max-width: 768px) {
 body {
  color: red;
 }
}

上記では、ブラウザの表示領域が768px以下だったら、文字色が赤くなります。

コンテナクエリ（Container Query） とは？

コンテナクエリは、親要素（コンテナ）のサイズに基づいてスタイルを変更するための技術です。特定の要素がどのようなサイズに収まるかによって、子要素のスタイルを動的に変更することができます。

<div class="parent">
 <p class="child">子供要素</p>
</div>

コンテナクエリを実現するには必ず親となる要素と、スタイルを適用する子要素が必要です。親要素のセレクタにはcontainer-typeプロパティを指定し、値にはinline-size、sizeのいずれかの値を指定をします。

• normal : デフォルト値（解除）
• inline-size : インライン軸（横幅）
• size : インライン軸とブロック軸（縦横幅）

.parent {
 container-type: inline-size;
}
@container (max-width: 480px) {
 .child {
  color: red;
 }
}

子要素のセレクタには幅指定とスタイルを指定します。上記のコードでは親要素の幅が480px以下の場合、子要素の文字色が赤くなります。

コンテナクエリとメディアクエリの使いどころ

メディアクエリ

ページ全体のレイアウト制御に使うことが多いです。例えば画面幅によってがらっとレイアウトが変わるような制御や、スマホやタブレットの向きでレイアウトを変更する場合は、メディアクエリが最適です。

コンテナクエリ

特定の要素のサイズ変更に応じて細かいデザイン制御したい場合は、コンテナクエリが最適です。例えばナビゲーションやフォームなど、デザインパーツやコンポーネント単位で細かいデザインを制御したい要望ではコンテナクエリが最適です。

• CSS Container Query Units

コンテナクエリのブラウザの対応状況は、Chromeは105以降、Safariは16以降、Firefoxは110以降で利用でき2025年1月現在の最新ブラウザでは利用することが可能ですので、今後積極的に使うケースは多くなると思います。

おしまい♥