CSS Container Queries完全ガイド2025 - レスポンシブデザインの新時代

レスポンシブデザインに革命をもたらす CSS Container Queries。従来のメディアクエリがビューポートサイズに依存していたのに対し、Container Queries は親コンテナのサイズに基づいてスタイルを適用できます。2025 年、ついに全主要ブラウザでのサポートが完了し、本格的な実用段階に入りました。本記事では、Container Queries の基本から実践的な活用方法まで、包括的に解説します。

目次

1. Container Queries とは
2. 基本的な使い方
3. コンテナタイプと命名
4. コンテナユニットの活用
5. 実践的なデザインパターン
6. メディアクエリとの併用戦略
7. パフォーマンス考慮事項
8. ブラウザサポートと対策
9. 実装例：レスポンシブカードコンポーネント
10. まとめとベストプラクティス

Container Queriesとは

Container Queries は、要素の親コンテナのサイズや状態に基づいてスタイルを適用できる CSS 機能です。これにより、コンポーネントレベルでのレスポンシブデザインが可能になります。

メディアクエリとの違い

動作の仕組み

基本的な使い方

シンプルな実装例

/* コンテナの設定 */
.card-container {
  container-type: inline-size;
  /* または container: card / inline-size; で名前付きコンテナ */
}

/* コンテナクエリの使用 */
@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
  
  .card-image {
    width: 150px;
  }
}

@container (min-width: 700px) {
  .card {
    padding: 2rem;
    gap: 2rem;
  }
  
  .card-image {
    width: 200px;
  }
}

HTML構造

<div class="card-container">
  <article class="card">
    <img class="card-image" src="image.jpg" alt="カード画像">
    <div class="card-content">
      <h2 class="card-title">タイトル</h2>
      <p class="card-description">説明文...</p>
    </div>
  </article>
</div>

コンテナタイプと命名

コンテナタイプの種類

名前付きコンテナ

/* 名前付きコンテナの定義 */
.main-content {
  container: main / inline-size;
}

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

/* 特定のコンテナをターゲット */
@container main (min-width: 600px) {
  .article {
    columns: 2;
  }
}

@container sidebar (max-width: 300px) {
  .widget {
    font-size: 0.875rem;
  }
}

コンテナユニットの活用

Container Queries では、コンテナのサイズに相対的な新しい単位が使用できます：

実装例

.responsive-card {
  /* コンテナサイズに基づくパディング */
  padding: 4cqi;
  
  /* コンテナサイズに基づくフォントサイズ */
  font-size: clamp(1rem, 4cqi, 1.5rem);
}

.card-title {
  /* コンテナ幅の5%、最小16px、最大32px */
  font-size: clamp(16px, 5cqw, 32px);
  
  /* コンテナサイズに基づくマージン */
  margin-bottom: 2cqi;
}

.card-image {
  /* アスペクト比を保ちながらコンテナに合わせる */
  width: 100%;
  height: 50cqh;
  object-fit: cover;
}

実践的なデザインパターン

パターン1: レスポンシブカードグリッド

/* グリッドコンテナ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  container-type: inline-size;
}

/* 個別のカードコンテナ */
.card-wrapper {
  container-type: inline-size;
}

/* カードのレスポンシブスタイル */
.card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 狭いコンテナ: 縦積みレイアウト */
@container (max-width: 400px) {
  .card {
    display: flex;
    flex-direction: column;
  }
  
  .card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  .card-content {
    padding: 1rem;
  }
  
  .card-title {
    font-size: 1.25rem;
  }
}

/* 中間サイズ: 横並びコンパクト */
@container (min-width: 401px) and (max-width: 600px) {
  .card {
    display: flex;
    flex-direction: row;
    height: 150px;
  }
  
  .card-image {
    width: 150px;
    height: 100%;
    object-fit: cover;
  }
  
  .card-content {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .card-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }
  
  .card-description {
    font-size: 0.875rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* 広いコンテナ: フルレイアウト */
@container (min-width: 601px) {
  .card {
    display: flex;
    flex-direction: row;
    height: 200px;
  }
  
  .card-image {
    width: 250px;
    height: 100%;
    object-fit: cover;
  }
  
  .card-content {
    flex: 1;
    padding: 1.5rem;
  }
  
  .card-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .card-description {
    font-size: 1rem;
    line-height: 1.6;
  }
  
  .card-meta {
    margin-top: auto;
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: #666;
  }
}

<div class="card-grid">
  <div class="card-wrapper">
    <article class="card">
      <img class="card-image" 
           src="/api/placeholder/400/300" 
           alt="記事のサムネイル">
      <div class="card-content">
        <h3 class="card-title">
          レスポンシブデザインの新時代
        </h3>
        <p class="card-description">
          Container Queriesを使用することで、
          コンポーネント単位での柔軟な
          レスポンシブデザインが可能になります。
        </p>
        <div class="card-meta">
          <span class="card-date">2025.06.20</span>
          <span class="card-category">CSS</span>
        </div>
      </div>
    </article>
  </div>
  <!-- 他のカードも同様 -->
</div>

パターン2: アダプティブナビゲーション

.nav-container {
  container-type: inline-size;
  background: #333;
  color: white;
}

/* モバイルサイズ: ハンバーガーメニュー */
@container (max-width: 600px) {
  .nav-menu {
    display: none;
  }
  
  .nav-toggle {
    display: block;
  }
  
  .nav-menu.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #333;
  }
}

/* タブレットサイズ: 水平メニュー */
@container (min-width: 601px) and (max-width: 900px) {
  .nav-toggle {
    display: none;
  }
  
  .nav-menu {
    display: flex;
    gap: 1rem;
  }
  
  .nav-item {
    padding: 0.5rem 1rem;
  }
  
  .nav-submenu {
    display: none;
  }
}

/* デスクトップサイズ: フルメニュー */
@container (min-width: 901px) {
  .nav-toggle {
    display: none;
  }
  
  .nav-menu {
    display: flex;
    gap: 2rem;
  }
  
  .nav-item {
    padding: 1rem 1.5rem;
    position: relative;
  }
  
  .nav-item:hover .nav-submenu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

パターン3: フレキシブルフォームレイアウト

.form-container {
  container-type: inline-size;
  max-width: 800px;
  margin: 0 auto;
}

/* 狭い: 単一カラム */
@container (max-width: 500px) {
  .form-group {
    margin-bottom: 1rem;
  }
  
  .form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
  }
  
  .form-input {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
  }
  
  .form-row {
    display: block;
  }
}

/* 中間: 2カラムレイアウト */
@container (min-width: 501px) and (max-width: 700px) {
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  
  .form-group.full-width {
    grid-column: 1 / -1;
  }
  
  .form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
  }
  
  .form-input {
    width: 100%;
    padding: 0.625rem;
  }
}

/* 広い: インラインラベル */
@container (min-width: 701px) {
  .form-group {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .form-label {
    text-align: right;
    font-weight: 500;
  }
  
  .form-input {
    padding: 0.75rem 1rem;
  }
  
  .form-row {
    display: contents;
  }
  
  .form-actions {
    grid-column: 2;
    display: flex;
    gap: 1rem;
  }
}

メディアクエリとの併用戦略

併用例

/* グローバルレイアウト: メディアクエリ */
@media (max-width: 768px) {
  .main-layout {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    order: -1;
    margin-bottom: 2rem;
  }
}

@media (min-width: 769px) {
  .main-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
  }
}

/* コンポーネント: コンテナクエリ */
.content-area {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .article-card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

パフォーマンス考慮事項

レイアウト計算の最適化

/* 過度に細かいブレークポイント */
@container (min-width: 300px) { /* ... */ }
@container (min-width: 320px) { /* ... */ }
@container (min-width: 340px) { /* ... */ }
@container (min-width: 360px) { /* ... */ }
@container (min-width: 380px) { /* ... */ }
@container (min-width: 400px) { /* ... */ }

/* 意味のあるブレークポイントのみ */
@container (min-width: 400px) {
  /* コンパクトレイアウト */
}

@container (min-width: 600px) {
  /* 標準レイアウト */
}

@container (min-width: 900px) {
  /* 拡張レイアウト */
}

/* 過度に細かいブレークポイント */
@container (min-width: 300px) { /* ... */ }
@container (min-width: 320px) { /* ... */ }
@container (min-width: 340px) { /* ... */ }
@container (min-width: 360px) { /* ... */ }
@container (min-width: 380px) { /* ... */ }
@container (min-width: 400px) { /* ... */ }

/* 意味のあるブレークポイントのみ */
@container (min-width: 400px) {
  /* コンパクトレイアウト */
}

@container (min-width: 600px) {
  /* 標準レイアウト */
}

@container (min-width: 900px) {
  /* 拡張レイアウト */
}

パフォーマンスのベストプラクティス

1. コンテナの数を最小限に: 必要な要素のみに container-type を設定
2. シンプルなセレクタ: 複雑なセレクタの組み合わせを避ける
3. will-changeの活用: アニメーションを伴う場合は適切に使用
4. containプロパティ: レイアウト計算の最適化

.optimized-container {
  container-type: inline-size;
  contain: layout style;
  will-change: transform;
}

ブラウザサポートと対策

2025年6月時点のサポート状況

フォールバック戦略

/* 基本スタイル（すべてのブラウザで動作） */
.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

/* フィーチャークエリでサポート確認 */
@supports (container-type: inline-size) {
  .card-container {
    container-type: inline-size;
  }
  
  @container (min-width: 400px) {
    .card {
      flex-direction: row;
      padding: 1.5rem;
    }
  }
}

/* JavaScriptでの検出 */

// Container Queriesのサポート確認
function supportsContainerQueries() {
  return CSS.supports('container-type', 'inline-size');
}

if (!supportsContainerQueries()) {
  // ポリフィルの読み込みまたは代替実装
  document.body.classList.add('no-container-queries');
}

実装例：レスポンシブカードコンポーネント

完全な実装例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Queries デモ</title>
  <style>
    /* リセットスタイル */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Noto Sans JP', sans-serif;
      line-height: 1.6;
      color: #333;
      background: #f5f5f5;
      padding: 2rem;
    }
    
    /* グリッドレイアウト */
    .demo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    /* カードコンテナ */
    .product-container {
      container-type: inline-size;
      container-name: product;
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .product-container:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
    }
    
    /* 基本スタイル（最小サイズ） */
    .product-card {
      display: flex;
      flex-direction: column;
    }
    
    .product-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    
    .product-content {
      padding: 1rem;
    }
    
    .product-title {
      font-size: 1.125rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: #1a1a1a;
    }
    
    .product-description {
      font-size: 0.875rem;
      color: #666;
      margin-bottom: 1rem;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .product-price {
      font-size: 1.25rem;
      font-weight: 700;
      color: #0066cc;
      margin-bottom: 1rem;
    }
    
    .product-actions {
      display: flex;
      gap: 0.5rem;
    }
    
    .btn {
      flex: 1;
      padding: 0.5rem 1rem;
      border: none;
      border-radius: 6px;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
      text-decoration: none;
    }
    
    .btn-primary {
      background: #0066cc;
      color: white;
    }
    
    .btn-primary:hover {
      background: #0052a3;
    }
    
    .btn-secondary {
      background: #e5e5e5;
      color: #333;
    }
    
    .btn-secondary:hover {
      background: #d5d5d5;
    }
    
    /* 中サイズコンテナ（400px以上） */
    @container product (min-width: 400px) {
      .product-card {
        flex-direction: row;
        height: 180px;
      }
      
      .product-image {
        width: 180px;
        height: 100%;
      }
      
      .product-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 1.25rem;
      }
      
      .product-description {
        -webkit-line-clamp: 2;
        margin-bottom: auto;
      }
      
      .product-meta {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }
      
      .product-actions {
        max-width: 200px;
      }
    }
    
    /* 大サイズコンテナ（600px以上） */
    @container product (min-width: 600px) {
      .product-card {
        height: 220px;
      }
      
      .product-image {
        width: 220px;
      }
      
      .product-content {
        padding: 1.5rem;
      }
      
      .product-title {
        font-size: 1.375rem;
        margin-bottom: 0.75rem;
      }
      
      .product-description {
        font-size: 1rem;
        -webkit-line-clamp: 3;
      }
      
      .product-price {
        font-size: 1.5rem;
      }
      
      .btn {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
      }
      
      .product-badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        background: #ff6b6b;
        color: white;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 4px;
        margin-bottom: 0.5rem;
      }
    }
    
    /* コンテナユニットを使った相対サイズ */
    @container product (min-width: 400px) {
      .product-title {
        font-size: clamp(1.125rem, 4cqi, 1.5rem);
      }
      
      .product-content {
        padding: clamp(1rem, 3cqi, 2rem);
      }
    }
    
    /* デバッグ用表示 */
    .container-info {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 0.25rem 0.5rem;
      font-size: 0.75rem;
      border-radius: 4px;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <h1 style="text-align: center; margin-bottom: 2rem;">
    Container Queries レスポンシブカード
  </h1>
  
  <div class="demo-grid">
    <!-- カード1 -->
    <div class="product-container">
      <article class="product-card">
        <img class="product-image" 
             src="/api/placeholder/400/300" 
             alt="プロダクト1">
        <div class="product-content">
          <span class="product-badge" style="display: none;">
            NEW
          </span>
          <h2 class="product-title">
            レスポンシブカード商品
          </h2>
          <p class="product-description">
            Container Queriesを使用した柔軟なレイアウト。
            コンテナのサイズに応じて最適な表示形式に
            自動的に切り替わります。
          </p>
          <div class="product-meta">
            <span class="product-price">¥12,800</span>
            <div class="product-actions">
              <button class="btn btn-primary">購入</button>
              <button class="btn btn-secondary">詳細</button>
            </div>
          </div>
        </div>
      </article>
    </div>
    
    <!-- 他のカードも同様に追加 -->
  </div>
  
  <script>
    // Container Queriesのサポートチェック
    if (CSS.supports('container-type', 'inline-size')) {
      console.log('Container Queries is supported!');
      
      // デバッグ情報の表示（開発時のみ）
      const observer = new ResizeObserver(entries => {
        entries.forEach(entry => {
          const info = entry.target.querySelector('.container-info');
          if (info) {
            info.textContent = `${Math.round(entry.contentRect.width)}px`;
          }
        });
      });
      
      document.querySelectorAll('.product-container').forEach(container => {
        const info = document.createElement('div');
        info.className = 'container-info';
        container.style.position = 'relative';
        container.appendChild(info);
        observer.observe(container);
      });
    } else {
      console.warn('Container Queries is not supported');
      document.body.classList.add('no-container-queries');
    }
  </script>
</body>
</html>

デバッグとツール

Chrome DevToolsでのデバッグ

デバッグ用ユーティリティ

/* デバッグ用のビジュアルヒント */
.debug-container {
  position: relative;
  outline: 2px dashed red;
}

.debug-container::before {
  content: attr(data-container-size);
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  color: white;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-family: monospace;
  z-index: 999;
}

// コンテナサイズの動的表示
class ContainerDebugger {
  constructor() {
    this.containers = document.querySelectorAll('[class*="container"]');
    this.init();
  }
  
  init() {
    this.containers.forEach(container => {
      this.addDebugInfo(container);
      this.observeResize(container);
    });
  }
  
  addDebugInfo(container) {
    container.classList.add('debug-container');
    container.dataset.containerSize = `${container.offsetWidth}px`;
  }
  
  observeResize(container) {
    const observer = new ResizeObserver(entries => {
      entries.forEach(entry => {
        const width = Math.round(entry.contentRect.width);
        entry.target.dataset.containerSize = `${width}px`;
      });
    });
    
    observer.observe(container);
  }
}

// 開発環境でのみ有効化
if (process.env.NODE_ENV === 'development') {
  new ContainerDebugger();
}

ベストプラクティス

命名規則

/* 推奨される命名パターン */
.component-container {
  container: component / inline-size;
}

.layout-container {
  container: layout / size;
}

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

アクセシビリティへの配慮

/* フォーカススタイルの確保 */
@container (min-width: 400px) {
  .interactive-element:focus {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
  }
}

/* 読みやすさの確保 */
.text-content {
  font-size: clamp(1rem, 2.5cqi, 1.25rem);
  line-height: 1.6;
  max-width: 65ch;
}

まとめ

CSS Container Queries は、真のコンポーネントベースのレスポンシブデザインを実現する画期的な技術です。2025 年現在、主要ブラウザでのサポートが完了し、実用的な段階に入りました。

Container Queries は、私たちがずっと求めていた機能です。これにより、真に再利用可能なコンポーネントが作成でき、レスポンシブデザインの新しい時代が始まります。

今後は、さらに多くのデザインパターンやフレームワークが Container Queries を前提とした設計になっていくでしょう。早めに習得し、プロジェクトに活用することをお勧めします。