レスポンシブ対応としてよくメディアクエリが使用されますが、コンテナクエリを利用することで、メディアクエリよりも柔軟なレイアウトが可能となります。
コンテナクエリは、今年（2023年）2月に全ブラウザ対応になりました。
親コンテナを基準に、スタイルをあてることができる新機能です。
メディアクエリとコンテナクエリの違いは以下となります。
このように、メディアクエリは画面幅が基準となりますが、コンテナクエリは任意の要素を基準にできます。
コンテナクエリを使用するために必要な手順は次のとおりです。
●基準にする要素の書き方
.box {;/*基準にしたい要素*/
container-type: inline-size;
container-name: box;/*任意の名前をつける*/
}※container-nameプロパティは、必要ない場合もあります。
●上記はショートハンドでも書けます。
container:box / inline-size;●コンテナクエリの書き方
@container box (min-width: 620px) {
.sample-box {
background-color: pink
}
}まとめると、以下になります。
.box {;/*基準にしたい要素*/
container-type: inline-size;
container-name: box;/*任意の名前をつける*/
}
@container box (min-width: 620px) {/*変更したい要素をコンテナクエリの中に記述*/
.sample-box {
background-color:pink
}
}次回は、コンテナクエリの簡単なデモで仕様を紹介します。
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
