Sofia Emelianova
CSS コンテナクエリは、ウェブ デベロッパーにおすすめの新しい CSS 機能です。ページベースのレスポンシブ デザインからコンテナベースのレスポンシブ デザインまで、ウェブデザインに革命を起こす可能性があります。
Chrome DevTools を使用すると、新しいレイアウト デザイン パターンを採用して、最新のトレンドを常に把握できます。この CSS 機能のサポートにより、DevTools でコンテナクエリを検査してデバッグできるようになりました。
上の動画では、コンテナクエリの概要、構文、DevTools での検査方法について説明しています。
コンテナ要素とその子孫は、点線のオーバーレイを切り替える対応するバッジで見つけることができます。
コンテナがクエリ条件を満たす場合に、子孫に適用される @container ルールを検査します。
DevTools でのコンテナクエリのサポートについて詳しくは、CSS コンテナクエリの検査とデバッグをご覧ください。