【モダンCSS入門 第2回】コンテナクエリ完全入門 — 親要素の幅でレスポンシブする新常識

「同じカードコンポーネントなのに、サイドバーに置くと崩れる…」

レスポンシブデザインを書いていて、必ずぶつかるこの悩み。これまで CSS のメディアクエリは 「画面(ビューポート)の幅」 しか見られず、コンポーネントが置かれた 「コンテナの幅」 には反応できませんでした。

それを解決するのが CSS コンテナクエリ(@container) です。置き場所のサイズに応じてコンポーネントが自分の見た目を切り替える、本物の「コンポーネント駆動レスポンシブ」が実現できます。

この記事では、コンテナクエリの基本から、実プロジェクトですぐ使える設計パターンまでを解説します。

この記事のゴール

コンテナクエリで container-type と @container を使い分け、同じコンポーネントを置き場所ごとに自然に変化させる具体的な書き方を身につけます。

メディアクエリの何が困るのか

これまでのメディアクエリは「画面幅」基準でした。

/* ❌ 画面幅でしか判定できない */
@media (min-width: 640px) {
  .card { display: grid; grid-template-columns: 120px 1fr; }
}

このカードを 「画面幅640px以上」 ではなく、「サイドバー(幅280px)に置かれているとき」 に1カラム表示にしたい、というのは従来不可能でした。

カードはどこに置かれても見た目を変えたいのに、CSS には「自分が置かれた場所」を知る術がなかったのです。

コンテナクエリの基本

コンテナクエリは、2段階で使います。

1. 「コンテナ」として宣言したい要素に container-type を指定
2. その中の要素には @container で コンテナ幅に応じたスタイル を書く

<div class="card-wrapper">
  <div class="card">
    <img src="..." alt="..." />
    <h3>カードのタイトル</h3>
    <p>説明文…</p>
  </div>
</div>

/* 1. このラッパーを「コンテナ」として宣言 */
.card-wrapper {
  container-type: inline-size;
}

/* 2. コンテナ幅が 480px 以上のときだけ横並びに */
@container (min-width: 480px) {
  .card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
  }
}

ポイントは container-type: inline-size。これで「横方向のサイズ(=幅)」を監視対象にする宣言になります。

実用パターン1: サイドバーと本文で同じカードを使う

コンテナクエリの真価が出る、もっとも分かりやすい例です。

<main class="layout">
  <section class="main-content">
    <article class="card">…</article>   <!-- 広いので横並び表示 -->
  </section>
  <aside class="sidebar">
    <article class="card">…</article>   <!-- 狭いので縦並び表示 -->
  </aside>
</main>

.main-content,
.sidebar {
  container-type: inline-size;
}

.card {
  display: flex;
  flex-direction: column;  /* 狭いときは縦並び(デフォルト) */
}

@container (min-width: 400px) {
  .card {
    flex-direction: row;   /* 広いコンテナでは横並び */
    align-items: center;
  }
}

HTMLもCSSも1セットで済むのがミソです。コンポーネントを再利用するたびに「ここはsidebar用」「ここはmain用」と分ける必要がなくなります。

実用パターン2: コンテナに名前をつけて狙い撃ち

複数のコンテナがネストしている場面では、container-name で どのコンテナを基準にするかを指定できます。

.page-grid {
  container-type: inline-size;
  container-name: layout;     /* このコンテナに名前を付与 */
}

.card-list {
  container-type: inline-size;
  container-name: cards;
}

/* layout コンテナの幅にだけ反応 */
@container layout (min-width: 768px) {
  .header { padding: 32px; }
}

/* cards コンテナの幅にだけ反応 */
@container cards (min-width: 320px) {
  .card { border-radius: 12px; }
}

ネストしたレイアウトでも 意図しない上位コンテナに反応してしまう事故 を防げます。

実用パターン3: コンテナクエリ単位 (cqi / cqb)

vw や vh のコンテナクエリ版もあります。

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

.card-title {
  /* コンテナ幅に応じて文字サイズが伸縮する */
  font-size: clamp(1rem, 5cqi, 1.75rem);
}

clamp() と組み合わせれば、コンテナのサイズに対して滑らかにスケールする文字 が、メディアクエリのブレークポイントなしで実現できます。

ブラウザ対応

コンテナクエリは 2023年2月にすべての主要ブラウザでサポートされ、Baseline 2023 に到達しています。2026年現在、安心して本番利用できます。

不安な場合は @supports でフォールバックを書けます。

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

  @container (min-width: 480px) {
    .card { display: grid; }
  }
}

つまずきやすいポイント

⚠ ここは要注意

container-type: inline-size を指定した要素は 幅を子要素から決められなくなります(コンテナ自身は親基準)。意図せず横幅が広がる事故に注意。

• コンテナ自身は対象外: @container のスタイルは コンテナの内側の要素にのみ 効きます。コンテナ自体には効きません
• コンテナの幅は親が決める: container-type: inline-size の要素は子の幅でフレキシブルに伸びなくなります(ブロックレベル要素として親幅を占有する形が基本)
• size 指定は重い: container-type: size(幅も高さも見る)は循環参照の懸念から避けるのが無難。基本は inline-size
• メディアクエリの完全置き換えではない: 全体レイアウト(サイドバーを出すか/隠すか)はメディアクエリ、コンポーネント内部の振る舞いはコンテナクエリ、と 役割分担 するのが鉄則

メディアクエリとの使い分け

両者は 競合するものではなく、補完しあう関係 です。

まとめ

CSS コンテナクエリを使うと、以下が実現できます。

• ✅ コンポーネントが 置き場所のサイズ に応じて変化する
• ✅ サイドバー用・本文用と HTMLを分ける必要がなくなる
• ✅ cqi 単位で 滑らかにスケールする文字 が書ける
• ✅ メディアクエリは「全体レイアウト」、コンテナクエリは「コンポーネント内部」と役割分担

特に デザインシステム や コンポーネントライブラリ を作るときは、コンテナクエリ前提で設計するだけで「再利用したら崩れる」事故が激減します。

💡 次回は :is() と :where() を取り上げます。重複セレクタを1つにまとめる強力な擬似クラスで、特異性(specificity)の落とし穴も含めて解説します。