こんにちは。
株式会社エス・スリーのスタッフです。
今週は「CSSコンテナクエリ」に特化した入門記事をお届けします。
コンテナクエリとは？
従来のレスポンシブデザインでは、ビューポート（画面全体）のサイズに基づいてスタイルを変更していました。一方、コンテナクエリでは、親要素（コンテナ）のサイズに基づいてスタイルを調整できます。
これにより、同じコンポーネントが配置される場所（サイドバー、メインコンテンツ、モバイルなど）に応じて、自動的に最適なレイアウトに変化させることが可能になりました。
実践的な使用例
例: コンテンツグリッドの適応型レイアウト
3カラムのコンテンツグリッドを例に、コンテナの幅に応じてカラム数を変更する方法を見てみましょう：
See the Pen
Conteiner test by I F (@I-F-the-builder)
on CodePen.
この例では、親コンテナのサイズに応じてグリッドのカラム数が1〜3列に変わります。
ビューポートサイズではなくコンテナのサイズを基準にしているため、このグリッドがどこに配置されても適切なレイアウトが適用されます。
ブラウザサポートと導入のタイミング
2025年現在、主要ブラウザ（Chrome、Firefox、Safari、Edge）はすべてコンテナクエリをサポートしています。
古いブラウザへの対応が必要な場合は、フォールバックスタイルを設定しておくことをおすすめします：
/* 基本スタイル（すべてのブラウザで動作） */
.card {
display: block; /* フォールバックスタイル */
}/* コンテナクエリを使った拡張スタイル */
@container (min-width: 400px) {
.card {
display: flex;
}
}
まとめ：コンテナクエリのメリット
1. コンポーネントの再利用性向上：配置場所を問わず最適な表示が可能
2. コード量の削減：同じコンポーネントを場所ごとに再定義する必要がない
3. メンテナンス性の向上：変更が必要な箇所が集約される
4. 真のコンポーネント指向デザイン：コンポーネントが環境に適応する
5. JSへの依存度低下：CSSだけでより多くのことが実現可能に
コンテナクエリを使いこなすことで、より柔軟で保守性の高いフロントエンド実装が可能になります。
ぜひ実際のプロジェクトに取り入れてみてください！
最後までお読みいただき、ありがとうございました。
