くまだどうも、くまだです。
CSSのコンテナクエリについてのあれこれ。
コンテナクエリについて
レスポンシブでは@mediaのメディアクエリを使って対応しますが、@containerというコンテナクエリを使うと、「ある要素の横幅が○○px以下のとき、子要素のスタイルを変更する」ということができます。
例えば、以下のような書き方になります。
<div class="box">
<div class="box2"></div>
</div>
.box {
width: 100%;
max-width: 500px;
height: 400px;
background-color: orange;
display: inline-flex;
align-items: center;
justify-content: center;
container-type: inline-size;
}
.box2 {
width: 100px;
height: 100px;
background-color: skyblue;
}
@container (min-width: 400px) {
.box2 {
width: 50px;
height: 50px;
background-color: blue;
}
}
See the Pen コンテナクエリ by kuma0605 (@kuma0605) on CodePen.
box要素の横幅が400px以下のとき、box2要素のスタイルが変わります。こんな感じで画面幅ではなく、要素の横幅に応じてスタイルを変えることができます。
container-typeでコンテナに指定することができます。指定したコンテナは、@containerで適用できます。
container-type: inline-size;@container (min-width: 400px) {
～～～
}container-typeは以下の値を取ることができます。
- normal：通常
- inline-size：インライン方向のサイズに応じる
- size：インライン方向とブロック方向のサイズに応じる
ちなみにコンテナには名前を指定することができます。使うときは@container 名前(){ }みたいな感じです。
.box {
container-type: inline-size;
container-name: box;
}
@container box (min-width: 400px) {
.box2 {
width: 50px;
height: 50px;
background-color: blue;
}
}コンテナ名とコンテナタイプをいっしょに書くこともできます。
.box {
container: box / inline-size;
}使い分けとしては、画面幅を基準に構造を可変させる場合はメディアクエリ。
コンテナを基準に細かい可変をさせる場合はコンテナクエリ、という感じでしょうか。
ここまで読んでくださりありがとうございました。