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

Webのレスポンシブは、メディアクエリによるページベースだけでなく、コンテナクエリによる親コンテナベースの実装ができるようになります。

このCSSの新機能コンテナクエリによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。Googleのデベロッパーによるコンテナクエリをデベロッパーツールで検証およびデバッグする方法を紹介します。

CSSコンテナクエリをデベロッパーツールで検証およびデバッグする方法

Inspect and debug CSS container queries
by Sofia Emelianova, Jecelyn Yeen

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様のライセンスに基づき翻訳しています。

はじめに

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

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

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

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

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

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

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

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

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

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

コンテナとして定義されている要素の横にあるcontainerバッジ

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

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

コンテナ要素のCSS

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

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

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

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

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

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

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

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

1. コンテナの幅を500pxに変更

@container宣言を検証

1. p要素が表示される

@container宣言を検証

2. p要素を選択

@container宣言を検証

3. コンテナの幅を610pxに変更

@container宣言を検証

3. 水平レイアウトになる

@container宣言を検証

3. 幅を変更したので、適用されるスタイルも変更される

コンテナ要素を検索する方法

クエリを実行したコンテナ要素を検索して選択するには@container宣言の上にある要素名にカーソルを合わせてクリックします。

コンテナ要素の検索

コンテナクエリの確認

コンテナ要素の検索

@container宣言の上にある要素名にカーソルを合わせる

カーソルを合わせると、名前がElements(要素)パネル内の要素へのリンクに変わり、Style(スタイル)ペインにクエリされたプロパティとその現在の値が表示されます。

コンテナクエリをデバッグする方法

コンテナクエリをデバッグする方法は、他のCSSと同じようにStyle(スタイル)ペインでデバッグします。

コンテナクエリをデバッグする方法

Style(スタイル)ペインでコンテナクエリをデバッグ

この例では、コンテナの幅は500pxです。400px以上なので、p要素が表示されます。

  1. p要素を選択します。Style(スタイル)ペインで@container (inline-size > 400px)を確認してください。
  2. inline-size400pxから520pxに変更します。
  3. p要素はクエリ条件を満たしていないため、ページから消えます。
コンテナクエリをデバッグする方法

1. @container (inline-size > 400px)を確認

コンテナクエリをデバッグする方法

3. 520pxに変更すると、p要素が消える

sponsors

top of page

©2022 coliss