このページは Cloud Translation API によって翻訳されました。

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

Sofia Emelianova

GitHub

Jecelyn Yeen

Twitter GitHub ホームページ

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

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

このガイドのスクリーンショットは、こちらのデモページから取得されています。

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

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

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

DevTools を開きます。
[要素] パネルで、コンテナとして定義された要素の横にある 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;
  }

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