CSS GridをChrome デベロッパーツールで検証、デバッグする方法を解説

Chrome デベロッパーツールでWebページ上のCSS Gridを検証し、レイアウトの問題をデバッグする方法を紹介します。

Chromeの次のアップデートで予定されている機能で、現在はChrome Canaryで利用できます。

CSS GridをChrome デベロッパーツールで検証、デバッグする方法

Inspect CSS Grid
by Jecelyn Yeen

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様のライセンスの元、翻訳しています。

はじめに

このガイドでは、Chrome デベロッパーツールでWebページ上のCSS Gridを検証し、レイアウトの問題をデバッグする方法を解説します。

使用しているCSS Gridのデモページは、下記の2つです。

Webページ上のCSS Gridを見つける

デベロッパーツールでCSS Gridを見つけるのは、簡単です。
WebページのHTML要素にdisplay: grid;、またはdisplay: inline-grid;が適用されている場合、Elementsパネルでその要素の横にgridバッジが表示されます。

Chromeデベロッパーツール

CSS Gridが適用されている要素に、gridバッジが表示される

gridバッジをクリックすると、グリッドのオーバーレイの表示を切り替えることができます。オーバーレイは要素の上に表示され、グリッドのようにレイアウトされて、グリッドのラインとトラックの位置を表示します。

Chromeデベロッパーツール

gridバッジをクリックすると、グリッドの概要が分かる

次に、Layoutパネルを開きます。
WebページにCSS Gridが含まれている場合、LayoutパネルにはGridセクションがあり、グリッドを検証するためのオプションを使用できます。

Chromeデベロッパーツール

Layoutパネルに、グリッドを検証するためのオプションがある

グリッドの表示オプション

LayoutパネルのGridセクションには、次の2つのサブセクションがあります。

この2つがどのように検証に役立つかを解説します。

オーバーレイの表示設定

オーバーレイの表示設定は、次の2つで構成されています。

  1. ドロップダウン
    • Hide line labels: オーバーレイのラインラベルを非表示にします。
    • Show lines number: オーバーレイのライン番号を表示します。
    • Show line names: オーバーレイの行番号を表示します。
  2. チェックボックス
    • Show track sizes: トラックサイズの表示・非表示を切り替えます。
    • Show area names: エリア名の表示・非表示を切り替えます。
    • Extend grid lines: デフォルトで、グリッドラインはdisplay: grid;、またはdisplay: inline-grid;が定義されている要素の内側にのみ表示されますが、このオプションをオンにすると、グリッドラインは各軸に沿ってビューポートの端まで伸びます。

それぞれの使い方を詳しく見てみましょう。

Chromeデベロッパーツール

Show line numbers

デフォルトで、正と負の行番号がオーバーレイに表示されます。

Chromeデベロッパーツール

Hide line labels

行番号を非表示にするには、Hide line labelsを選択します。

Chromeデベロッパーツール

Show line names

Show line namesを選択すると、番号の代わりに行名を表示できます。この例では、left, middle1, middle2, rightが表示されています。

上記の画像では、オレンジ色の要素が左から右に広がっており、CSSはgrid-column: left / right;となっています。行名を表示することで、要素の開始位置と終了位置を簡単に視覚化できます。

ここからは、デモをSnack boxに変えます。

Chromeデベロッパーツール

Show track sizes

グリッドのトラックサイズを表示するには、Show track sizesをチェックします。
各行のラベルに「定義サイズ - 実際のサイズ」が表示され、定義サイズはCSSで定義されているサイズ、実際のサイズはスクリーンで描画されたサイズです。

このデモでは、カラムサイズはgrid-template-columns:1fr 2fr;で定義されています。そのため、行のラベルには定義されたサイズと描画サイズ1fr - 96.66px2fr - 193.32pxが表示されています。

row軸のラベルは実際のサイズのみ表示されています。CSSにはサイズが定義されていないので、スクリーンで描画されたサイズ80px80pxが表示されています。

Chromeデベロッパーツール

Show area names

エリア名を表示するには、Show area namesをチェックします。この例では、グリッドにtop, bottom1, bottom2の3つのエリアがあります。

Chromeデベロッパーツール

Extend grid lines

グリッド線を各軸に沿ってビューポートの端まで延長するには、Extend grid linesをチェックします。

グリッドのオーバーレイ

グリッドのオーバーレイには、Webページに存在するグリッドのリストが含まれ、それぞれにチェックボックスとさまざまなオプションがあります。

Chromeデベロッパーツール

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

複数のグリッドのオーバーレイビューを有効にできます。この例では、maindiv.snack-boxの2つのグリッドのオーバーレイが有効になっており、それぞれが異なるカラーで表されています。

Chromeデベロッパーツール

オーバーレイのカラーを変更する

各オーバーレイの横のカラーピッカーをクリックすると、オーバーレイのカラーを変更できます。上記は、mainのカラーピッカーをクリックしたものです。

Chromeデベロッパーツール

グリッドを強調表示

各オーバーレイの右端のハイライトアイコンをクリックすると、そのHTML要素までスクロールして強調表示します。上記は、div.snack-boxのハイライトアイコンをクリックしたものです。

sponsors

top of page

©2020 coliss