目次
本文では横並び、サイドバーでは縦並び。同じカードを再利用したいとき、画面幅だけを見たメディアクエリでは配置先の違いを表しにくくなります。デスクトップの広い画面でも、サイドバーに割り当てられた幅は狭いままだからです。コンテナクエリを使うと、カードを置く領域の寸法に合わせて内部レイアウトを切り替えられます。
本稿ではサイズを条件にするコンテナクエリに絞り、イベント告知カードを実装します。style queryやscroll-state queryは扱いません。2026年10月24日に確認した仕様とドキュメントを基にした恒久的な実装解説です。
スポンサーリンク
画面全体と部品内部で役割を分ける
ページ全体を1カラムから2カラムへ切り替える判断は、従来どおりメディアクエリで構いません。その結果カードへ渡された幅に応じて、カード内部だけをコンテナクエリで調整します。画面側が配置を決め、部品側が渡された空間の使い方を決める構成です。
MDNのコンテナクエリ解説では、サイズ条件を使うために問い合わせ対象の要素へcontainer-typeを指定する方法が示されています。横書きのカードで幅を基準にするなら、まずinline-sizeを選ぶと扱いやすくなります。
問い合わせる親と変形する子を分ける
<div class="card-slot">
<article class="card">
<img src="/images/workshop.jpg" width="640" height="480"
alt="作業台で木材を組み立てる様子">
<div class="card__body">
<h2>週末のものづくり講座</h2>
<p>道具の使い方から作品の仕上げまで体験できます。</p>
<a href="/workshops/">講座の詳細を見る</a>
</div>
</article>
</div>.card-slot { container: article-card / inline-size; }
.card { display: grid; gap: 1rem; }
.card img { display: block; inline-size: 100%; block-size: auto; }
.card__body { min-inline-size: 0; overflow-wrap: anywhere; }
.card h2 { margin-block: 0 .5rem; font-size: 1.25rem; }
@container article-card (min-width: 36rem) {
.card { grid-template-columns: 2fr 3fr; align-items: start; }
.card h2 { font-size: 1.5rem; }
}card-slotが問い合わせ対象で、内部のcardが変形する対象です。article-cardという名前を付け、@containerで明示しています。名前を省略した場合に、意図しない近くのコンテナを参照してしまう問題を避けやすくなります。同じ名前を持つコンテナが入れ子なら、条件に適した近い祖先が選ばれるため、名前を付けても階層の確認は必要です。
例の画像URLと遷移先は差し替え用です。実際の画像を/images/workshop.jpgへ配置し、リンク先も自サイトのURLへ変更してください。画像は640×480を想定し、縦横比を保ったまま表示します。
初期状態は1カラムです。利用可能な幅が36rem以上になったとき、画像と本文を2対3の割合で横並びにします。36remは仕様が決めた値ではなく、このサンプル用の判断値です。見出し、説明、リンクが無理なく読める幅を実データで調べ、案件ごとに決めます。
スポンサーリンク
自分自身の幅で自分を変えようとしない
サイズクエリでは、要素は自分自身を問い合わせ対象として自身のスタイルを決めることはできません。カード自身へcontainer-typeを付け、同じカードを@container内で横並びにする書き方では、意図した境界になりません。ラッパーを一つ設ける設計には、問い合わせる領域と変更する内容を分離する意味があります。
またinline-sizeの封じ込めは、内部の内容がコンテナの幅を決める仕組みへ影響します。親レイアウトから幅が与えられない、内容依存のinline-blockや縮むラッパーへ機械的に付けると、想定しない幅になることがあります。まず通常のblockやグリッドのセルとして幅を受け取り、その内側をコンテナにする方法から始めると追いやすくなります。仕様上の詳細はW3C CSS Containment Level 3の作業草案で確認できます。草案であるため、実装判断では対象ブラウザーの動作も照合します。
長いタイトルと入れ子で壊れないようにする
コードのmin-inline-size:0は、グリッド内の本文が内容由来の最小幅に引っ張られすぎないための指定です。overflow-wrap:anywhereは長いURLや連続した英数字を折り返す助けになります。ただし、読めないほど細いカラムをCSSだけで救うのではなく、横並びへ変える境界自体を見直すことが先です。
タイトルが短い場合だけを見て閾値を決めると、本番の長いイベント名で崩れます。日本語2行、長い英単語、画像なし、リンク文言が長いケースを同じコンポーネントへ入れてください。カードの高さを固定して本文を切り落とすより、内容に応じて高さを伸ばす方が更新運用に向きます。
スポンサーリンク
コンテナ単位は必要になってから加える
cqiはコンテナのインライン寸法に比例する単位です。見出しを幅に応じて滑らかに変えたいなら、clamp()で上下限を付けて使う選択肢があります。ただし、単位が参照する軸に適したコンテナがなければ小さいビューポートの単位へフォールバックします。今回のように段階的な2サイズで足りるなら、最初から導入する必要はありません。
「部品の幅へ追従する文字」と「利用者が拡大して読む文字」が競合しないかも確認します。フォントサイズをすべてcqiだけで決めると、狭い領域で文字が小さくなりすぎます。remの下限を持たせ、ブラウザーの拡大で情報や操作が消えない構成にします。
未対応環境では縦並びを維持する
この例は基本CSSだけでも1カラムとして成立し、@containerが使えるときに横並びへ広がります。対応確認だけのために別のJavaScriptレイアウト処理を追加する必要はありません。特定のWebViewや組み込みブラウザーが対象なら、そこでクエリが効くかを実機で確認してください。サイズクエリと、他の新しいクエリ機能の対応状況は一括りにしないことが大切です。
配置先を変えて検証する
- 同じ画面幅で、300pxのサイドバーと700pxの本文へ同じHTMLを置く。片方だけ横並びになることを確認する。
- コンテナ幅を36remの直前と直後へ動かし、余白や見出しが急に窮屈にならないか見る。
- 長いタイトルと200%拡大で、横スクロールや本文の欠落が起きないか見る。
- 別の名前付きコンテナへ入れ子にし、想定した祖先が問い合わせ対象か開発者ツールで確認する。
コンテナクエリの導入単位は、サイト全体ではなくカード一つで構いません。ページのカラム設計は維持したまま、配置先に合わせて内部を変えたい部品から切り出すと、変更の影響を小さくできます。使い回せるHTMLだけでなく、狭い領域でも読みやすい状態を基本形として持つことが、運用しやすい部品へつながります。
