CSS Container Queries 実践ガイド ― コンポーネント単位で考えるレスポンシブ設計

メディアクエリだけでは届かない場所がある

「このカードコンポーネント、サイドバーに置くと窮屈で崩れるんですよ」——現場でこういう相談、よくあります。同じカードでも、ヒーロー直下のメイン領域では横並び、サイドバーでは縦積み、と振る舞いを変えたい。けれどメディアクエリは画面幅しか見てくれません。「画面が広いのに、置かれている枠は狭い」というギャップを埋める手段がなかった。

ここで登場するのが @container、いわゆるコンテナクエリです。判断基準が「画面幅」から「親コンテナの幅」に変わる、それだけのこと。でもこの一歩が、レスポンシブ設計の考え方を根っこから変えます。コンポーネントが置き場所を意識して、自分で形を変える——そんな世界が、もう普通のCSSで書けるようになりました。

最小構成：containerを宣言して、@containerで分岐する

コンテナクエリの使い方は、慣れるとシンプルです。まず親要素を「コンテナ」に指定して、そのあと子要素のスタイルを @container で書き分けるだけ。順序はこの2ステップです。

/* 1. 親をコンテナとして宣言 */
.card {
  container-type: inline-size;
  container-name: card;
}

/* 2. コンテナの幅で子のスタイルを切り替える */
@container card (min-width: 480px) {
  .card__inner {
    flex-direction: row;
  }
}

container-type: inline-size は「横方向のサイズを基準にコンテナとして扱う」という宣言。container-name は省略してもいいのですが、複数のコンテナがネストする現場では名前を付けておくほうが事故が減ります。

このデモがコンテナクエリの本質です。ブラウザ全体のサイズは変えていないのに、カード自身の置かれた枠の幅でレイアウトが切り替わる。「コンポーネントが置き場所を理解する」という感覚、つかめてきたのではないでしょうか。

現場でよくあるパターン：同じカードを違う列数で並べる

実務で一番ありがたみを感じるのは、グリッド内に並んだカードたちです。1列のときと2列のときで、各カードの中身の見せ方を変えたい——これがメディアクエリだと、グリッドの列数とカードの内側のスタイルを別々に管理することになって、意外と破綻しがちでした。

/* 画面幅で全部判定するので、サイドバー内に置かれると破綻する */
@media (min-width: 768px) {
  .card__inner { flex-direction: row; }
}

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

@container (min-width: 480px) {
  .card__inner { flex-direction: row; }
  .card__title { font-size: 22px; }
}

大事なのは「カード側のCSSは1つだけ」という点です。ページ側がどう並べようと、カード自身が自分の幅を見て判断してくれる。再利用しやすいコンポーネントを書く、というモダンなフロントエンドの考え方とぴったり噛み合います。

応用：cqi 単位でフォントサイズも追従させる

コンテナクエリには、もう一つ嬉しい機能があります。cqi（コンテナの inline サイズの1%）という単位です。これを使うと、コンテナの幅に応じてフォントサイズなどを滑らかに変化させられます。vw の「コンテナ版」と思えばイメージしやすいはず。

.box {
  container-type: inline-size;
}
.box__title {
  /* 最小18px、コンテナ幅の6%、最大36px の範囲で滑らかに */
  font-size: clamp(18px, 6cqi, 36px);
}

関連する単位として、cqw（width）、cqh（height）、cqb（block）、cqmin／cqmax もあります。実務でよく使うのは cqi ひとつ、というのが正直なところ。横書きサイトなら cqi = cqw なので、まずはこれだけ覚えれば十分です。

導入のコツとブラウザ対応

コンテナクエリは2023年に主要ブラウザがそろって対応しました。今ではChrome、Safari、Firefox、Edgeすべての安定版で問題なく動きます。古いブラウザを切り捨てない案件でも、@supports を使えば段階的に導入できます。

/* デフォルトは縦積み（コンテナクエリ非対応でも崩れない） */
.card__inner { flex-direction: column; }

@supports (container-type: inline-size) {
  .card { container-type: inline-size; }

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

もう一つ、現場で大事なのが「どの要素をコンテナにするか」の設計です。むやみに全部のコンポーネントに container-type を付けると、レイアウトの基準が増えすぎて逆にカオスになります。再利用するコンポーネントの「最も外側のラッパー」だけをコンテナにする、というルールで運用するとシンプルに保てます。

あとはネーミング。チームで書くなら container-name を付けて、たとえば card、media、sidebar のように役割で命名しておくと、あとから追跡しやすくなります。匿名コンテナでも動きますが、ネストしたときに「どのコンテナを見ているのか」が曖昧になって事故りやすいので、名前は付ける派をおすすめします。