コンテナクエリ (Container Queries) を使ったモジュール型レスポンシブ設計

Thu, 10 Jul 2025 00:00:00 +0900

はじめに

レスポンシブWebデザインにおいて、長年使われてきた定番の手法が メディアクエリ（Media Queries: @media） です。

メディアクエリは、ブラウザの「画面幅（ビューポート）」を基準にしてスタイルを切り替えます。しかし、コンポーネント指向の開発（React, Vue, Web Componentsなど）が主流となった現代において、画面幅依存のレスポンシブ設計には大きな限界がありました。