CSS
コンテナクエリ
読み方：コンテナクエリ
親要素のサイズに応じてスタイルを変える仕組み。メディアクエリの要素版。
やさしい説明
コンテナクエリは、親要素のサイズに応じてスタイルを変える仕組みです。
メディアクエリが「画面幅」で判断するのに対し、コンテナクエリは「親要素の幅」で判断します。
具体例・使い方
container-type: inline-size → 親をコンテナとして定義
@container (min-width: 400px) { ... } → 親が400px以上のとき
関連用語
📖 関連レッスン
レッスンを見る →