CSS グリッドを検査する

[アーティクル]
11/07/2024

この記事では、Web サイト上の CSS グリッドを識別し、カスタマイズ可能なグリッドオーバーレイを使用してグリッドレイアウトの問題をデバッグする方法について説明します。

この記事では、 CSS グリッドの検査のデモ Web ページを使用します。

開始する前に

CSS Grid は、Web の強力なレイアウトパラダイムです。 CSS Grid とその機能について学ぶのに適した Web ページは、MDN での CSS グリッドレイアウトです。

CSS グリッドを検出する

Web ページの HTML 要素にdisplay: gridまたはdisplay: inline-gridが適用されている場合、要素ツールの DOM ツリーの要素の横にグリッド バッジが表示されます。

グリッドの検出

要素の横にある グリッド バッジをクリックすると、レンダリングされた Web ページでその要素の上にグリッドオーバーレイが表示されます。オーバーレイが要素の上に表示され、グリッド線とトラックの位置が表示されます。

グリッドバッジの切り替え

グリッドが Web ページに含まれている場合、[要素] ツールの [レイアウト] ウィンドウには、グリッドコンテナーを一覧表示する [グリッド] セクションが含まれます。

[レイアウト] ウィンドウ

[グリッド] セクションを使用して、レンダリングされた Web ページのグリッドオーバーレイに表示する情報を構成します。 [レイアウト] ウィンドウの [グリッド] セクションには、次のサブセクションが含まれています。

款	用途
オーバーレイ表示設定	グリッドオーバーレイに表示される情報を構成します。
グリッドオーバーレイ	Web ページに存在する各グリッドコンテナーのグリッドオーバーレイを表示または非表示にし、Web ページ内のグリッドを一時的に強調表示します。

オーバーレイ表示設定

[ レイアウト ] ウィンドウの [展開可能な グリッド ] セクションの [ オーバーレイ表示設定 ] セクションには、次の UI が含まれています。

ドロップダウンリストから次のいずれかのオプションを選択します。

リストアイテム	説明
線ラベルを非表示にする	各グリッドオーバーレイの線のラベルを非表示にします。
行番号を表示する	グリッドオーバーレイごとの線の番号を表示します。既定で選択されています。
行名を表示する	各グリッドオーバーレイの線の名前を表示します(名前が指定されている場合)。

次のセクションでは、 オーバーレイ表示設定 ドロップダウンリストコマンドについて説明します。

線ラベルを非表示にする

ドロップダウンリストで、[ 線ラベルを非表示にする ] を選択して、グリッドオーバーレイごとに線のラベルを非表示にします。

線ラベルを非表示にする

行番号を表示する

ドロップダウンリストで、[ 行番号の表示 ] を選択して、各グリッドオーバーレイの行番号を表示します (既定で選択されています)。

行番号を表示する

既定では、正と負の行番号がグリッドオーバーレイに表示されます。グリッドオーバーレイの負の数値の詳細については、「MDN での行ベースの配置を使用したグリッドレイアウトでの後方カウント」を参照してください。

行名を表示する

ドロップダウンリストで、[ 行名の表示 ] を選択して、番号ではなく行名を表示します。これにより、各グリッドオーバーレイの行の名前が表示されます(名前が指定されている場合)。

行名を表示する

上の例では、 left、 middle1、 middle2、 rightの 4 行の名前があります。

グリッドオーバーレイの行名の詳細については、「MDN での名前付きグリッド線を使用したレイアウト」を参照してください。

チェックボックス

[レイアウト] ウィンドウの [グリッド] セクション内の [オーバーレイ表示設定] セクションには、次のチェックボックスが表示されます。

チェックボックス	説明
トラックサイズを表示する	トラックのサイズを表示または非表示にします。
エリア名を表示する	名前が指定されている場合、領域の名前を表示または非表示にします。
グリッド線を拡張する	各軸に沿ってグリッド寸法の延長を表示または非表示にします。既定では、グリッド線は要素内でのみ表示され、 `display: grid` または CSS `display: inline-grid` 設定されます。

次のセクションでは、これらのチェックボックスについて説明します。

トラックサイズを表示する

グリッドのトラックサイズを表示するには、[ トラックサイズの表示 ] チェックボックスをオンにします。

トラックサイズを表示する

その後、 [authored size] と [computed size] が各行ラベルに表示されます。

Size	詳細
作成されたサイズ	スタイルシートで定義されているサイズ (定義されていない場合は省略)。
計算されたサイズ	画面上の実際のサイズ。

デモでは、 snack-box 列のサイズは grid-template-columns:1fr 2fr; CSS で定義されています。したがって、列の線ラベルには、作成されたサイズと計算されたサイズの両方が表示されます。

トラックサイズ	作成されたサイズ	計算されたサイズ
1fr • 48.33px	1fr	48.33px
2fr • 96.67px	2fr	96.67px

行の行ラベルには、スタイルシートで定義されている行サイズがないため、計算されたサイズのみが表示されます。

トラックサイズ	作成されたサイズ	計算されたサイズ
40px		40px
40px		40px

エリア名を表示する

エリア名を表示するには、[ 領域名を表示 する] チェックボックスをオンにします。

エリア名を表示する

上の例では、グリッドには上、下 1、および下 2 の 3 つの領域があります。

グリッド線を拡張する

グリッド線を各軸に沿ってビューポートの端まで延長するには、[ グリッド線を拡張 ]チェックボックスをオンにします。

グリッド線を拡張する

グリッドオーバーレイ

[ グリッドオーバーレイ ] セクションには、Web ページに表示されるグリッドの一覧が含まれています。それぞれにチェックボックスが付き、さまざまなオプションが表示されます。

複数のグリッドのオーバーレイビューを有効にする

複数のグリッドのオーバーレイグリッドを表示するには、グリッドの各名前の横にあるチェックボックスをオンにします。

複数のグリッドのオーバーレイビューを有効にする

上記の例では、3 つのグリッドオーバーレイが有効になっており、各グリッドはレンダリングされた Web ページで異なる色で表されています。

body - ゴールドグリッドオーバーレイ。
div.fruit-box - ピンクのグリッドオーバーレイ。
div.snack-box - 青いグリッドオーバーレイ。

グリッドオーバーレイの色をカスタマイズする

カラーピッカーを開き、グリッドオーバーレイの色をカスタマイズするには、グリッドオーバーレイの名前の横にあるボックスをクリックします。

グリッドオーバーレイの色をカスタマイズする

Web ページと DOM ツリーでグリッド要素を強調表示する

レンダリングされた Web ページのグリッドレイアウトまでスクロールし、DOM ツリーでグリッドレイアウトを持つ要素を選択するには:

[ グリッドオーバーレイ ] セクションで、要素名の横にある [ 要素] パネル ([要素] パネル] ) ボタンをクリックします。

レンダリングされた Web ページのグリッドを強調表示する

これは、要素のチェックボックスがオンかオフかに関係なく機能します。

次の方法で共有

CSS グリッドを検査する

開始する前に

CSS グリッドを検出する