【フロントエンド1000本ノック】0064_CSS Grid Inspectorなどのブラウザの開発者ツールを使い、作成したグリッドレイアウトのライン番号やエリア名を確認せよ。

この記事は人間が書きました

はじめに

こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。

「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca

Grid Inspector が有効になっているかを確かめる

0062のhtmlを開発社ツールで確認します。

1. 課題62で作成した、雑誌風のレイアウトのHTMLファイルを開く
2. ブラウザで開発者ツールを開く。（WindowsならF12、MacならCmd + Opt + I）
3. Elementsパネルで、display: grid; が指定されているコンテナ要素（.layoutクラスの <div>）を選択する。
4. すると、その要素の横に「grid」というバッジが表示されるはず。そのバッジをクリックして、グリッドオーバーレイを有効にする。
5. ページ上に表示されたグリッドのライン番号やエリア名(header、heroなど) を確認し、CSSの定義と一致していることを確かめる。