【CSS】余白がどこに出来ているか調べる方法(デベロッパーツールの使い方)

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

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

 

 

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

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

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

 

 

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

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

 

 

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

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

➡Google Chromeダウンロード



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



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


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


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


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



すると、先程と同様にデベロッパーツールが開かれます。
今度は、選択した部分がハイライトになっています。


これでどの要素に余白が含まれているかが分かります。



今回の場合は、ulというタグに余白が含まれていることが分かったので、
CSS上でulタグに対して余白を0に設定してあげれば余白が消えます。


ソースで書く場合は、こんな書き方になります。
ul{
  margin: 0;
}

 

 

今回は以上になります。

 

 

 

今回も最後まで読んで頂きありがとうございました。

余白を調整する際に、ぜひ使用してみて下さい。

 

 

今後も便利なツールの紹介、一人でも多くの人に「プログラミングって面白そう！」って思ってもらえるような記事を書いていきますね。

それでは！

 

 

オススメサイト

➡ブログを書きながらいいね返しが出来る！アメーバドライブ

アメーバドライブ

　メールアドレスを登録するだけですぐに使えます！

　一度登録すれば、ずっと無料で使えるのでおススメです！

 

➡FXの基礎知識が得られるFXの教科書

　メールアドレスを登録するだけで、FXに役立つ情報を手に入れられます！

　実際にFXを経験した方の知識なので説得力があります！

 

➡奥手な人のための恋愛レポートマニュアル

　メールアドレスを登録するだけで、恋愛に役立つ情報を手に入れられます！

　「片思いの人と距離を縮めるにはどうすればいいか？」

　そんな悩みに応えてくれる一冊となっています！