コンテナクエリ適応カード
同じカードが、画面幅ではなく“置かれた入れ物”の幅に応じて縦積み⇄横並びに切り替わる。右下をドラッグして幅を変えると形が変化する。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
仕様書
- 向く場面
- サイドバーと本文で同じカードを別レイアウトに
- 置き場所の幅で縦積み⇄横並びを切り替える部品
- ビューポート幅では判断できないレール内の要素
- 避ける場面
- ページ全体のレイアウト切替（メディアクエリの領分）
- 幅ではなく高さで形を変えたい要素
- 構成要素
- リサイズできる入れ物
- カード
- メディア
- 見出しと本文
- 持っている状態
- 通常
- キーボード
マウス・タッチ専用（右下ハンドルのドラッグで幅を変える）。代替: 実装では幅は配置で決まり操作は不要
- 支援技術
article＋h3 の構造は幅に関わらず同じで読み上げ順は不変。絵文字のメディアは aria-hidden。リサイズハンドルは支援技術から操作できない
- 動き
なし（幅 260px を境にレイアウトが切り替わるだけ）
デザインの要点
- container-type: inline-size は入れ物に付け、@container はカードに書く。カード自身を容器にすると自分の幅を参照できず判定が回る
- 境界は 260px。横並びで 96px のメディア＋見出しが 1 行に収まる最小幅から決めた。数字は中身で決め、画面幅の慣例で決めない
- 横並びではメディアを aspect-ratio 1・幅 96px の固定にする。16:9 のまま横に置くと縦が潰れて絵が読めない
- resize: horizontal は見本の都合。実装では幅は配置で決まるので、ハンドルもドラッグも要らない
実装メモ
container-type: inline-size を指定した入れ物に対して @container で条件分岐する例です。判定基準がビューポート幅ではなく「親コンテナの幅」なので、同じ部品を置き場所によって別レイアウトにできます。プレビューでは resize: horizontal で入れ物をドラッグ拡縮でき、260pxを境に縦積み⇄横並びが切り替わります。コンテナクエリは主要ブラウザで広く利用可能です。
コード（コピーして使えます）
<div class="cq-outer">
<p class="cq-hint">右下をドラッグして幅を変える →</p>
<div class="cq-box">
<article class="cq-card">
<span class="cq-media" aria-hidden="true">🏔️</span>
<div class="cq-text">
<h3>白馬岳トレック</h3>
<p>雪渓とお花畑を抜ける2泊3日の縦走コース。</p>
</div>
</article>
</div>
</div>