レスポンシブデザインで発見　右端にできた謎の余白を埋める方法

プログラミングを勉強中のみなさん、こんにちは！

今回は、レスポンシブデザインで出現する「謎の右端の余白」の解決方法を紹介します。

レスポンシブデザインで、スマホサイズのコーディングをしていた時です。

右端に細〜い余白ができています。

一つのセクションというわけではなく、上（header）から下まで、ずっとその余白は続いてます。

どれほどの人がこの「謎」に直面したかはわかりませんが、私の体験談をもとに、同じ状況に直面してる人に向けて、少しでも参考になればと思い執筆しております。

それでは見ていきましょう。

解決

コードで解決

あまり原因がわからず解決するのは好きではないですが、少々荒技です。

@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */
body {
width:100%;
}

このように、メディアクエリでスマホサイズのwidthを設定します。

これで余白が無くなります。

ちなみに、一部分で発生した人は、bodyではなく、該当するセクション名（要素名）にしてくだい。

リセットCSS

リセットCSSで試してみるのもありです。

デフォルトのCSSが原因になっている可能性がありますので、参考にしてみてください。

リセットCSSってなんぞや？　という方はこちら。

まとめ

レスポンシブで発生した右端の余白は、メディアクエリのwidth：１００％、もしくはリセットCSSで解決です。

是非みなさんもやってみてください。

「余白を消す」に関連する記事も紹介しておきます。