なぜ今、コンテナークエリーが重要なのか
Web制作の現場では、長らく「メディアクエリー」がレスポンシブデザインの主役でした。しかし、メディアクエリーは「ブラウザの表示領域（ビューポート）」を基準に判定するため、同じコンポーネントをサイドバーやメインコンテンツなど、配置場所によって柔軟にスタイルを切り替えることが難しいという課題がありました。
コンテナークエリーを使用すれば、コンポーネント自身が「自分がどのくらいの幅の親要素に入っているか」を判断してスタイルを変えることができます。これにより、CSS設計がより「コンポーネント単位」で完結し、再利用性の高いコードが書けるようになります。
基礎知識：コンテナーコンテキストの理解
コンテナークエリーを機能させるには、まず親要素に対して「ここがコンテナーですよ」と宣言する必要があります。これをコンテナーコンテキストと呼びます。
・container-type: コンテナーが何を基準にクエリーを判定するかを指定します（主に幅を基準にするなら inline-size を使用します）。
・@container: メディアクエリーの代わりに、親要素のサイズを条件としてスタイルを適用するアットルールです。
実装手順
1. 親要素（ラッパー）に container-type: inline-size; を指定する。
2. 必要に応じて container-name で名前をつけ、特定のコンテナーをターゲットにする。
3. @container アットルールを使用して、コンテナーのサイズに応じたスタイルを記述する。
サンプルプログラム
以下のコードは、親要素の幅が 500px を超えたらカード内の文字サイズを大きくする例です。
/ 親要素：コンテナークエリーの起点 /
.card-wrapper {
/ インライン軸（幅）を基準に設定 /
container-type: inline-size;
/ 名前をつけておくと特定しやすくなります /
container-name: card-container;
}
/ 通常時のスタイル（小さいコンテナー用） /
.card-title {
font-size: 1rem;
}
/ コンテナーの幅が500px以上になったら適用 /
@container card-container (min-width: 500px) {
.card-title {
font-size: 1.5rem; / 文字を大きくする /
color: royalblue; / 色も変える /
}
}
また、cqi（コンテナーのインラインサイズの1%）という単位を使うと、親の幅に応じてフォントサイズを流動的に変化させることも可能です。
.responsive-text {
/ 親幅の5%をフォントサイズにする /
font-size: 5cqi;
}
応用・注意点
現場で活用する上で、以下の点に注意してください。
1. レイアウトの崩れに注意
container-type: size; を使用すると、コンテナーの高さもブラウザに認識されます。その際、コンテナー自体に高さ（height）を指定していないと、中身が潰れて表示されることがあります。通常は inline-size の使用で十分なケースが多いです。
2. 既存のブラウザ対応
現在の主要ブラウザは全てコンテナークエリーをサポートしていますが、古いプロジェクトのメンテナンス時には注意が必要です。どうしても対応が必要な場合は、既存のメディアクエリーとフォールバックを組み合わせて設計しましょう。
3. 命名の習慣化
コンポーネントがネスト（入れ子）される場合、意図しないコンテナーを参照してしまうことがあります。複雑なレイアウトでは必ず container-name を使用し、対象を明確に限定する癖をつけることを強くおすすめします。
コンテナークエリーの導入は、メディアクエリーによる「画面幅ごとの力技の調整」を減らし、CSSをより保守しやすくする強力な武器になります。ぜひ次回の案件から取り入れてみてください。
コメント