
タイトルでピンとこないかもしれません。
今回はこんなのです↓

レスポンシブさせようとして、なったことありませんか?
というわけで、こうなる理由を解説していきます。
レスポンシブで右側に余白ができる原因は?
余白の原因はpx指定してるから
もう1度、さっきの画像をご覧ください。

これは、画像<img>をwidth: 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の基本的な使い方
まとめ
レスポンシブで変な余白があったら、この記事を参考にしてみてください。
そんなわけで、終わりです。
また、なんか思い出したら書きます。