CSSのコンテナクエリについて

以前から存在は知っていたのですが、しっかりと学んだことがなかったので今回記事にまとめながら自分でも理解を深めるためにコンテナクエリについて調べてみました。

コンテナクエリは今までのメディアクエリとは異なり「画面サイズ」ではなく「親要素のサイズ」に基づいてスタイルを切り替える仕組みです。

現在主流のコンポーネントベースでの開発では、コンテナクエリをマスターすることでより楽に実装が可能になります。

コンテナクエリの使い方

まずは、簡単なデモを通してコンテナクエリについての理解をしていきます。

HTMLは下記のようにします。

<div class="container">
  <p class="child">The text color turns red when the width is 500px or more.</p>
</div>

.containerの要素の幅が500px以上のときに、p要素の文字の色を赤色に変化させます。

コンテナクエリを使うための手順はこちらです。

コンテナを決定する（container-type）

コンテナとなるクラスにcontainer-typeプロパティを指定します。必ず親である必要はなく祖先要素であればOKです。

.container {
　container-type: 〇〇;
}

コンテナの基準の方向を指定する（inline-size / size）

どの方向を基準にしてスタイルをあてるかを決めます。

• container-type: inline-size;
  • インライン方向のサイズに適用
• container-type: size;
  • インライン方向・ブロック方向のサイズに適用

インライン方向・・・横幅を指します
ブロック方向・・・縦幅（高さ）を指します

オカ

container-type: size;の使い所がわからない。
多くはcontainer-type: inline-size;で良さそう。

クエリを書く（@container）

下記のように@containerと書いてスタイルを定義します。

@container (min-width: 500px) {
  .child {
    background-color: red;
  }
}

あわせて読みたい

Container query ...

まとめ

なんとなく使い方についてはわかったのであとは実際にプロジェクトで使ってみて便利な使い方などがわかってきたらブログを更新していければと思います！