FirefoxのCSS Gridインスペクターが便利！

CSS Gridのデバグに便利なFirefoxのCSS Gridインスペクターをご紹介します。Firefox 56から搭載 されているこのインスペクターを使うと以下のグリッド関連の情報が表示できます。CSS GridするならFirefoxがいいですね。 グリッドをオーバーレイ表示 線番号を表示 領域名を表示 グリッド線を無限に延伸 各グリッドの詳細を表示 開発ツールを表示する まずはメニューの「ツール > ウェブ開発 > 開発ツールを表示」から開発ツールを表示します。 グリッドをオーバーレイ表示 グリッドの親要素を選択すると、「ルール」タブのCSSのところに小さくグリッド・アイコンが表示されます。このアイコンをクリックするとグリッドのオーバーレイが表示されます。 FirefoxのCSS Gridインスペクターの機能はこれだけだと思っていたんですが、他にもありました！ 「レイアウト」タブ 開

[braitom]

Firefox56以降で使えるCSS Gridのインスペクター機能について。グリッドのオーバーレイ表示、領域名の表示などができる。

[aTn]

勉強になります。使い方の紹介ありがとうございます。

[Rockridge]

Firefoxのウェブ開発ツールの1つであるGridインスペクタによって、具体的にどのようなことができるか紹介した記事。