コンテナクエリ とは？

メディアクエリは「ブラウザの画面幅が768px以下なら」というようにビューポート全体のサイズで判断するんだ。コンテナクエリは「このコンポーネントの親要素の幅が400px以下なら」と、もっとピンポイントで判断する。同じカードコンポーネントでも、メインカラムとサイドバーで別々にスタイルを変えられるよ

まず親要素にcontainer-type: inline-sizeを指定してコンテナとして宣言する。そして@container (max-width: 400px)のように書くと、そのコンテナの幅が400px以下のときだけスタイルが適用されるんだ。container-nameを付ければ、どのコンテナを基準にするか名前で指定もできるよ

メディアクエリだけだと、サイドバーが300px幅のとき画面全体は1200pxだからメディアクエリは発動しないんだ。だからサイドバー用に別CSSクラスを書いたり、JavaScriptでリサイズを監視したりしていた。コンテナクエリのおかげで純粋なCSSだけでコンポーネント単位のレスポンシブが実現できるようになったよ

コンテナクエリ単位と呼ばれるもので、cqwはコンテナ幅の1%、cqhはコンテナ高さの1%を表すよ。font-size: 4cqwと書けば、コンテナが狭くなるとフォントも自動で小さくなる。vwのコンテナ版だと思えば分かりやすいね

2023年にChrome、Firefox、Safariすべてが対応して、モダンブラウザではもう安心して使えるよ。デザインシステムやコンポーネントライブラリでは急速に採用が進んでいるんだ。container-type: inline-sizeを指定した要素はレイアウト計算が少し変わるから、既存コードに後付けするときはcontainの挙動を理解しておくと安心だね