主要ブラウザが対応になった！コンテナクエリって？
こんにちは。YUIDEAでマークアップエンジニアをしているtanabeです。
今回は2023年の中頃から主要ブラウザに対応したコンテナクエリについて、自分の学習がてらざっくり書かせていただきます。
※認識違いなどありましたらコメントなどで教えていただけたら幸いです！
使用可能なブラウザはCan I useからご確認いただけます。
コンテナクエリとは
ざっくりご説明すると、ビューポートの幅ではなく、コンテナの幅(親要素など)を基準にスタイルを変更できるcssです。
メディアクエリでビューポートを指定してレスポンシブ対応をしていましたが、要素レベルで指定ができるようになりました。
大まかにメディアクエリで調整し、細かい部分をコンテナクエリで調整するといった使い方が主流になるかと思います。
使用方法
基準となる要素を決め、container-typeプロパティでコンテナタイプを指定します。
値
normal：通常値
size：縦横のサイズに応じてスタイルを適応
inline-size：横のサイズに応じてスタイルを適応
コンテナクエリを適応させるための簡単なsourceを用意しました。
１）html、bodyの中身
<div class="content">
<h1>テキストと背景の色が変化します。</h1>
</div>２）styleの部分
.contentに「container-type」の指定をしています。
.content {
container-type: inline-size;
text-align: center;
margin: 50px auto 0;
width: 80%;
}
h1 {
width: 100%;
height: 70px;
line-height: 70px;
background-color: antiquewhite;
color: blue;
font-size: 18px;
}３）コンテナクエリの部分
@container (min-width: 600px) {
h1 {
background-color: aquamarine;
color: green;
font-size: 24px;
}
}４）上記のコードで下添付のGifのようになります。
メディアクエリとは
head内のmetaに表示領域を指定するビューポイント、
「<meta name="viewport" content="width=device-width,initial-scale=1">」を記述し、cssで@mediを記述することでブレークポイントを指定してデバイスの幅に合ったレイアウトに調整をする、レスポンシブ対応で欠かせないものです。
webサイト制作では「screen」を指定することがほとんどではないでしょうか。
メディアの種類
all：すべてのデバイスに適応。
print：プリンターや印刷プレビューに表示されるドキュメントなど。
screen：主にPCやスマホに適応。
speech：音声合成向け。
参考サイト
今回はコンテナクエリの記事なのでメディアクエリの方はsourceなど用意しませんでしたが、いかがでしたでしょうか。
メディアクエリで一生懸命レスポンシブ対応をしていましたが、コードが長くなりがちでした。コンテナクエリと併用しながら進めればコードを少しでも短くできるかもしれませんね。
この記事が気に入ったらサポートをしてみませんか？