レスポンシブの新たなる手法、コンテナクエリの基本を試す

こんにちは森田です。
先日やっとFirefoxが対応され、待望のコンテナクエリ（CSS Container Queries）が全てのモダンブラウザ対応となりました。
レスポンシブの書き方が変わるコンテナクエリがいよいよ使えるようになりましたね。

今回はコンテナクエリの概要と基本機能を試したいと思います。

CSSコンテナクエリとは

参考：CSS Container Queries – CSS: Cascading Style Sheets | MDN

コンテナクエリとはレスポンシブデザインの新しい手法です。

ウィンドウ幅でスタイルを適用するメディアクエリ（@media）と違い、コンテナクエリ（@container）は、スタイルが適用される対象がコンテナ幅です。

対応ブラウザ

記事冒頭でも書きましたが、現在主要なブラウザは全て対応し、すでに使うことができます。

コンテナクエリの使用方法

コンテナクエリは＠ルールと、3つのCSSプロパティ（1つはショートハンド）が存在します。

@container ルール

@container ルールはコンテナサイズを条件として記述し、ネストした中にCSSルールセットを記述します。
基本的には @media ルールと同じ書き方です。

@container <container-condition> {
  <stylesheet>
}

/* コンテナが 700px より大きい場合 */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

container-type プロパティ

container-type プロパティはコンテナのタイプを定義します。

.container {
  container-type: inline-size;
}

値は3つあり、

• inline-size : インライン軸（基本的に横幅）を基準とします
• size : インライン軸とブロック軸（縦横幅）を基準とします
• normal : 基本値（通常動作）

があります。横幅を基準とすることが多いと思うので inline-size が使われることが多いでしょう。

container-name プロパティ

container-name プロパティはコンテナ名を定義することができます。

container-type: <type>;

.post-excerpt {
  container-type: inline-size;
  container-name: nav;
}

@container nav (min-width: 400px) {
  p {
    visibility: hidden;
  }
}

container-name プロパティは必須ではありません。
無い場合は最も近いコンテナ指定された祖先要素をコンテナとします。

container プロパティ

container プロパティは container-type と container-name のショートハンドです。

container: <container-name> / <container-type>;

.post-excerpt {
  container: nav / inline-size;
}

コンテナクエリを試す

超簡単ですがコンテナクエリを試してみました。

See the Pen CSS Container Query TEST by Sou (@sou-lab) on CodePen.

デベロッパーツールで横幅を変更すると子要素である .child の背景色が変わるのがわかります。

まとめ

コンテナクエリによってレスポンシブの書き方が変わりますね。
特にコンポーネントごとに開発する場合などは便利になること間違いなしです。

また、今まではウィンドウの横幅ごとに作られていたデザインも、コンテナクエリによってコンポーネントの幅や状況に合わせたデザインを作れるようになります。

コンテナクエリはこれからどんどん使っていこうと思っております。

関連リンク

• CSS Container Queries – CSS: Cascading Style Sheets | MDN
• CSS Container Query Units | Can I use
• https://w3c.github.io/csswg-drafts/css-contain-3/#container-queries