画面は広いのにカードが窮屈？コンテナクエリで部品の幅に合わせよう

PCの画面は広いのに、サイドバーへ置いたカードだけ窮屈になる。画面全体の幅ではなく、その部品を置く場所の幅へ合わせたい場面があるよ。

CSSのコンテナクエリを使うと、対象とするコンテナのサイズなどを条件に、内側の要素のスタイルを切り替えられる。今回は横書きのカードを一つ使い、インライン方向の幅だけを比べよう。

まず、測る親を指定する

.host {
  container-type: inline-size;
  container-name: demo;
}
.card { display: block; }
@container demo (min-width: 200px) {
  .card { display: flex; }
}

container-type:inline-sizeは、インライン方向のサイズを使うための指定。今回の横書きでは幅として見られる。container-nameは、条件で参照するコンテナに名前を付けているよ。

ここで並びを変える対象は内側の.card。条件の基準となる.host自身のサイズを、自分へのサイズクエリで変える例ではない。

メディアクエリと基準が違う

画面表示向けの幅のメディアクエリは、主にビューポートの幅を見る。一方、今回の@containerはdemoという対象のコンテナを見る。

例えば同じ広い画面でも、本文欄とサイドバーでは部品が使える幅が違う。コンテナごとの幅で切り替えれば、同じカードを別の場所へ置いたときにも条件を対応させやすくなるね。

どちらか一方だけを使えばよいという話ではない。ページ全体の構成を見る条件と、部品の置き場所を見る条件を分けて選ぼう。

作例では、画面の幅を変えずに親を動かす

1. 「親の希望幅」を小さくし、画像と説明が縦に並ぶことを見る。
2. 幅を大きくし、実際の内容幅が200px以上なら横並びになることを確かめる。
3. 「クエリを使う」をオフにし、幅が広くても縦並びのままになるか見る。
4. 「最初から試す」で140px・クエリオンへ戻す。

作例はページ全体が横へはみ出さないよう、親の最大幅を表示枠へ制限している。そのため、スマホなどで360pxを指定しても、実際はそこまで広がらない場合があるよ。

表示欄には、希望した幅と実際の内容幅、カードの並びを出す。指定した数字だけでなく、条件判定に使う幅を確かめよう。

対応とレイアウトの前提も確認する

作例はcontainer-typeの構文対応を表示し、未対応なら縦並びのまま使う。対応判定だけで、すべての条件や書字方向を検証したことにはならないよ。

サイズの包含を使うと、親と子のサイズ計算の関係にも影響する。今回のように幅の基準を明確にした小さい部品から始め、入れ子のコンテナや内容の最小幅も別に確認したいね。

編集部ではChromiumで、親の幅、実寸、条件の切替とリセットを確認した。カードの列数を自動で決める場合はGridのauto-fitとminmax、横並びで縮まない場合はFlexの最小幅も参考になるよ。