2023年ももうすぐ終わりますが、今年もブラウザには様々な便利機能が実装されました。
今回は2023年の初めの頃に各種ブラウザに実装された
レスポンシブデザインを便利にする「コンテナクエリ」についてまとめてみました。
@container
https://developer.mozilla.org/en-US/docs/Web/CSS/@container
「コンテナクエリ」とは
例えばレスポンシブデザインを実装する時、今までは主に「メディアクエリ」を利用してきました。
「コンテナクエリ」は「メディアクエリ」同様、レスポンシブデザインを実装するのに利用します。
しかし当然両者には違いがあります。
「メディアクエリ」と「コンテナクエリ」の違い
メディアクエリを設定することでスマホ・PC・タブレットと画面サイズに合わせてCSSを切り替えることができますが、
コンテナクエリを使うとより柔軟な条件でCSSを切り替えることが可能となります。
例えば、メディアクエリの切り替えで「1200px以下になったら別のCSSスタイルを適用させる」としたとき、
ギリギリ1210pxとかの幅の時に、デザインの一部分で若干見栄えが良くない瞬間があったりしますよね。
（情報量の多いメニューなど、画面幅が小さくなるとカラム落ちしてデザインが崩れてしまったり……）
ごく一部のデザインの崩れのためにメディアクエリのサイズを増やすのもなんだか……と、
そういう時にコンテナクエリが活躍するのではないでしょうか。
コンテナクエリの記述方法（基本的な記述）
①基準になるセレクタに「container-typeプロパティ」を記述
・normal：通常の動作
・size：インライン軸（横幅）とブロック軸（縦幅）を基準にする
・inline-size：インライン軸（横幅）を基準にする
コンテナタイプ
②@containerルールを記述する
(書き方は基本的にメディアクエリと同じ）
以下は記述例です。
【HTML】
〈div class="parent"〉〈!-- ※基準となるセレクタ --〉
〈div class="child"〉子要素〈/div〉
〈/div〉
【CSS】
.parent {//基準となるセレクタ
container-type:inline-size;
}
@container (min-width:1000px) {//1000px以上の時に以下を適用するルール
.child {
color: #f00;
}
}
他、container-name プロパティを設定してコンテナ名を定義することも可能です。
最後に
より柔軟にレスポンシブが可能となったコンテナクエリ、今後もうまく使って行きたいですね。
JOURNALが気に入ったら「いいね」してね！
・コンテナクエリ…コンテナ（祖先要素）を元に適用するCSSスタイルを切り替える