最近ではデザインもJavaScriptもモジュール式のコンポーネント化が進んでおり、HTMLとCSSでも徐々に浸透している流れですが、完全に対応できているとは言えない状況です。例えば、メディア クエリはページレイアウトではうまく機能しますが、モジュール式のコンポーネントを実装するのは難しくなっています。 レスポンシブ対応のモジュール式コンポーネントを実装する際に適したコンテナ クエリの考え方を紹介します。 Container Queries: Once More Unto the Breach by Mat Marquis 下記は各ポイントを意訳したものです。 ※A List Apartと著者の許可を得て翻訳しています。 メディアク エリの問題点 エレメント クエリとは エレメント クエリがダメな理由 コンテナ クエリとは コンテナ クエリに取り組もう メディア クエリの問題点 複数のコン
![[CSS]メディアクエリとは異なる、レスポンシブ対応のモジュール式コンポーネントの実装に適したコンテナクエリ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e7db92ac4801336f7d4af89766702084294cf9b7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201901%2F2019020210-01.png)