CSS Container Queries (@container): 2026年にコンポーネント対応CSS

およそ10年間、レスポンシブウェブデザインはメディアクエリ（@media）のみに依存してきました。当時としては画期的でしたが、コンポーネント駆動型アーキテクチャ（React、Vue、Web Components）の時代において、メディアクエリには根本的な欠陥があります。それは、ビューポートのことしか知らないという点です。

再利用可能な<Card>コンポーネントを構築する際、それが広いメインコンテンツ領域に配置されても、狭いサイドバーに押し込められても、見栄えが良いようにしたいものです。メディアクエリを使用すると、カードは実際の親コンテナのサイズではなく、ブラウザウィンドウのサイズにしか反応できません。このため、開発者は配置に基づいてスタイルを手動で調整するために、複雑なCSSアーキテクチャ（BEMモディファイア：.card--sidebarなど）を記述せざるを得ませんでした。

そこで登場するのがCSSコンテナクエリ（@container）です。2026年には、すべてのモダンなレンダリングエンジンでブラウザのユニバーサルサポートが実現し、コンテナクエリによってコンポーネントは親コンテナのサイズを直接クエリし、それに応じて自身を調整できるようになります。

インタラクティブなライブデモ：自己適応型カード

下のコンテナ幅スライダーをドラッグしてみてください。親コンテナが420pxを超えるとすぐに、カードが積み重ねられた垂直レイアウトから水平メディアレイアウトに自動的に変化することに注目してください。これは、実際の画面幅やブラウザ幅とは完全に独立しています！

コンテナクエリの仕組み

実装には、次の2つの簡単なステップが含まれます。

1. container-typeを介して要素をコンテナとして定義します。
2. @containerを介して、子要素がそのコンテナをクエリできるようにします。

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

コンテインメント境界を確立するには、ラッパー要素にcontainer-typeプロパティを適用します。

.card-grid {
  /* This element is now a queryable container */
  container-type: inline-size;
  container-name: card-wrapper; /* Optional name identifier */
}

• inline-size：書き込みモード軸に沿った幅をクエリします（最も一般的）。
• size：幅と高さの両方の寸法をクエリします。
• normal：デフォルトの状態（コンテナではない）。

ショートハンドも使用できます：container: card-wrapper / inline-size;

コンテナクエリ単位（cqi、cqw、cqh）

ビューポート単位がvwとvhを提供したように、コンテナクエリはコンテナの計算されたボックスサイズに直接関連付けられた相対単位を導入します。

• cqi：クエリコンテナのインラインサイズ（通常は幅）の1%。
• cqb：クエリコンテナのブロックサイズ（通常は高さ）の1%。
• cqmin / cqmax：cqiとcqbの小さい方または大きい方の値。

これらの単位は、あらゆるサイドバーやウィジェット内でスムーズにスケーリングする流動的なタイポグラフィと間隔を可能にします。

ライブ流動タイポグラフィデモ：

実世界の例：ユニバーサルニュースレターコンポーネント

次の3つの異なる場所に配置したいニュースレター登録ウィジェットを想像してみてください。

1. 狭いブログサイドバー内（幅約280px）
2. ブログ投稿本文内のインライン（幅約500px）
3. サイトフッター全体にわたる（幅約900px）

メディアクエリを使用すると、.newsletter--sidebarや.newsletter--footerのような個別のクラスが必要になります。コンテナクエリを使用すると、コンポーネントは独自のレイアウト遷移を内部で処理します。

こちらもおすすめ

• CSSGridとFlexbox：インタラクティブな視覚的決定ガイド（2026年版）
• TailwindCSSv4:新機能と移行方法
• 2026年のCSS Glassmorphism: GPU Compositing、backdrop-filter、Tailwindレシピ
• Tailwindのデフォルトの代わりに実際に使っているカラーパレット

知識を確認する（インタラクティブクイズ）

よくある質問

設計・運用の要点と今後のステップ

コンテナクエリは、FlexboxとCSS Grid以来、CSSにおける最大のパラダイムシフトを表しています。レスポンシブロジックをグローバルビューポートからローカルコンポーネント境界に移行することで、真にモジュール化されたプラグアンドプレイのUIデザインシステムを構築できます。