【ITニュース解説】CSS Container Queries Complete Guide: Say Goodbye to Media Query Pain Points

Webサイトやアプリケーションを開発する際、パソコンやスマートフォン、タブレットなど、さまざまな画面サイズで適切に表示させる「レスポンシブデザイン」は不可欠な技術である。これまで、このレスポンシブデザインを実現する中心的な役割を担ってきたのが、CSSの「メディアクエリ」という機能だ。メディアクエリは、閲覧しているデバイスの画面全体の幅や高さに応じて、Webページのレイアウトや文字の大きさなどを切り替えることができる。しかし、この方法には長年の課題があった。それは、メディアクリが「画面全体」のサイズしか見ていないという点である。例えば、あるカード型の部品を作成したとする。このカードをページの広いメインエリアに配置したときと、狭いサイドバーに配置したときで、それぞれ最適な見た目に自動で切り替えたい場合、メディアクエリだけでは対応が困難だった。なぜなら、カード部品自身は自分がどれくらいの幅の場所に置かれているかを知ることができず、あくまで画面全体の幅でしか判断できなかったからだ。この問題を解決するために登場したのが、CSSの新しい機能「コンテナクエリ」である。

コンテナクエリは、画面全体のサイズではなく、要素が配置されている「親要素（コンテナ）」のサイズを基準にしてスタイルを適用できる画期的な機能だ。これにより、部品（コンポーネント）が自分自身の置かれた状況を判断し、自律的に見た目を変化させることが可能になる。メディアクエリがWebページ全体という大きな視点でレイアウトを制御するのに対し、コンテナクエリは個々の部品という小さな視点でレイアウトを制御する。このおかげで、一度作成した部品をページのどこに配置しても、その場所のスペースに合わせて自動的に最適な表示になるため、部品の再利用性が格段に向上し、CSSのコードもシンプルに保つことができる。現在、主要なWebブラウザはこのコンテナクエリに対応しており、多くのプロジェクトで安心して利用できる状態になっている。

コンテナクエリの使い方は非常にシンプルである。まず、基準としたい親要素に対して container-type: inline-size; というCSSプロパティを指定する。これにより、その親要素が「コンテナ」として定義され、自身の横幅を子要素に伝えるようになる。次に、スタイルを変化させたい子要素に対して @container というルールを使い、コンテナの幅が特定のサイズになった場合のスタイルを記述する。例えば @container (min-width: 400px) と書けば、「コンテナの幅が400px以上になった場合に、この中のスタイルを適用する」という意味になる。この仕組みを利用すれば、様々な応用が可能だ。例えば、カード部品を考えてみよう。コンテナの幅が400px未満の狭い場所では画像を上、テキストを下に配置する縦積みのレイアウトにし、400px以上になったら画像とテキストを横に並べるレイアウトに切り替える、といった制御が簡単に実現できる。同様に、ナビゲーションメニューも、狭いコンテナの中では縦一列のモバイル風メニューに、広いコンテナの中では横一列のPC風メニューに自動的に変化させることが可能となる。

コンテナクエリには、コンテナのサイズに連動する新しい単位も用意されている。「cqi」や「cqw」といった単位を使うと、例えば「コンテナの幅の5%の文字サイズ」といった指定ができるようになる。これにより、コンテナのサイズが変化するのに合わせて文字の大きさを滑らかに拡大・縮小させるといった、より洗練されたレスポンシブデザインが可能になる。ただし、コンテナクエリが登場したからといって、従来のメディアクエリが不要になるわけではない。ページ全体のレイアウト（例えば、サイドバーの有無を切り替えるなど）はメディアクエリで行い、各エリアに配置された個々の部品の見た目の調整はコンテナクエリで行う、というように両者を適切に使い分けるのが最も効果的なアプローチである。

コンテナクエリは、これまで多くのWeb開発者が抱えていたレスポンシブデザインの課題を根本から解決する、まさに革新的な機能だ。部品が自身の置かれた環境に応じて振る舞いを決定できるため、よりモジュール化された、再利用しやすくメンテナンス性に優れたコンポーネント設計が可能になる。システムエンジニアを目指す上で、このようなCSSの新しい技術を理解し、活用できるスキルは、効率的で質の高いフロントエンド開発を行うために非常に重要である。これからのWeb開発における標準的な技術として、ぜひ使い方をマスターしておきたい。