この記事は CSS Advent Calendar 2019 - Qiita 23日目の記事です。 Container Queriesを知っていますか? Media Queriesに依存せず、コンテンツにあわせてレイアウトを変化させるを手法です。 Container Queriesとは レスポンシブwebデザインを行う時、みなさんはMedia Queriesを使用していると思います。 ブレークポイントにあわせて、画面ごとにコーディングを進めていくのが一般的な方法でしょう。 その方法は本当に正しいのでしょうか? Atomic Designやデザインシステムといった考え方が浸透してきて、UIなどをコンポーネントとして扱う場合も増えてきました。 しかし、コンポーネントとMedia Queriesは切り離せない関係です。ページの画面サイズに依存し、レイアウトを構築するする場合は、コンポーネントに何