記事のゴール

  • コンテナサイズクエリの基本的な使い方を理解する
  • 記事を読めば、CSS に慣れている方なら、コンテナサイズクエリをすぐに使えるようになる。

目次

コンテナサイズクエリとは

CSS コンテナサイズクエリ（一般には「コンテナクエリ」とも呼ばれますが、本記事ではサイズクエリにフォーカスします）は、
ビューポートのサイズではなく、親コンテナのサイズに基づいて要素のスタイルを変更することができる CSS の機能です。
これにより、より再利用性が高く、自己完結したコンポーネントの作成が可能になります。

従来のレスポンシブ対応では、主にメディアクエリが使用されていました。メディアクエリはページ全体のレイアウト変更には適していましたが、
コンポーネントが配置される場所によってスタイルを調整することが困難でした。コンテナサイズクエリは、この問題を解決し、
コンポーネントが自身のコンテキストに応じてスタイルを適応させることを可能にします。

コンテナサイズクエリの基本的な使い方

コンテナサイズクエリの使用は、2 つのステップで構成されます。

1. コンテナコンテキストの定義

まず、container-type プロパティを使用して、要素をコンテナとして定義します。一般的には、コンテナの幅に基づいてスタイルを適用するため、inline-size を使用します。

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

2. @container ルールによるスタイルの適用

コンテナを定義したら、@container ルールを使用して、コンテナのサイズに基づいて子孫要素のスタイルを適用します。構文はメディアクエリと似ています。

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

この例では、.card-container の幅が 400px 以上の場合に、.card 要素のレイアウトが変更されます。

コンテナに名前を付ける

container-name プロパティを使用すると、コンテナに名前を付けることができます。これにより、ネストされたコンテナの中から特定のコンテナを対象にすることができます。

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

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

container ショートハンドプロパティを使用すると、container-type と container-name を一度に設定できます。

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

コンテナサイズクエリの応用例

  • 再利用可能なコンポーネント: カード、ウィジェット、ナビゲーションメニューなど、さまざまなレイアウトでシームレスに適応するコンポーネントを作成できます。
  • メンテナンス性の向上: コンポーネントのレスポンシブ対応ロジックをコンポーネント自体にカプセル化することで、グローバルなスタイルシートの複雑さを軽減します。
  • 柔軟なレイアウト: 利用可能なスペースに応じて、コンポーネントのレイアウトを水平または垂直に簡単に切り替えることができます。

コンテナサイズクエリの注意点

  • 無限ループの可能性: コンテナのサイズ変更が、子要素のサイズ変更を引き起こし、それが再びコンテナのサイズ変更を引き起こすという無限ループが発生する可能性があります。これを避けるため、コンテナサイズクエリは通常、インラインサイズ（幅）のみをクエリします。高さを含むサイズ（size）をクエリする場合は注意が必要です。
  • パフォーマンス: container-type を設定すると、ブラウザは常に要素のサイズを監視する必要があるため、パフォーマンスにわずかな影響を与える可能性があります。ただし、ほとんどのユースケースでは、この影響は無視できる程度です。この点については、さらなる検証が必要です。

コンテナサイズクエリのブラウザ対応状況

2025 年現在、CSS コンテナサイズクエリは主要なモダンブラウザで広くサポートされています。詳細は MDN を参照してください（参照日時: 2025-08-09 15:14 JST）。

コンテナサイズクエリとメディアクエリの使い分け

コンテナサイズクエリはメディアクエリを置き換えるものではなく、補完するツールです。

  • メディアクエリを使用する場合: ページ全体のレイアウト変更（例：モバイル、タブレット、デスクトップでのグリッドやナビゲーションの調整）
  • コンテナサイズクエリを使用する場合: 個々のコンポーネントのスタイリング（例：コンポーネントが配置されるコンテキストやスペースに応じたスタイルの調整）

多くの場合、マクロなレイアウトにはメディアクエリを、コンポーネント内のミクロなレイアウトにはコンテナサイズクエリを使用するのが最も効果的です。

コンテナサイズクエリを〇〇上で使用する

Sass 上で使用する

Sass でコンテナサイズクエリを使用する場合、特別な設定は必要ありません。CSS と同じように記述できます。

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

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

TailwindCSS 上で使用する

Tailwind CSS v3.2.0 以降では、@tailwindcss/container-queries プラグインを tailwind.config.js ファイルに追加することで、コンテナサイズクエリを使用できます。

// tailwind.config.js
module.exports = {
  // ...
  plugins: [require("@tailwindcss/container-queries")],
};

これにより、@ プレフィックスを使用して、コンテナサイズクエリのバリアントを適用できます。

<div class="container">
 <div class="... @[400px]:flex">
   <!-- ... -->
 </div>
</div>

この設定が現在のプロジェクトで有効かどうかは、tailwind.config.js を確認する必要があります。

まとめ

CSS コンテナサイズクエリは、レスポンシブデザインに新たな可能性をもたらす強力な機能です。
コンポーネントベースのアプローチと組み合わせることで、よりモジュール化され、再利用性の高い UI を構築できます。
主要なブラウザでサポートが広まっている今、積極的に活用していく価値があるでしょう。

参考リンク