モダンCSS・プラットフォーム
コンテナクエリ適応カード
同じカードが、画面幅ではなく“置かれた入れ物”の幅に応じて縦積み⇄横並びに切り替わる。右下をドラッグして幅を変えると形が変化する。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
実装メモ
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>