トップページ > ブログ > 【CSS】レスポンシブデザインがより柔軟に! コンテナクエリ( @container)について

BLOG

ブログ

UPDATE:2023.12.15

CATEGORY

【CSS】レスポンシブデザインがより柔軟に! コンテナクエリ( @container)について

2023年ももうすぐ終わりますが、今年もブラウザには様々な便利機能が実装されました。

今回は2023年の初めの頃に各種ブラウザに実装された
レスポンシブデザインを便利にする「コンテナクエリ」についてまとめてみました。


@container
https://developer.mozilla.org/en-US/docs/Web/CSS/@container

「コンテナクエリ」とは


例えばレスポンシブデザインを実装する時、今までは主に「メディアクエリ」を利用してきました。

「コンテナクエリ」は「メディアクエリ」同様、レスポンシブデザインを実装するのに利用します。

しかし当然両者には違いがあります。



「メディアクエリ」と「コンテナクエリ」の違い


・メディアクエリ…表示サイズの幅(画面やブラウザのサイズ等)を元に適用するCSSスタイルを切り替える

・コンテナクエリ…コンテナ(祖先要素)を元に適用するCSSスタイルを切り替える

メディアクエリを設定することでスマホ・PC・タブレットと画面サイズに合わせてCSSを切り替えることができますが、
コンテナクエリを使うとより柔軟な条件でCSSを切り替えることが可能となります。


例えば、メディアクエリの切り替えで「1200px以下になったら別のCSSスタイルを適用させる」としたとき、
ギリギリ1210pxとかの幅の時に、デザインの一部分で若干見栄えが良くない瞬間があったりしますよね。
(情報量の多いメニューなど、画面幅が小さくなるとカラム落ちしてデザインが崩れてしまったり……)

ごく一部のデザインの崩れのためにメディアクエリのサイズを増やすのもなんだか……と、
そういう時にコンテナクエリが活躍するのではないでしょうか。




コンテナクエリの記述方法(基本的な記述)


①基準になるセレクタに「container-typeプロパティ」を記述

【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 プロパティを設定してコンテナ名を定義することも可能です。


最後に

より柔軟にレスポンシブが可能となったコンテナクエリ、今後もうまく使って行きたいですね。

Happiness in Design

シアワセをデザインする会社

営業ゼロで年間600件以上
お問い合わせをいただいている
ノウハウを惜しみなく。

アプリコットデザインには創業当初から営業マンはいません。
創業当初からWEBを活用することに重点を置いて、これまで試行錯誤してきました。その結果、年間600件以上の問い合わせををこのホームページから得ています。ホームページという集客ツールを提供している私たち自身が、自社のホームページで集客できないのでは、お客様に自信を持ってオススメすることはできません。自社の実験から「WEBを活用して集客するためのノウハウを蓄積」した上で、誰よりもホームページの素晴らしさを知り、自信をもってお客様にご提供していきたいと考えます。

VIEW MORE

CONTACT

お問い合わせ・ご相談は
お気軽にどうぞ。

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

プロジェクト

それぞれの
らしさ溢れる日常を。

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ/ドッグサロン/
ネイルサロン/スクール

tone village

We're open.

採用情報

recruit info

豊かで彩りのある社会をつくる!

私たちは仕事を通して、一人でも多くの人が未来に対する希望を描けるような、そんなワクワクする社会をつくっていきたいと思っています。

VIEW MORE