CSS グリッドインスペクター: グリッドレイアウトを調査する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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