CSS Gridのデバグに便利なFirefoxのCSS Gridインスペクターをご紹介します。Firefox 56から搭載 されているこのインスペクターを使うと以下のグリッド関連の情報が表示できます。CSS GridするならFirefoxがいいですね。
開発ツールを表示する
まずはメニューの「ツール > ウェブ開発 > 開発ツールを表示」から開発ツールを表示します。
グリッドをオーバーレイ表示
グリッドの親要素を選択すると、「ルール」タブのCSSのところに小さくグリッド・アイコンが表示されます。このアイコンをクリックするとグリッドのオーバーレイが表示されます。
FirefoxのCSS Gridインスペクターの機能はこれだけだと思っていたんですが、他にもありました！
「レイアウト」タブ
開発ツールを表示した状態で「レイアウト」タブをクリックすると、なんとCSS Gridインスペクターの他のオプションがあるではないですか！
このタブで以下の操作が可能です。
線番号を表示
グリッドに指定した線（グリッド・ライン）が表示されます。
領域名を表示
grid-template-areasで指定した領域名が表示されます。
グリッド線を無限に延伸
グリッドオーバーレイの線をグリッド・コンテナ（グリッドの親要素）の外まで伸ばせます。
各グリッド・アイテムの詳細を表示
オプションの下に出てくるボックスにマウスオーバーすると、各グリッド・アイテムのサイズと位置（例： 行1/列2）が表示されます。
さいごにひとこと
このツール、複雑なグリッドを作るときには特に便利そうですね。グリッドオーバーレイを表示する方法しか知らなくて、つい最近、この「CSS Gridインスペクター」に気づいたので記事にしてみました。
ちなみに、この記事の執筆時（2018年2月19日）、Safariにはこういった機能はなく、Chromeも拡張機能をインストールする必要があるようです。CSS Gridを使った制作には、やっぱりFirefoxが良さそうですね。Firefox QuantumになってからメインのブラウザをFirefoxに移行したんですが、なかなかいいですね！
That’s it for today. See you again next week!
About the author
Rriverの竜（りょう）です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら。
記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。
コメントを残す