FlexboxとGridのレイアウトインスペクター

Chrome DevToolsでは、ElementsパネルのDOMノードの横に「flex」バッジが表示され、フレックスコンテナであることが示されます。バッジをクリックすると、Flexboxオーバーレイの表示が切り替わります。色付きの線で主軸、副軸、アイテムの境界、gapの間隔が示されます。

グリッドコンテナには「grid」バッジが表示されます。クリックするとグリッドオーバーレイが切り替わり、列、行、gapを示す色付きの線が表示されます。Layoutパネルで固定した永続オーバーレイは、ビューポートをスクロールまたはリサイズしても表示され続けます。

DevTools → Elements → Layoutタブには、ページ上のすべてのフレックスコンテナとグリッドコンテナが一覧表示されます。コンテナ名をクリックすると、DOMでそのコンテナが選択され、オーバーレイの表示が切り替わります。オーバーレイの外観（線の色、ラベルの表示、トラックサイズ）はここで設定できます。

「Show track sizes」を有効にすると、オーバーレイにトラック名とサイズが表示されます。固有サイズ（auto、min-content、max-content）と分数単位（fr）には、解決後のピクセル値が表示されます。これにより、fr単位が利用可能な空間をどのように分割しているかを確認できます。

フレックスコンテナの子要素であるフレックスアイテムを選択します。スタイルパネルには、flexのショートハンドの展開結果として、flex-grow、flex-shrink、flex-basisが表示されます。オーバーレイでは、アイテムの主軸方向のサイズ、基底サイズ、適用された拡張または縮小が強調表示されます。

grid-template-areasを使用するグリッドコンテナには、名前付き領域のオーバーレイが表示されます。各名前付き領域にはラベルが付けられ、色分けされます。この表示により、grid-areaの割り当てが意図したレイアウトテンプレートと一致しているかを簡単に確認できます。

DevToolsでは、サブグリッドをサポートするコンテナが明確に示されます。サブグリッドのトラックラインは親グリッドのトラックに揃い、オーバーレイでこの配置が視覚的に表示されます。これにより、サブグリッドのアイテムが親グリッドの座標系に参加していることを確認できます。

アイテムの配置がずれる原因は、justify-content、align-items、align-selfの値が正しくないことがよくあります。フレックスおよびグリッドのオーバーレイには、軸のラインを基準にしたアイテムの位置が表示されます。スタイルパネルで配置プロパティを切り替え、オーバーレイの変化をリアルタイムで確認してみてください。

オーバーレイでは、アイテム間のギャップが色付きの帯として表示されます。これにより、gapの値を簡単に確認し、間隔がgap（正しい方法）によるものか、margin（フレックス行では予期せずマージンが相殺される可能性があります）によるものかを見分けられます。

グリッドオーバーレイでは、暗黙的トラック（オーバーフローするアイテムのために自動作成されるトラック）と、明示的トラック（grid-templateで定義されたトラック）が区別されます。暗黙的トラックは破線で示されます。コンテンツによって予期しない暗黙的トラックが作成された場合、オーバーレイでオーバーフローのパターンをすぐに確認できます。

Layout InspectorをDevice Modeと組み合わせて使用します。ビューポートのサイズを変更し、フレックスの折り返しやグリッドのauto-fill/auto-fitトラックがリアルタイムで再配置される様子を確認します。これにより、ブラウザウィンドウを手動でサイズ変更するよりも早く、レスポンシブレイアウトの崩れを見つけられます。

DevToolsのグリッドオーバーレイには、レンダリングされたページでは確認できないどのような情報が表示されますか？

DevToolsのFlexboxおよびGrid Layout Inspectorでは、軸のライン、トラックサイズ、ギャップ、名前付き領域、暗黙的トラックがインタラクティブなオーバーレイとして可視化されます。オーバーレイを管理するLayoutパネルと組み合わせることで、複雑なCSSレイアウトをCSSだけで読み解くよりも速く、直感的にデバッグできます。