CSS コンテナクエリの検査とデバッグを行う

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

このガイドでは、Chrome DevTools の [Elements] パネルで CSS コンテナ クエリを調査してデバッグする方法について説明します。

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

このガイドのスクリーンショットは、こちらのデモページから取得したものです。

コンテナとその子孫を検出する

クエリコンテナとして定義されたすべての要素は、[要素] パネルで要素の横に container バッジが表示されます。バッジを使用すると、コンテナとその子孫の点線のオーバーレイが切り替わります。

オーバーレイを切り替えるには:

  1. DevTools を開きます。
  2. [要素] パネルで、コンテナとして定義された要素の横にある container バッジをクリックします。

コンテナ バッジ。

この例では、container-type: inline-size プロパティがコンテナ要素を定義しています。子孫は、インライン ディメンション（横軸）をクエリし、コンテナの幅に基づいてスタイルを変更できます。

コンテナクエリを検査する

[要素] パネルには、@container クエリ宣言が子要素に適用された場合（つまり、コンテナがクエリの条件を満たしている場合）に、その宣言が表示されます。

こちらのデモページで @container 宣言を検査できるタイミングを把握するには、次のコードサンプルをご覧ください。

@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;
  }

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

  • 400px より大きい: 段落（p）要素は、ページにブロックとして表示されます。つまり、新しい行から始まり、幅全体が占有されます。
  • 600px より多い場合: 子孫は横方向のグリッド レイアウトを採用し、タイトル（h1）が上部、画像（img）が左側に配置されます。

最初の @container 宣言を調べるには:

  1. [要素] パネルで、コンテナの幅を 500px に設定します。p 要素が表示されます。

  2. p 要素を選択します。[スタイル] ペインには、@container 宣言と、親コンテナ article.card へのリンクが表示されます。

    @container 宣言。

  3. 幅を 600px より大きく設定し、影響を受ける要素を選択します。水平レイアウトを実装する @container 宣言を確認します。

    その他の @container 宣言。

コンテナ要素を見つける

クエリが有効になったコンテナ要素を見つけて選択するには、@container 宣言の上にある要素名にカーソルを合わせてクリックします。

要素名にカーソルを合わせる。

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

コンテナクエリを変更する

クエリをデバッグするには、CSS の表示と変更で説明されているように、[スタイル] ペインで他の CSS 宣言と同様に変更します。

この例では、コンテナの幅は 500px です。段落（p）要素がページに表示されます。

  1. p 要素を選択します。[スタイル] ペイン。@container (inline-size > 400px) 宣言を確認できます。
  2. inline-size を 400px から 520px に変更します。
  3. クエリ条件を満たしていないため、段落（p）要素はページに表示されなくなります。