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