【実装例付き】コンテナクエリ完全ガイド – 現場で使える実践テクニック

2025年1月29日

はじめに

メディアクエリによるレスポンシブデザインの実装に限界を感じていませんか？

従来のビューポートベースのアプローチでは、複雑化するWebコンポーネントの要求に応えることが難しくなってきています。

特に、同じコンポーネントでも配置される場所によって異なるレイアウトが求められるケースでは、メディアクエリだけでは柔軟な対応が困難です。

本記事では、コンテナクエリの実践的な実装方法から、既存プロジェクトへの段階的な導入手順、そしてパフォーマンスへの影響まで、現場で即活用できる知見を詳しく解説していきますので、ぜひ参考にしてみてください。

コンテナクエリの実践的な実装パターン

近年のWebデザインでは、コンポーネントベースの開発が主流となっています。

しかし、従来のメディアクエリだけでは、同じコンポーネントを異なる場所で使用する際の柔軟な対応が困難でした。コンテナクエリはこの課題を解決する強力なツールです。

基本的なセットアップ

コンテナクエリを使用するためには、まずコンテナとなる要素を定義する必要があります。

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

ここで重要なのはcontainer-typeプロパティです。

inline-sizeを指定することで、コンテナの横幅に基づいたクエリが可能になります。
container-nameはオプションですが、複数のコンテナを扱う際の識別子として便利です。

実践的な活用例

カードコンポーネントの可変レイアウト

例えばWebサイトでよく使用されるカードコンポーネントの場合、コンテナクエリを使うと以下のようになります。

.card-container {
  container-type: inline-size;
  container-name: card;
}
.card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

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

このコードの特徴は、カードが配置されるコンテナの幅が400px以上になった時に、グリッドレイアウトが適用される点です。

これにより以下のように配置場所に応じて適切なレイアウトが自動的に選択されます。

サイドバーに配置された場合は1カラムレイアウト
メインコンテンツ領域では2カラムレイアウト

レスポンシブナビゲーション

ヘッダーやサイドバーのナビゲーションも、コンテナクエリの活用で柔軟な対応が可能です。

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

.nav-menu {
  display: flex;
  flex-direction: column;
}

@container (min-width: 600px) {
  .nav-menu {
    flex-direction: row;
    justify-content: space-between;
  }
}

このパターンの利点は、ナビゲーションの配置場所（ヘッダーやサイドバー）に関係なく、利用可能な空間に応じて最適なレイアウトが選択される点です。

パフォーマンスへの配慮

コンテナクエリは強力な機能ですが、適切に使用しないとパフォーマンスに影響を与える可能性があります。

以下のポイントに注意してください。

containment仕様の活用

.card-container {
  container-type: inline-size;
  contain: layout style paint;
}

containプロパティを使用することで、ブラウザのレンダリングエンジンに対してヒントを提供できます。

これにより要素の再レンダリングの範囲を制限し、全体的なパフォーマンスの向上が期待できます。

実践的な導入ガイド

コンテナクエリは比較的新しい技術なため、プロジェクトへの導入には慎重なアプローチが必要です。

ここでは、実際のプロジェクトでコンテナクエリを活用するための具体的な手順を紹介していきます。

まずは小さな範囲から始める

新しいプロジェクトであれば商品カードのような単体のコンポーネントから、既存プロジェクトであればサイドバーのウィジェットなど、影響範囲が限定的な要素から導入を始めるのがおすすめです。

/* 商品カードの基本実装例 */
.product-card-container {
  container-type: inline-size;
}

.product-card {
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

@container (min-width: 300px) {
  .product-card {
    grid-template-columns: 120px 1fr;
  }

  .product-description {
    font-size: 0.9rem;
    line-height: 1.6;
  }
}

この実装では、カードの横幅が300pxを超えた時点で2カラムレイアウトに切り替わります。

メディアクエリと違い、カードが配置される場所に関係なく、利用可能な幅に応じて最適なレイアウトが選択されます。

ブラウザサポートへの対応

コンテナクエリは比較的新しい技術のため、ブラウザサポートへの配慮も必要です。

以下のように、段階的な実装を行うことで、より安全に導入できます。

/* 基本レイアウト（すべてのブラウザで動作） */
.product-card {
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

/* コンテナクエリをサポートするブラウザ向けの拡張機能 */
@supports (container-type: inline-size) {
  .product-card-container {
    container-type: inline-size;
  }

  @container (min-width: 300px) {
    .product-card {
      grid-template-columns: 120px 1fr;
    }
  }
}

このアプローチにより、古いブラウザでも基本的な機能を損なうことなく、モダンブラウザではより柔軟なレイアウトを提供できます。