CSS グリッドレイアウトを検査する

[要素] ツール内の [レイアウト] タブを使用して、Web サイト上の CSS グリッドを特定し、カスタマイズ可能なグリッドオーバーレイを使用してグリッドレイアウトの問題をデバッグします。

詳細な内容:

レンダリングされた Web ページにグリッドオーバーレイを表示する
グリッド項目とその内容を揃える: グリッドエディターのポップアップ
グリッド表示オプション
オーバーレイ表示設定
グリッドオーバーレイ
関連項目

レンダリングされた Web ページにグリッドオーバーレイを表示する

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

レンダリングされた Web ページでグリッドオーバーレイを使用するには:

CSS Grid レイアウトを使用するページに移動します (CSS グリッドレイアウトの検査デモページなど)。
Web ページを右クリックし、[ 検査] を選択します。

DevTools が開き、[ 要素 ] ツールが選択され、DOM ツリーが表示されます。
DOM ツリーで、body>main を展開します。

<div>要素にはグリッド バッジがあります。

Web ページ内の HTML 要素にdisplay: gridまたはdisplay: inline-gridが適用されている場合、要素ツールの DOM ツリーの要素の横にグリッド バッジが表示されます。
要素の横にある グリッド バッジ ( <div class="fruit-box">など) をクリックします。

グリッドオーバーレイは、レンダリングされた Web ページ内の要素の上に表示されます。 グリッド バッジは、白い背景の青いテキストから、青い背景の白いテキストに変わります。

レンダリングされた Web ページでは、CSS グリッドオーバーレイが Web ページ要素の前のレイヤーに表示されます。 CSS グリッドオーバーレイには、グリッド線 (行と列) とトラックの位置が表示されます。

グリッド バッジを複数回クリックすると、オンとオフが切り替わります。

同様に、 サブグリッド バッジが存在する場合もあります。サブグリッドバッジをクリックすると、サブグリッド上の GSS Grid オーバーレイを切り替えることができます。 MDN のサブグリッドに関するページを参照してください。
[レイアウト] タブをクリックします。これは、[要素] ツールの [スタイル] タブでグループ化されます。

[ レイアウト ] タブには、[ グリッド/ グリッドレーン ] セクションがあります。これには次のものが含まれます。
- ドロップダウンリスト。
- 表示オプションのチェックボックス。
- CSS グリッドレイアウトを使用する各要素のチェックボックス。
Web ページで CSS グリッドを使用する場合、[ レイアウト ] タブには [ グリッド/ グリッドレーン ] セクションが含まれます。 [グリッド/グリッドレーン] セクションを使用して、レンダリングされた Web ページのグリッドオーバーレイに表示する情報を構成します。

CSS ルールを直接定義するのではなく、ボタンをクリックするだけで CSS グリッド項目とそのコンテンツを配置できます (グリッドエディターのポップアップを開く)。

CSS グリッド項目とその内容を揃えるには:

上記の「レンダリングされた Web ページにグリッドオーバーレイを表示する」の手順を実行します。

その結果、グリッド バッジを持つ DOM ツリー (<div class="fruit-box"> など) 内の要素の [レイアウト] タブが選択されます。
[ スタイル ] タブを選択します。
[ グリッドエディターを開く ] ボタンを持つ CSS ルール ( .fruit-box ルールなど) を見つけます。
CSS ルールの [ display: grid] の横にある [ グリッドエディターを開く ] ボタンをクリックします。

グリッドエディターのポップアップが開きます。

グリッドエディター ポップアップには、オプションとして 4 つのボタンセットが含まれています。
- align-content
- justify-content
- align-items
- justify-items
ボタンの各セット内では、ボタンは相互に排他的なオプションボタンです。オプションボタンを 2 回クリックすると、そのセットでオプションボタンが選択されておらず、値は標準に戻ります。
グリッドエディターのポップアップで、任意のボタンセットでボタンをクリックします。通常の状態に戻すには、ボタンを 2 回クリックします。

ボタンの前景色が黒から青に変わり、値が標準から選択した値に変わります。

グリッド項目とコンテンツがビューポートに再レンダリングされます。

グリッド表示オプション

[レイアウト] ウィンドウの [グリッド/ グリッドレーン] セクションには、次の 2 つのサブセクションが含まれています。

オーバーレイ表示設定
グリッドオーバーレイ

詳細は以下のとおりです。

オーバーレイ表示設定

[要素] ツールの [レイアウト] ウィンドウの [展開可能なグリッド/ グリッドレーン] セクションには、[オーバーレイ表示設定] サブセクションがあります。

オーバーレイ表示設定サブセクションは、次の 2 つの部分で構成されます。

次のコマンドを含むドロップダウンリスト。
- [線ラベルを非表示にする ] - 各グリッドオーバーレイの線ラベルを非表示にします。
- [行番号の表示 ] - 各グリッドオーバーレイの行番号を表示します (既定で選択されています)。
- [線名を表示する] - 線名を持つグリッドの場合は、各グリッドオーバーレイの線名を表示します。
チェック：
- トラックサイズの表示 - トラックサイズの表示/非表示を切り替えます。
- [領域名の表示 ] - グリッド領域の名前が付いたグリッドの場合は、領域名の表示/非表示を切り替えます。
- グリッド線の拡張 - 既定では、グリッド線は、 display: grid または display: inline-grid 設定されている要素内にのみ表示されます。このオプションをオンにすると、グリッド線は各軸に沿ってビューポートの端まで延長されます。

詳細は以下のとおりです。

行番号を表示する

表示された Web ページのグリッドオーバーレイで行番号 (行と列) を表示または非表示にすることができます。 CSS Grid では、 行番号 を使用して、CSS グリッドの行と列を区切る垂直線と水平線を識別します。これらの行番号は、HTML ソースファイル内のコード行用ではありません。

グリッドオーバーレイで行番号 (行と列) を表示または非表示にするには:

上記の「レンダリングされた Web ページにグリッドオーバーレイを表示する」の手順を実行します。
[グリッド/グリッドレーン] セクション>[オーバーレイ表示設定] サブセクション>[行ラベルの表示] ドロップダウンリストで、[行番号の表示] を選択します。これは既定で選択されています。

各グリッドオーバーレイの行 (行と列) の番号が表示されます。

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

線ラベルを非表示にする

グリッドオーバーレイで線ラベルを非表示にするには:

上記の「レンダリングされた Web ページにグリッドオーバーレイを表示する」の手順を実行します。
[グリッド/グリッドレーン] セクション>[オーバーレイの表示設定] サブセクション>[行ラベルの表示] ドロップダウンリストで、[線ラベルを非表示にする] を選択します。

すべてのグリッドオーバーレイで、行 (行/列) のラベルは非表示になります。

行名を表示する

レンダリングされた Web ページのグリッドオーバーレイで、行名を表示できます。これにより、要素の開始位置と終了位置を簡単に視覚化できます。

グリッドオーバーレイに線の名前を表示するには:

上記の「レンダリングされた Web ページにグリッドオーバーレイを表示する」の手順を実行します。
[グリッド/グリッドレーン] セクション>[オーバーレイの表示設定] サブセクション>[行ラベルの表示] ドロップダウンリストで、[行名の表示] を選択します。

番号の代わりに行名が表示されます。このオプションでは、グリッドオーバーレイごとに行の名前が表示されます (名前が指定されている場合)。

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

デモでは、オレンジ色の要素は、と CSS ルールをして、左から右に広がります。

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

レンダリングされた Web ページのグリッドオーバーレイで、トラックサイズを表示できます。

グリッドオーバーレイにトラックサイズを表示するには:

上記の「レンダリングされた Web ページにグリッドオーバーレイを表示する」の手順を実行します。
[ 要素 ] ツールの [ レイアウト ] タブの [ グリッド/ グリッドレーン ] セクションの [ グリッド/ グリッドレーンオーバーレイ ] サブセクションで、グリッドオーバーレイを表示する各要素のチェックボックスをオンにします。たとえば、[ div.fruit-box と div.snack-box] の横にあるチェックボックスをオンにします。
[Grid/Grid Lanes]\(グリッド/グリッドレーン\) セクション>[Overlay display settings]\(表示設定\) サブセクションで、[トラックサイズを表示する] チェックボックスをオンにします。

各行ラベルには、(CSS で定義されている場合) authored size と computed sizeが表示されます。

Size	詳細
`authored size`	CSS スタイルシートで定義されているサイズ。定義されていない場合は、ラベルから省略されます。
`computed size`	画面上の実際のサイズ。

デモでは、CSS プロパティ grid-template-columnsで列サイズを次のように定義します。

.fruit-box {
  display: grid;
  grid-template-columns: [left] 1fr [middle1] 1fr [middle2] 1fr [right];
  ...
}

.snack-box {
  display: grid;
  grid-template-columns: 1fr 2fr;
  ...
}

列ラベル:

デモの要素 <div class="snack-box">のグリッド列には、次のトラックサイズの線ラベルが表示されます。

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

コンピューターのディスプレイが異なるピクセル密度に設定されている場合、デモでは、半分のピクセル数など、異なる値が生成される可能性があります。

CSS スタイルシートの CSS プロパティgrid-template-columnsで列サイズが作成 (指定) されているため、各グリッド列の行ラベルには、computed sizeに加えてauthored sizeが表示されます。

行ラベル:

デモの要素 <div class="snack-box">のグリッド行には、次のトラックサイズの線ラベルが表示されます。

トラックサイズ	作成されたサイズ	計算されたサイズ
80px	該当なし	80px
80px	該当なし	80px

CSS スタイルシートの CSS プロパティgrid-template-rowsで行サイズが作成 (指定) されていないため、各グリッド行の行ラベルにはauthored sizeが表示されず、computed sizeのみが表示されます。

エリア名を表示する

レンダリングされた Web ページのグリッドオーバーレイでは、上、 下 1 、 下 2 などの領域名を表示できます。

エリア名を表示するには:

上記の「レンダリングされた Web ページにグリッドオーバーレイを表示する」の手順を実行します。
[グリッド/グリッドレーン] セクション>[オーバーレイの表示設定] サブセクションで、[領域名を表示する] チェックボックスをオンにします。

グリッド線を拡張する

グリッドオーバーレイのグリッド線をビューポートの端まで、各軸に沿って延長できます。

グリッド線を拡張するには:

上記の「レンダリングされた Web ページにグリッドオーバーレイを表示する」の手順を実行します。
[グリッド/グリッドレーン] セクション>[オーバーレイの表示設定] サブセクションで、[グリッド線の拡張] チェックボックスをオンにします。

グリッドオーバーレイ

[要素] ツールの [レイアウト] タブ ([スタイル] タブでグループ化) で、[グリッド/ グリッドレーンオーバーレイ] セクションに CSS グリッドを持つ要素の一覧が表示されます。各グリッドには、さまざまなオプションと共にチェックボックスがあります。

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

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

上記の「レンダリングされた Web ページにグリッドオーバーレイを表示する」の手順を実行します。
[ Grid/Grid Lanes]\(グリッド/グリッドレーン \) セクション >Grid/Grid Lanes オーバーレイ サブセクションで、複数のグリッドの各名前の横にあるチェックボックスをオンにします。

CSS グリッドを持つ選択した要素ごとに、CSS グリッドオーバーレイが表示されます。上記の例では、3 つのグリッドオーバーレイが有効になっています。レンダリングされた Web ページでは、各 CSS グリッドの色が異なります。
- body - ゴールドグリッドオーバーレイ。
- div.fruit-box - ピンクのグリッドオーバーレイ。
- div.snack-box - 青いグリッドオーバーレイ。

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

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

上記の「レンダリングされた Web ページにグリッドオーバーレイを表示する」の手順を実行します。
[ グリッド/グリッドレーン ] セクション >Grid/Grid Lanes オーバーレイ サブセクションで、要素名の横にある [ この要素のオーバーレイの色を選択 する] ボックスをクリックします。

カラーピッカーが開きます。

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

CSS グリッドレイアウトを持つ要素の場合は、レンダリングされた Web ページ内の要素まで自動的にスクロールし、DOM ツリー内の要素を自動的に選択できます。

Web ページでグリッドを使用する要素までスクロールし、DOM ツリーで要素を選択するには:

上記の「レンダリングされた Web ページにグリッドオーバーレイを表示する」の手順を実行します。
[ グリッド/グリッドレーン ] セクション >Grid/Grid Lanes オーバーレイ サブセクションで、要素名の横にある [ 要素] パネル ([] ) ボタンをクリックします。
- レンダリングされた Web ページは CSS グリッドレイアウトを使用する要素までスクロールされ、レンダリングされた Web ページで要素が簡単に強調表示されます。
- 要素ツールでは、DOM ツリーが自動的に要素までスクロールされ、要素が選択されます。
この自動スクロールと強調表示は、要素のチェックボックスがオンかオフかに関係なく機能します。

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-03-05

次の方法で共有

CSS グリッド レイアウトを検査する

レンダリングされた Web ページにグリッド オーバーレイを表示する

グリッド項目とその内容を揃える: グリッド エディターのポップアップ

グリッド表示オプション

オーバーレイ表示設定

行番号を表示する

線ラベルを非表示にする

行名を表示する

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

エリア名を表示する

グリッド線を拡張する

グリッド オーバーレイ

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

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