コンテナクエリ対応 自己レスポンシブカード

解説

このカードは、画面全体の幅ではなく自分が置かれた容器の幅に合わせてレイアウトを変える「コンテナクエリ」の実例です。親要素に container-type:inline-size を指定し、カード側で @container (min-width:480px) と書くことで、容器が 480px 以上のときだけ画像とテキストを横並びにし、狭いときは縦積みに戻します。同じカード部品を、サイドバーの細い枠でもメイン領域の広い枠でも、それぞれ適切な形で表示できるのがポイントです。

記事一覧やカード型のダッシュボード、再利用するコンポーネントをいろいろな幅のスロットに差し込むデザインシステムで特に効きます。従来のメディアクエリは画面幅で一律に切り替わるため、置き場所ごとに別の調整が要りましたが、コンテナクエリなら部品が自分で最適な見た目を選びます。

カスタマイズと注意点

• 横並びに切り替わる幅を変えるには @container の min-width の値を編集します。
• 横並び時の画像幅やテキストの余白も @container ブロック内で個別に調整できます。
• コンテナクエリを効かせるには、必ず親に container-type を付ける必要があります。これを忘れると切り替えが起きません。対応は比較的新しいブラウザが中心なので、未対応環境では基本の縦積みで表示されるよう設計しておくと安心です。