現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化します。そして、コンテナクエリは親要素のコンテナにもとづいてレイアウトを最適化します。コンテナクエリとは何か、デザイナーのワークフローにどのような変化をもたらすかを紹介します。 今まではビューポート(メディアクエリ)で変化するコンポーネントと影響を受けないコンポーネントの2種類でしたが、これからは親コンテナ(コンテナクエリ)で変化するコンポーネントも必要になります。 CSS Container Queries For Designers by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブデザインの現状 コンテナクエリとは コンテナクエリを念頭に置いたデザイン デベロッパーとのコミュニケーション方法 レスポ
![CSSコンテナクエリの登場で、デザインのやり方も考え方も大きく変わる](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c47cc33022e4da6363204598dfc4370ab84f342/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202102%2F2021060510%402x.png)