CSS Container Queriesによるレスポンシブデザイン実装

ファンタラクティブのエンジニアの 太田 です。
レスポンシブデザインを実装する際にMedia Queriesを使用して実装することが多いと思いますが、Container Queriesを使用した実装を紹介します。
また reactとtailwindを使用したサンプルコード を置いておきます。

Media Queriesとの違い

• 特定のブレイクポイントでレイアウトが切り替わるコンポーネントがある場合、Media Queriesの場合viewportのサイズを参照するのに対し、Container Queriesは親要素のサイズを参照します

レスポンシブで切り替わるコンポーネント (SP)

レスポンシブで切り替わるコンポーネント (PC)

問題

例えばPC表示でサイドバーやモーダル内などwidthが小さいエリアにコンポーネントを配置する場合は、SPと同じレイアウトにしたい場合があると思います。

理想

しかし、Media Queriesをした場合はviewportのサイズによるレイアウトの切り替えを行うため、PC用のスタイルが適用されます。
SPのスタイルを適用するにはコンポーネントにPropを渡して切り替えるなどCSS外で対応が必要になります。

Media Queries

Container Queriesが解決すること

Container Queriesを使うと上記の問題を解決できます。
Container Queriesはviewportではなく親の要素のサイズによってレイアウトを切り替えるため、小さいエリアに配置したらSP用のスタイルが適用されることになります。

Container Queries

補足

Container Queriesは記事作成時点では多くのブラウザで動きません。
しかしPolyfillを使用すれば使えます。
npmのダウンロード数が少なく少し不安ですが、tailwind用のpluginも用意されているためtailwindで使うこともできます。

あとがき

Media Queriesと比べてデメリットはあまり思い浮かばず、多くのブラウザに対応されさえすれば今後広く使われていくのではないかと思っています。
要素のサイズを強く意識する必要があるためMedia Queriesに対して設計がシビアになる可能性があります。
しかしMedia Queriesと併用できるので、基本はMedia Queriesを使用し部分的にContainer Queriesを使用するような導入の仕方でもいいのかもしれません。
最後にサンプルコードを載せておきます。

サンプルコード

iframeのpolyfillの問題かstackblitzでは動かなかったのでコードだけ載せておきます。
tailwindを使用しています。