要素をコンテナクエリのコンテナとして定義し、どの軸のサイズ変化を監視するかを指定するプロパティです。子要素がコンテナのサイズに応じてスタイルを変更できるようになります。
container-type: normal | size | inline-size| @container | container-type: inline-size |
名前付きコンテナは @container/{name}。問い合わせる子側は @sm: / @md: などのコンテナバリアントを使う(container-queriesの項を参照)。
container-type: inline-size;インライン方向のサイズ(幅)を監視
container-type: size;両方向のサイズ(幅と高さ)を監視
inline-sizeは横幅のみ監視(最も一般的)。sizeは幅と高さ両方を監視するが、無限ループの可能性があるため慎重に使用。container-nameと組み合わせて複数コンテナを管理できる。
container-typeを指定しないとコンテナクエリが動作しない。sizeを使う際は高さの循環参照に注意。
AIはinline-sizeとsizeの違いを曖昧に説明しがちです。通常はinline-size(幅のみ監視)が正解で、size(高さも監視)は要素自身に明示的な高さが必要になるため、安易に使うと子のコンテンツで高さが決まるレイアウトが壊れます。またcontainer-typeを指定した要素自身のサイズはコンテナクエリで参照できません(参照できるのは子孫から)。
このサイドバーをコンテナ化したい。inline-sizeとsizeのどちらを使うべきか理由付きで実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。