コンテナクエリとは
CSSの新機能で、親要素（コンテナ）のサイズに基づいてスタイルを変更できる機能で、従来のメディアクエリ（@media）が画面幅に応じてスタイルを変更するのに対し、コンテナクエリは特定の要素のサイズに応じてスタイルを変更することができます。
2023年2月から全ての主要ブラウザで利用可能になっており、新しめのバージョンであれば主要ブラウザで使用することができます。
コンテナクエリがWebデザインにもたらす影響とは
先程コンテナクエリは特定の要素のサイズに応じてスタイルと定義できると述べました。
そはすなわち以下3点を可能にします。
- より柔軟なレイアウト設計が可能になる
- コンポーネント単位でのレスポンシブデザインを実現しやすくなる
- 同じ画面幅でも、コンテナのサイズに応じて最適なデザインにできる
画面幅ではなく、親要素に合わせたスタイル変更というのは想像以上に便利なもので、コンポーネント指向ととても相性がいいと思います。無駄にメディアクエリを書きまくる必要もなく、同じコンポーネントを利用しても親要素の状態に応じてスタイルを変えることも可能になります。
コンテナクエリを実際に使ってみる
簡単なHTMLを用意
index.html
<div class="container">
<div class="child">
<!-- コンテンツ -->
</div>
</div>
基準となるコンテナを設定します。
.container {
container-type: inline-size; /* または size */
}
コンテナに応じたスタイルを定義します。
/* コンテナの幅が400px以上の時のスタイル */
@container (min-width: 400px) {
.child {
display: flex;
justify-content: space-between;
}
}
コンテナクエリを使ったデモになります。以下で点線の右下をドラッグし、コンテナ幅を変更してみてください。画面幅が変わらずとも子要素のサイズやレイアウトが変わるのがわかると思います。
コンテナクエリを使用する際は以下に注意しましょう
- 擬似要素（::before、::after）は基準コンテナとして使用できません
- パフォーマンスへの影響を考慮する必要があります
- コンテナクエリの単位を使用する際は、入れ子構造に注意が必要です
- W3Cの仕様では現在も草案段階のため、今後実装方法や機能に変更が発生する可能性があります
まとめ
今回はコンテナクエリについて取り上げました。
TailwindCSSのv4.0（ベータ版）でもコンテナクエリが実装される予定らしですし、今後のCSSの中核技術となること間違いなしだと思います。
コンテナクエリを使用することで、より柔軟で効率的なレスポンシブデザインの実装が可能になります。特にコンポーネント指向のデザインを採用している場合に効果を発揮するので、今後も活用していこうと思います。