先日cssファイルに、body {margin: 0;}を書き込みました。
これを書き込まず、リセットcssも記載していなければ、Google Chromeブラウザの上下左右に白い隙間ができていると思います。
これを消していきます。
デベロッパーツール、検証の使い方
Google Chromeで、[ブラウザで右クリック-検証]
Edgeだと、[ブラウザで右クリック-開発者ツールで調査する]
あるいは、右上の[Google Chromeの設定（縦3つの点）-その他のツール-デベロッパーツール]でもOK！
Edgeだと、最後が[開発者ツール]となっていますね。
【デベロッパーツールの左側】
【デベロッパーツールの右側】
上の赤枠の[ページ内の要素を選択して検査]をクリックします。（青色でON）
この状態で、左のcode、あるいは右のデザインにカーソルを合わせたら、それに対応する部分が分かります。
【例】今回、左のhtmlにカーソルを合わせたら、右に html 1343×784
左のbodyにカーソルを合わせたら、右にbody 1327×768 とあります。
よって、上下左右の空白が8pxであることが分かります。
【結論】
body {
margin: 0;
}これをcssの最上部に書き加えると、消せます。
左にコードがあって、右にそのデザインがあると言いましたが、上の赤枠から配置を変えることが出来ます。
Google Chromeだと固定サイド、Edgeだとドッキングの位置と書いてます。
【デベロッパーツール-サイズ】をクリックします。
これで、いろいろなデバイスで表示した時の見栄えを確認することが出来ます。
また、編集をクリックすると下のように画面が出て、いろいろなデバイスを追加したり、カスタマイズ出来ます。
さいごに
気になった事があれば、ガンガン検証を使っていきましょう！
今日は、ありがとうございました。では、また！