コンテナクエリ対応 自己レスポンシブカード
@container クエリで「親の幅」に応じてレイアウトが切り替わるカード。メディアクエリと異なり、コンポーネント単位で再利用可能な真のレスポンシブ実装。
解説
コンテナクエリ対応 自己レスポンシブカードは、レイアウトカテゴリの「container-query」に分類される実装パターンです。CSS のみで構成され、難易度は中級レベル。
2023 年に主要ブラウザでサポートされた Container Query（コンテナクエリ）を使った実装です。メディアクエリは「ビューポート（画面）の幅」に応じてスタイルを変えますが、コンテナクエリは「親要素の幅」に応じてスタイルを変えます。
これにより、同じカードコンポーネントを「サイドバー（狭い）」「メインカラム（広い）」のどちらに置いても、それぞれ最適なレイアウトに自動切り替えできます。再利用可能なコンポーネント設計に革命的な改善をもたらす機能です。
仕組み
下記コードタブから HTML / CSS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
CSS プロパティだけで完結しているため、フレームワーク非依存・軽量に組み込めます。React / Vue / Astro / 静的 HTML どれにも持ち込み可能です。
レスポンシブ対応済み。スマートフォン・タブレット・PC それぞれの画面幅で適切に表示されます。
注意点 / カスタマイズ時のポイント
親要素に container-type: inline-size; を必ず指定してください。これがないと @container ルールが効きません。
Chrome / Safari / Firefox / Edge すべて対応済み（2023 年〜）。IE 11 は非対応。古い案件用には @supports (container-type: inline-size) でフォールバックを書くとよいでしょう。
よくある質問
メディアクエリと併用できますか？
container-name を指定する必要は？
container-name: card; + @container card (min-width: 480px) のように名前付きで使い分けます。このスニペットは商用利用できますか？
そのまま貼り付ければ動きますか？
ブラウザ対応は？
Tailwind CSS でも実装できますか？
@apply や arbitrary values が必要な場合があります。