【コンテナクエリ】
コンテナクエリ とは？
最終更新:
💡 置かれた領域のサイズに合わせて表示を変えるCSS
祖先要素のサイズや状態などを条件に、要素のスタイルを切り替えるCSSの仕組み。ここではサイズを条件にする使い方を扱う。同じカードでも、置かれた領域の幅に合わせた表示を指定できる。
📌 このページのポイント
- サイズを調べる祖先要素にcontainer-typeを指定する
- 条件に合うかを調べ、子孫要素へスタイルを適用する
- 直接の親が必ず基準になるわけではなく、条件に適した祖先を使う
- サイズ・スタイル・スクロール状態など、使う機能ごとに対応を確認する
ひよこ メディアクエリと何が違うの？
ペンギン先生 ひよこ どうやって使うの？
ペンギン先生 横書きの例では、領域に「container-type: inline-size」を指定し、「@container (max-width: 400px)」の中でカードのスタイルを書くよ。その領域の幅が400px以下なら、子孫のカードに指定が適用される。基準となる要素自身のサイズを条件にして、その基準となる要素自身を変更する仕組みではないんだ。
ひよこ 必ずすぐ上の親を見るの？
ペンギン先生 条件を調べられる、最も近い祖先要素が基準になるよ。container-nameで名前を付ければ、その名前と条件に合う祖先を指定できる。途中にある普通の要素が、そのままサイズの基準になるとは限らないんだ。
ひよこ cqwやcqhは何を表すの？
ペンギン先生 cqwは幅、cqhは高さを調べられる基準となる要素の寸法の1%だよ。ただし、各軸の条件に合う祖先を探すので、幅と高さで基準が同じとは限らない。適した祖先がなければ、その軸の小さいビューポートの寸法を使うんだ。
ひよこ inline-sizeなら高さも基準にできる？
ペンギン先生 inline-sizeは文字が並ぶ方向のサイズだよ。横書きなら幅だけをサイズの条件にでき、高さも扱うには「container-type: size」などの設計が必要になる。縦書きでは方向も変わる。既存のレイアウトへの影響と、使う機能の対象ブラウザーでの対応を確認しよう。
まとめ：ざっくりこれだけ覚えればOK！
「コンテナクエリ」って出てきたら「置かれた領域のサイズに合わせて表示を変えるCSS」と思えばだいたいOK！
📖 おまけ：英語の意味
「Container Queries」 ＝ コンテナへの問い合わせ
💬 要素の祖先にある領域について条件を調べる、という意味だよ。メディアクエリが画面寸法や利用者の設定などを調べるのに対し、コンテナクエリは要素の祖先を基準にするんだ。