グリッドインスペクターで、Firefox の開発ツールを使用して CSS グリッドレイアウト を調査できます。ページ上にあるグリッドを見つける、グリッドを調査および変更する、レイアウトのの問題をデバッグするといったことが可能です。

注記: この記事にあるスクリーンショットで示す例は、Jen Simmons による FuturismoVariations on a grid、および Rachel Andrew による 名前付きグリッド領域の例 です。

CSS グリッドを発見する

ページ内に display: grid が適用された HTML 要素があるとき、グリッドの機能へ簡単にアクセスできるようにするため、開発ツールでいくつかの機能を使用できます。

HTML ペインの機能

HTML ペイン では、グリッド方式でレイアウトされる要素のそばに "grid" マークがつきます。

The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it

CSS ペインの機能

CSS ペイン のルールビューでは、display: grid 宣言の実体にグリッドアイコン () を表示します。

The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid

アイコンをクリックすると、ページ上にグリッドをオーバーレイ表示する機能の有効・無効を切り替えます。これは要素に重ねて表示され、グリッドの線やトラックの位置を示すためにグリッドのように並べられます。

A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid

このオーバーレイは別の要素を選択しても表示し続けますので、関連する CSS プロパティを編集して、グリッドにどのような影響があるかを確認できます。

レイアウトビューのグリッドセクション

ページ内にグリッドがあるとき、グリッドを確認するためのさまざまなオプションがある "グリッド" セクションが CSS ペインのレイアウトビューに表示されます。詳しくは後の章で説明します。

注記: レイアウトビューは、ページインスペクターの右側のペインにあるLayoutタブの中にあります。この記事内のスクリーンショットで、どこにあるかのヒントを得られるでしょう。

グリッドのオプション

レイアウトビューのグリッドセクションは以下のようなものです:

The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed

セクション内にオプションがいくつかあります:

  • グリッドをオーバーレイ表示: さまざまな設定とともに、ページ上にそれぞれのグリッドを表示するためのチェックボックスがあります。オーバーレイ表示のオン・オフを切り替えできます。
  • グリッドの表示設定:
    • 線番号を表示: それぞれのグリッドオーバーレイで線番号の表示をオン・オフできます (デフォルトでオン)。
    • 領域名を表示: グリッドの領域に名前がある場合に、領域名の表示をオン・オフできます (妥当であればデフォルトでオン)。
    • グリッド線を無限に延伸: デフォルトで、グリッドの線やトラックは display: grid が設定された要素の内部に限って表示します。このオプションを有効にすると、グリッド線がそれぞれの軸にそってビューポートの端まで延伸します。
  • ミニグリッドビュー: 現在オーバーレイ表示しているグリッドを縮小表示します。

注記: オーバーレイの色や表示設定は、ページごとに再読み込み後も維持します。

これらの機能を、さらに詳しく見ていきましょう

グリッドをオーバーレイ表示

"グリッドをオーバーレイ表示" セクションに、ページ上のそれぞれのグリッドの項目が表示されます:

An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more.

それぞれの項目の構成は (左から右の順に) 以下のとおりです:

  • グリッドのオーバーレイ表示のオン・オフを切り替えるチェックボックス。現在、オーバーレイは同時に 1 つしか表示しませんので注意してください。
  • グリッドを表すラベル。グリッドが適用された HTML 要素を識別するセレクターです。ここをクリックしても、オーバーレイ表示のオン・オフを切り替えできます。
  • 標的のアイコン。クリックすると、このグリッドに関連する HTML 要素を HTML ペインで選択します。
  • グリッドオーバーレイの主要な色を変更できるカラーピッカー。グリッドを区別しやすくするため、色を変えるのに便利です。

線番号を表示

デフォルトで、グリッドオーバーレイに線番号を表示します。

A CSS grid overlay with grid line numbers displayed

"線番号を表示" のチェックを外すと、線番号が消えます。

A CSS grid overlay with grid line numbers not displayed

領域名を表示

領域名があるグリッドでは、デフォルトで領域名をグリッドオーバーレイに表示します。

A CSS grid overlay with named area names displayed

"領域名を表示" のチェックを外すと、領域名が消えます。

A CSS grid overlay with named area names not displayed

グリッド線を無限に延伸

デフォルトで、グリッドの線やトラックは display: grid が設定された要素の内部に限って表示します。

A CSS grid overlay with grid lines not extended infinitely

"グリッド線を無限に延伸" にチェックを入れると、グリッド線がそれぞれの軸にそってビューポートの端まで延伸します。

A CSS grid overlay with grid lines extended infinitely

ミニグリッドビュー

現在オーバーレイ表示しているグリッドを、実際のグリッドに比例して小さく表示します。

A mini CSS grid view from the Firefox DevTools

ミニグリッドのさまざまな領域にマウスポインターを載せると、グリッドオーバーレイで対応する領域もハイライト表示されます。また、領域の寸法や列番号・行番号などの有用な情報をツールチップで表示します。

A firefox screenshot showing an area of a mini CSS grid being highlighted in the DevTools, and the corresponding area in the real grid being highlighted on the web page.

関連情報

  • labs.jensimmons.com — さまざまな興味深いグリッドの例
  • Grid by Example — Rachel Andrew による、CSS グリッドを学ぶための資料
  • CSS Grid Layout — MDN の CSS グリッドレイアウトのリファレンスやチュートリアル

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: yyss, wbamberg
最終更新者: yyss,