CSS WEB制作

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

sukima

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

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

 

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

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

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

 

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

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

 

 

解決

コードで解決

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

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

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

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

 

 

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

 

リセットCSS

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

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

 

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

 

 

まとめ

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

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

 

 

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

-CSS, WEB制作
-,

© 2024 人生フリーハンド Powered by AFFINGER5