ブラウザデバッガーでのグリッド表示

サイトのレイアウト作成中にグリッドを使用する場合、グリッド内での要素の配置が正しく行われているかを確認する必要があることがあります。さらに、誤りがある場合には、どの要素から誤った配置が生じているのかを理解する必要があります。 この目的のために、ブラウザのデバッガーを使用することができます。

Chromeブラウザのデバッガーを例にグリッドを見てみましょう。 まず、興味のあるグリッドオブジェクトを選択し、右クリックしてコンテキストメニューから'コードを検査(Inspect)'オプションを選びます:

次に、ブラウザの右側に開いたパネルで、グリッドを持つ親要素にカーソルを合わせると、その横にgridボタンがあることに気づきます:

gridボタンをクリックすると、オブジェクトが視覚的に分かりやすいグリッドシステムで表示され、すべての列と行の番号が示されます:

デバッガーのパネルに注目してください。 そこにはStyles、Computed、Layoutなどのタブがあります。 デフォルトでアクティブなStylesタブからLayoutタブに切り替えてください。 グリッドの設定のリストが表示されます:

トラックのサイズを表示する最初のオプションShow track sizesを選択してみましょう:

Show area namesオプションを使用すると、グリッドエリア名が設定されている場合にそれを表示できます。また、Extend grid linesオプションを選択すると、グリッドの枠を超えて延長されたトラックラインを見ることができます: