プログラミング

【CSS】レスポンシブデザイン 右端に謎の余白 解決します

スポンサーリンク

sukima

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

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

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

初心者向けのメモ書きとして執筆しておりますので、あしからず。

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

クリックできる目次

現象

これは、私がサイト模写をしていた時の経験です。
レスポンシブデザインで、スマホサイズのコーディングをしていた時です。

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

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

正直原因は不明です。
いろいろ調べたのですが、よくわからずじまいでした。

解決

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

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

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

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

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

まとめ

レスポンシブで発生した右端の余白は、メディアクエリのwidth:100%で解決です。
是非みなさんもやってみてください。

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

スポンサーリンク

-プログラミング
-, , , , , , ,

© 2022 サカらいふ Powered by AFFINGER5