前回Webサイトの余白を調整する方法を紹介させて頂きました。

➡【CSS】Webサイトにて余白を調整する(margin)

ただ、余白を調整しようとしても

・ソースにおいてどの部分を修正したらいいのか分からない

・余白を消したつもりなのに、やっぱり余白が出来ている・・・

ということが発生します。

そこで今回は、デベロッパーツールを使った余白の消し方を紹介させて頂きます。

デベロッパーツールとは？Google Chromeで使用することが出来る、デバッグ用のツールになります。

Google Chromeで使用することが出来るので、
Google Chromeをインストールしていない人はこちらからダウンロードしてください！

➡Google Chromeダウンロード

Google Chromeを起動したら、画面上で右クリックをして、
「その他のツール」→「デペロッパーツール」を選択して下さい。

デベロッパーツールを選択するとこんな画面が開きます。

一気に難しい画面になりましたね(笑)
これを使えば、例えばコーディングの誤りなんかを探すことが出来ます。

今回は余白がどこに出来ているかを調べるので、
このデベロッパーツールを使って余白が出来ている部分を探します。

余白が出来ている部分(もしくは気になる部分)を選択して、
右クリックして、「検証」を選んでください。