このガイドでは、Chrome DevTools の [Elements] パネルで CSS コンテナクエリを調べてデバッグする方法について説明します。
CSS コンテナクエリを使用すると、親コンテナのプロパティに基づいて要素のスタイルを操作できます。この機能により、レスポンシブ ウェブ デザインのコンセプトがページベースからコンテナベースに変わります。
このガイドのスクリーンショットは、こちらのデモページのものです。
コンテナとその子孫を検出する
クエリコンテナとして定義されたすべての要素は、[Elements] パネルで要素の横に container
バッジが表示されます。バッジを使用すると、コンテナとその子孫の点線のオーバーレイが切り替わります。
オーバーレイを切り替えるには:
- DevTools を開きます。
- [Elements] パネルで、コンテナとして定義された要素の横にある
container
バッジをクリックします。
この例では、container-type: inline-size
プロパティがコンテナ要素を定義しています。子孫はインライン ディメンション(横軸)をクエリし、コンテナの幅に基づいてスタイルを変更できます。
コンテナクエリを検査する
クエリ宣言が子孫要素に適用された場合、つまりコンテナがクエリの条件を満たしている場合、[Elements] パネルには @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
宣言を調べるには:
- [Elements] パネルで、コンテナの幅を
500px
に設定します。p
要素が表示されます。 p
要素を選択します。[スタイル] ペインに、@container
宣言と、親コンテナarticle.card
へのリンクが表示されます。幅を
600px
より大きい値に設定し、影響を受ける要素を選択します。水平レイアウトを実装する@container
宣言を確認します。
コンテナ要素を検索する
クエリを有効にする原因となったコンテナ要素を見つけて選択するには、@container
宣言の上にある要素名にカーソルを合わせてクリックします。
名前にカーソルを合わせると、[Elements] パネル内の要素へのリンクに変わり、[Elements] ペインにクエリ対象のプロパティとその現在の値が表示されます。
コンテナクエリを変更する
クエリをデバッグするには、[スタイル] ペインで他の CSS 宣言と同様に変更できます。詳しくは、CSS の表示と変更をご覧ください。
この例では、コンテナの幅は 500px
です。段落(p
)要素がページに表示されます。
p
要素を選択します。[スタイル] ペイン。@container (inline-size > 400px)
宣言を確認できます。inline-size
を400px
から520px
に変更します。- クエリ条件を満たしていないため、段落(
p
)要素はページに表示されなくなります。