CSSの実装はコンテナクエリで大きく変わる！コンテナクエリをデベロッパーツールで検証およびデバッグする方法

Post on:2022年7月15日

はじめに

この記事では、ChromeのデベロッパーツールでCSSコンテナクエリを検証およびデバッグする方法について解説します。

CSSのコンテナクエリを使用すると、親コンテナのプロパティに基づいて要素のスタイルを設定することができます。この新機能により、レスポンシブWebデザインのコンセプトが、今までのページベースからコンテナベースに変わります。

コンテナクエリは2022年7月現在、実験的な機能です。デベロッパーツールでコンテナクエリのサポートを有効にするには、「chrome://flags」で「Enable CSS Container Queries」を「Enabled（有効）」にします。

コンテナクエリについてさらに詳しく学びたい人は、以前の記事をご覧ください。

コンテナクエリをすぐに使いたいという人にはポリフィルも用意されています。

CSSの新機能コンテナクエリのポリフィルがこれほど使いやすく、Googleから提供されたことは素晴らしい

コンテナとその子孫を見つける

クエリコンテナとして定義されたすべての要素は、Elements（要素）パネルでcontainerバッジが表示されます。このバッジを選択すると、コンテナとその子孫を点線のオーバーレイで囲みます。

オーバーレイを表示するには、

デベロッパーツールを開く。
Elements（要素）パネルで、コンテナとして定義されている要素の横にあるcontainerバッジをクリックする。

1. デベロッパーツールを開く。

2. containerバッジをクリックする。

この例では、container-type: inline-size;プロパティがコンテナ要素を定義しています。子孫はその水平軸を照会し、コンテナの幅に基づいてスタイルを変更できます。

コンテナ要素は.cardに定義されている。

コンテナクエリを確認する方法

Elements（要素）パネルでは@containerクエリ宣言が子孫要素に適用されたとき、つまりコンテナがクエリの条件を満たしたときに表示されます。

コンテナクエリ用のデモページを用意したので、実際に確認してみてください。主要なCSSは、下記のようになっています。

@container (inline-size > 400px) {
  .coffee p {
    display: block;
  }
}

@container (inline-size > 600px) {
  .coffee {
    display: grid;
    grid-template-columns: 280px auto;
  }

  .coffee h1 {
    grid-column: 1/3;
  }

  .coffee img {
    grid-row: 2/4;
  }

@container (inline-size > 400px) {

.coffee p {

display: block;

}

@container (inline-size > 600px) {

.coffee {

display: grid;

grid-template-columns: 280px auto;

}

.coffee h1 {

grid-column: 1/3;

}

.coffee img {

grid-row: 2/4;

}

このデモでは、コンテナの幅が次のピクセル数を超えると、それに対応するスタイルが適用されます。

400ｐｘ以上: p要素はブロックとして表示されます。新しい行から始まり、幅全体を占めます。
600ｐｘ以上: 水平のグリッドレイアウトが適用され、h1要素は上部に、img要素は左側に配置されます。

1つ目の@container宣言を検証してみます。

Elements（要素）パネルで、コンテナの幅を500pxに変更します。これでp要素が表示されます。
p要素を選択します。Style（スタイル）ペインに@container宣言と親コンテナarticle.cardへのリンクが表示されているのが確認できます。
コンテナの幅を600px以上に変更し、影響を受ける要素のいずれかを選択します。水平レイアウトを実装する@container@container宣言を確認してください。