【Googleの検証ツール】レスポンシブで右側に余白

【Googleの検証ツール】レスポンシブで右側に余白

タイトルでピンとこないかもしれません。

今回はこんなのです↓

画像がはみ出ている

レスポンシブさせようとして、なったことありませんか?

というわけで、こうなる理由を解説していきます。

レスポンシブで右側に余白ができる原因は?

余白の原因はpx指定してるから

もう1度、さっきの画像をご覧ください。

画像がはみ出ている

これは、画像<img>をwidth: 800pxとしてるのが原因です。

画像の幅800px

画面幅は634pxなので、これよりもおっきいわけです。

ちなみに画面幅とは<body>の幅のこと。

次のをご覧ください↓

「親にclassを〜」も突き出してますね。

これは<h4>ですが、同じくwidth: 800pxとしてるから。

ただ、背景色もついてるので分かりやすいですよね。

px指定した要素を見つけにくいケース

んでもって、もう1つどうぞ↓

何が原因で右側に余白ができてるのか分かりませんね。

原因はこちら↓

ご覧のように、背景色のついていない<p>にwidth: 800pxとなっているからなんですね。

ちなみに、今まさにこの行もwidth: 800pxにしてます!!

検証画面を開いて、画面幅をせまくすると上図と同じようになるはずです。

で、2つ上の行にカーソルを合わせてみてください。

スマホの人は思いっきりスクロールが発生してるはずです。

なんかすみません…

px指定した要素の見つけ方

上記のような画像や背景色のないpx指定した要素の見つけるコツですが…

残念ながらありません。

探し方は、

  • cssファイルを見直す
  • 検証画面で1つ1つの要素にカーソルを合わせていく

のどちらかです。

個人的には、検証画面からの方が探しやすいです。

cssファイルでpx指定してるのを見つける方がカンタンそうですがね。

いかんせん、横文字と数字だらけの中から探し当てるのってムズイ。

まあ、どちらにしても地道な作業になります。

ただ、経験値が上がってくると予想はできるようになりますので、ご安心を。

そうそう。

こういう時にどうするのかって話ですよね。

すみません、忘れてました。

widthへのpx指定を取り消しましょう。

そうすれば、width: autoになり親要素と同じ幅になります。

画像の場合だと、width: 100%またはmax-width: 100%でもオッケーです。

width: autoについて知りたい方はこちらを
width:100%が効かない!の「autoと100%の違い」の項目

max-widthについてはこちらの記事をどうぞ
【imgの使い方と表示ルール③】max-widthの基本的な使い方

まとめ

レスポンシブで変な余白があったら、この記事を参考にしてみてください。

そんなわけで、終わりです。

また、なんか思い出したら書きます。

タイトルとURLをコピーしました