CSS GridをChrome デベロッパーツールで検証、デバッグする方法を解説
Post on:2020年11月6日
sponsors
Chrome デベロッパーツールでWebページ上のCSS Gridを検証し、レイアウトの問題をデバッグする方法を紹介します。
Chromeの次のアップデートで予定されている機能で、現在はChrome Canaryで利用できます。
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バッジが表示されます。
CSS Gridが適用されている要素に、gridバッジが表示される
gridバッジをクリックすると、グリッドのオーバーレイの表示を切り替えることができます。オーバーレイは要素の上に表示され、グリッドのようにレイアウトされて、グリッドのラインとトラックの位置を表示します。
gridバッジをクリックすると、グリッドの概要が分かる
次に、Layoutパネルを開きます。
WebページにCSS Gridが含まれている場合、LayoutパネルにはGridセクションがあり、グリッドを検証するためのオプションを使用できます。
Layoutパネルに、グリッドを検証するためのオプションがある
グリッドの表示オプション
LayoutパネルのGridセクションには、次の2つのサブセクションがあります。
この2つがどのように検証に役立つかを解説します。
オーバーレイの表示設定
オーバーレイの表示設定は、次の2つで構成されています。
- ドロップダウン
- Hide line labels: オーバーレイのラインラベルを非表示にします。
- Show lines number: オーバーレイのライン番号を表示します。
- Show line names: オーバーレイの行番号を表示します。
- チェックボックス
- Show track sizes: トラックサイズの表示・非表示を切り替えます。
- Show area names: エリア名の表示・非表示を切り替えます。
- Extend grid lines: デフォルトで、グリッドラインはdisplay: grid;、またはdisplay: inline-grid;が定義されている要素の内側にのみ表示されますが、このオプションをオンにすると、グリッドラインは各軸に沿ってビューポートの端まで伸びます。
それぞれの使い方を詳しく見てみましょう。
Show line numbers
デフォルトで、正と負の行番号がオーバーレイに表示されます。
Hide line labels
行番号を非表示にするには、Hide line labelsを選択します。
Show line names
Show line namesを選択すると、番号の代わりに行名を表示できます。この例では、left, middle1, middle2, rightが表示されています。
上記の画像では、オレンジ色の要素が左から右に広がっており、CSSはgrid-column: left / right;となっています。行名を表示することで、要素の開始位置と終了位置を簡単に視覚化できます。
ここからは、デモをSnack boxに変えます。
Show track sizes
グリッドのトラックサイズを表示するには、Show track sizesをチェックします。
各行のラベルに「定義サイズ - 実際のサイズ」が表示され、定義サイズはCSSで定義されているサイズ、実際のサイズはスクリーンで描画されたサイズです。
このデモでは、カラムサイズはgrid-template-columns:1fr 2fr;で定義されています。そのため、行のラベルには定義されたサイズと描画サイズ1fr - 96.66pxと2fr - 193.32pxが表示されています。
row軸のラベルは実際のサイズのみ表示されています。CSSにはサイズが定義されていないので、スクリーンで描画されたサイズ80pxと80pxが表示されています。
Show area names
エリア名を表示するには、Show area namesをチェックします。この例では、グリッドにtop, bottom1, bottom2の3つのエリアがあります。
Extend grid lines
グリッド線を各軸に沿ってビューポートの端まで延長するには、Extend grid linesをチェックします。
グリッドのオーバーレイ
グリッドのオーバーレイには、Webページに存在するグリッドのリストが含まれ、それぞれにチェックボックスとさまざまなオプションがあります。
複数のグリッドのオーバーレイビューを有効にする
複数のグリッドのオーバーレイビューを有効にできます。この例では、mainとdiv.snack-boxの2つのグリッドのオーバーレイが有効になっており、それぞれが異なるカラーで表されています。
オーバーレイのカラーを変更する
各オーバーレイの横のカラーピッカーをクリックすると、オーバーレイのカラーを変更できます。上記は、mainのカラーピッカーをクリックしたものです。
グリッドを強調表示
各オーバーレイの右端のハイライトアイコンをクリックすると、そのHTML要素までスクロールして強調表示します。上記は、div.snack-boxのハイライトアイコンをクリックしたものです。
sponsors
