タイトルでピンとこないかもしれません。
今回はこんなのです↓
レスポンシブさせようとして、なったことありませんか？
というわけで、こうなる理由を解説していきます。
レスポンシブで右側に余白ができる原因は？
余白の原因は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の基本的な使い方
まとめ
レスポンシブで変な余白があったら、この記事を参考にしてみてください。
そんなわけで、終わりです。
また、なんか思い出したら書きます。