【ITニュース解説】CSS Container Queries: The Day CSS Finally Went to Therapy

WebサイトやWebアプリケーションを開発する上で、ユーザーが様々なデバイスで閲覧しても、コンテンツが見やすく、操作しやすいように調整するレスポンシブデザインは不可欠である。これまで、Webページの表示を異なる画面サイズに適応させる主要な手法として、CSSのメディアクエリが広く利用されてきた。メディアクエリは、ブラウザのウィンドウ全体の幅や高さといった「ビューポート」のサイズに基づいて、適用するスタイルを切り替える機能である。しかし、このメディアクエリは常にブラウザのウィンドウ全体を見ているため、Webページを構成する個々の部品、例えば「カード」のようなコンポーネントが、その部品自身が置かれている場所のサイズに合わせて柔軟に表示を変えることが困難であった。

具体的には、同じ「カード」コンポーネントが、広いメインコンテンツ領域に配置される場合と、幅の狭いサイドバーに配置される場合で、それぞれ最適な表示方法が異なるにもかかわらず、メディアクエリはウィンドウ全体のサイズしか判断基準にできなかった。そのため、ウィンドウサイズが大きければ、サイドバー内のカードであっても、広い表示領域を前提としたレイアウトが適用されてしまい、結果としてカードがサイドバーからはみ出したり、表示が崩れたりする問題が発生しがちであった。開発者は、このような状況に対応するために、複雑なCSSの記述を重ねたり、特定の場合にのみ適用される特別なスタイルを無理やり上書きしたりと、多くの手間を強いられてきたのである。

このような課題を根本的に解決するために登場したのが、CSSの「コンテナクエリ」である。コンテナクエリは、メディアクエリがブラウザのウィンドウ全体を監視するのに対し、個々のコンポーネントを囲む「親要素」（コンテナ）のサイズやスタイルを監視し、その情報に基づいてコンポーネント自身のスタイルを変化させる機能である。これは、Webデザインにおける長年の課題に対する強力な解決策であり、CSS開発に大きな進歩をもたらすものとして注目されている。

コンテナクエリの導入により、コンポーネントはもはやブラウザのウィンドウサイズに依存することなく、自身を内包する親コンテナの状況に応じて、独立して自身の表示を最適化できるようになる。例えば、同じ「カード」コンポーネントであっても、広いメインコンテンツ領域に配置されれば多カラムレイアウトになり、狭いサイドバーに配置されれば単一カラムに積み重ねて表示される、といった柔軟な振る舞いが可能になる。これは、それぞれのコンポーネントが「自分を囲む箱の大きさに合わせて、適切に自分の形を変える」という、あるべき姿を実現するものである。これにより、レイアウトの衝突が減り、グローバルなブレークポイントに縛られずに各コンポーネントが自身の責任範囲でレイアウトを調整できるようになるため、CSSの記述が格段に整理され、管理しやすくなる。

コンテナクエリの基本的な使い方はシンプルである。まず、スタイルを調整したい子コンポーネントを囲む親要素に対して、その要素がコンテナとして機能することをCSSで定義する。具体的には、container-type プロパティと container-name プロパティを使用する。container-type: inline-size; は、親要素の水平方向のサイズ変化を監視することを意味し、これに container-name: card; のように任意の名前を付けることで、そのコンテナを識別できるようになる。

次に、この定義したコンテナのサイズに基づいてスタイルを適用するためのクエリを記述する。これは、@container ルールを用いて行う。例えば、.card という名前のコンテナが幅500ピクセル以上になったら、その中の .card__content クラスを持つ要素を2カラム表示にする、といった指示をCSSで記述する。

Copy
1.card {
2  container-type: inline-size;
3  container-name: card;
4}
5@container card (min-width: 500px) {
6  .card__content {
7    display: grid;
8    grid-template-columns: 1fr 1fr;
9  }
10}

このようにすることで、カードは親コンテナの幅が十分にある場合は要素を横並びに配置し、幅が狭ければ要素を縦に積み重ねて表示する、といった自己適応的なレイアウトを実現する。

コンテナクエリの登場とともに、新しいCSS単位も導入された。これらは「コンテナクエリ単位」と呼ばれ、親コンテナのサイズに相対的に値を指定できる。例えば、cqw は親コンテナの幅に対する割合、cqh は親コンテナの高さに対する割合を表す。font-size: 2cqw; と記述すれば、親コンテナの幅が変化するたびに、それに合わせてテキストのサイズも自動的に調整されるようになる。これは、要素のサイズだけでなく、フォントサイズなどもコンテナの大きさに応じて適切にスケールさせたい場合に非常に有用である。

これにより、Webページの様々な部分に、独立したレスポンシブな振る舞いを持たせることが可能になる。例えば、複数のウィジェットが並ぶ複雑なダッシュボードのレイアウトにおいて、各ウィジェットが個別のメディアクエリに頼ることなく、自身の親コンテナのサイズに基づいてスタイルを調整するため、互いに影響し合うことなく、それぞれが自律的にレスポンシブな表示を実現できる。

コンテナクエリは、もはや実験的な技術ではない。現在、主要なWebブラウザであるChrome、Firefox、Safari、Edgeのすべてでサポートされており、実際のWeb開発プロジェクトで積極的に利用できる段階にある。これにより、開発者はより堅牢で保守性の高いレスポンシブデザインを容易に実装できるようになる。さらに、コンテナクエリはCSSの進化の第一歩に過ぎず、将来的には親要素の計算されたCSSプロパティ、例えば「親要素がダークテーマであるかどうか」といった情報に基づいて子要素のスタイルを変更できるようになる「スタイルクエリ」のような機能も導入される予定である。

まとめると、コンテナクエリは、個々のWebコンポーネントがその親要素のサイズに基づいて自身のスタイルを適応させることを可能にする、革新的なCSSの機能である。これにより、これまでのメディアクエリが抱えていた、ウィンドウ全体のサイズに依存することによるレイアウトの制約や複雑なコード記述の問題が解消される。コンポーネントの自己完結性が高まり、CSSの管理が容易になるだけでなく、新しい単位である cqw などを用いることで、よりきめ細やかなレスポンシブデザインが可能になる。既に主要ブラウザでサポートされているため、Web開発者はこの強力な機能を活用し、より優れたユーザー体験を提供するWebサイトやアプリケーションを構築できる段階にあると言える。