DevTools のヒント: CSS Flexbox の検査とデバッグを行う方法

Sofia Emelianova

Chrome DevTools では、CSS フレックスボックス レイアウトを直感的にデバッグできます。[要素] パネルには、コンテキストに応じた Flexbox エディタとカスタマイズ可能なオーバーレイが用意されています。

動画で次の方法を学びます。

• Flexbox エディタを使用すると、Flexbox プロパティを入力する代わりに、ボタンをクリックして変更できます。
• ビューポートで Flexbox のオーバーレイを切り替えると、変更内容がすぐに表示されます。
• [要素] > [レイアウト] > [Flexbox] セクションで、すべての要素のリストを表示し、DOM ツリーで要素を見つけます。また、ここでオーバーレイの色をカスタマイズすることもできます。

CSS Flexbox の一般的な詳細については、CSS の学習 > Flexbox をご覧ください。

DevTools でのデバッグについて詳しくは、CSS フレックスボックス レイアウトを検査してデバッグするチュートリアルをご覧ください。