置き場所で形を変える
Container queries
画面幅ではなく「置かれた枠の幅」で切り替える。同じカードをどこに入れても正しく崩れる。
AIへの頼み方
このカードを、画面幅ではなく置かれた枠の幅で、縦積みと横並びが切り替わるようにしてください。親に container-type: inline-size を指定して、@container で切り替えてください。狭いときの見た目を既定にしてください。
動くデモ
この項目のデモは自動では動きません。操作して確かめてください。
全画面で見る ↗最小コード
/* ① 置き場所を「測る対象」だと宣言する */
.card-slot {
container-type: inline-size; /* 横幅を測る */
container-name: card-slot; /* 名前は任意。付けると指定しやすい */
}
/* ② 画面幅ではなく、置き場所の幅で切り替える */
@container card-slot (min-width: 340px) {
.card { grid-template-columns: 130px 1fr } /* 広ければ横並び */
.card .thumb { aspect-ratio: 1 / 1 }
}
/* 狭いときの見た目（既定）は普通に書いておく */
.card { display: grid; gap: 10px }
/* メディアクエリとの違い：
同じカードをサイドバーに置いても本文に置いても、
その場の幅に合わせて正しく崩れる。コンポーネント単位で完結する。 */対応状況
定番 2026年08月時点で確認
Baseline widely available（newly 2023-02-14 / widely 2025-08-14）。
実案件でそのまま使える。新しく作る部品はこちらで書いて構わない。
対応状況は自動更新していません。確認日より後の変化はこのページに反映されていない場合があります。
使いどころ／避けどころ
同じ部品をあちこちに置くサイトに向く。記事一覧のカードを、本文の中にも、サイドバーにも、トップの目立つ枠にも置く。そういうときに、置き場所の幅を見て自分で形を変えてくれる。
画面幅を見るメディアクエリだと、この使い回しがうまくいかない。「画面が広い＝カードも広い」とは限らないからで、広い画面の細いサイドバーに入れると、横並びのまま潰れる。置き場所の幅で判断すれば、その矛盾がなくなる。
書き方の順番は、狭いときを既定にして、広いときを @container で足す。逆にすると、対応していない環境で崩れた見た目が残る。
つまずくのは、測る宣言を親に付け忘れること。container-type: inline-size を付けた要素の「中」でしか @container は効かない。カード自身に付けても自分は測れない。
もうひとつ、測る宣言を付けた要素は中身で高さを決められなくなる場合がある。高さを内容に合わせたい枠に付けると、レイアウトが変わって驚くことがある。付けるのは「幅を決めている入れ物」に限る。
つまずいた実例をひとつ。測る宣言を付けた要素の幅に transition を掛けると、幅の変化が動きにならないことがある。 幅が変わる→切り替えを判定し直す、が毎回走って遷移が終わらないためで、このページのデモでも最初それで幅が固まった。幅そのものを滑らかに動かしたいときは、外側にもう1枚箱を置いて、そちらを動かす。
部品ごとに完結するので、ページのレイアウトを変えても部品を直さなくてよくなる。作り直しの多いサイトほど効いてくる。