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）要素はページに表示されなくなります。