CSSの新機能「コンテナクエリ」とは？
これまで、CSSではレスポンシブデザインを実現するために「メディアクエリ」を使用していました。メディアクエリはビューポートの幅や高さに基づいてスタイルを適用する便利な機能ですが、コンポーネント単位での柔軟なスタイル変更が難しいという課題がありました。
「コンテナクエリ」は、その課題を解決するための新しいCSS機能です。これにより、要素の親コンテナのサイズや状態に基づいてスタイルを適用できるようになり、よりモジュール化されたデザインが可能になります。
コンテナクエリの基本的な書き方
コンテナクエリを使用するためには、まず対象の親要素に container プロパティを指定します。以下に基本的な使用例を示します。
HTML
<div class="container">
<div class="child">Resizable Component</div>
</div>CSS
/* 親要素にコンテナを定義 */
.container {
container: size; /* サイズに基づいたコンテナクエリ */
width: 100%;
max-width: 800px;
border: 1px solid #ccc;
}
/* 子要素にスタイルを適用 */
@container (min-width: 500px) {
.child {
background-color: lightblue;
font-size: 1.5rem;
}
}
@container (max-width: 499px) {
.child {
background-color: lightpink;
font-size: 1rem;
}
}上記の例では、.container の幅が500px以上の場合は子要素 .child に青い背景色が適用され、499px以下ではピンク色の背景が適用されます。
コンテナクエリを使用するメリット
- コンポーネント単位での柔軟なスタイリング
ビューポートのサイズではなく、コンテナのサイズに基づいてスタイルを変更できるため、再利用性の高いコンポーネント設計が可能です。 - コードの可読性向上
特定のコンテナだけに適用されるスタイルを定義できるため、メディアクエリよりもロジックが直感的になります。 - より適応性のあるデザイン
複雑なレスポンシブデザインの要件に対応しやすくなります。
使用時の注意点
- ブラウザのサポート状況を確認すること。2024年12月時点では最新のブラウザで広くサポートされていますが、古いバージョンでは動作しない可能性があります。
- 過剰に使いすぎるとパフォーマンスに影響が出る場合があるため、必要な箇所に絞って使用するのが良いでしょう。
まとめ
コンテナクエリは、CSSのレスポンシブデザインに革命をもたらす強力な機能です。コンポーネント駆動のデザインを実現しやすくなるため、特にモダンなウェブアプリケーションやデザインシステムにおいて有用です。今後のプロジェクトでぜひ活用してみてください。
