HTML&CSS

【HTML&CSS】ページの右側に余白が!気になる微妙な隙間を消す方法は?

完成したページの右側に微妙な余白があるんだけど、これを無くすにはどうすればいいの?

30DAYSトライアルの「DAY21~25. モデルを決めて、実在するお店のLPを作る」を実践して、完成したLPをクライアントさんに見せようと全画面スクショした時に、ページの右側にうっすらと余白があることに気づきました…。

なんじゃこりゃ。

もちろん、設定した覚えはありません…。

スクショするまで気づかなかったくらいの、ほんの2〜3mmの余白だけど、気づいてしまったら気になって仕方ないので、解決すべくググって参りましたので備忘録。(このブログ、備忘録ばっかりやな 笑)

【overflow: hidden;】を設定したらサクッと解決できた件

うっすらとした余白ができる原因として、

  • 子要素の幅が親要素の幅を上回っている
  • HTMLタグの開始・終了タグの不一致(開始してるのに終了してない…とか)

などがあるようですが、これはどちらも問題なし。

次に試したのが、bodyタグの中身全体に「overflow: hidden;」を設定する…というもの。

「overflow」プロパティについては、サルワカさん記事をご覧ください。

【CSS】overflowの使い方:hiddenやscrollの違いは?

サルワカさんの記事の通り、overflowプロパティは「要素のボックスからはみ出たものをどう扱うか」であり、値にhiddenを指定することで「どう扱うか=隠す」になります。

この「はみ出たものを隠す」という機能で、ページの右側にある余白を削除します。

具体的には、

  • HTML:bodyタグのすぐ内側にdiv.wrapタグを追加
    *クラス名は任意。ここでは「.wrap」とします。
    *divの開始タグは<body>の直下、終了タグは</body>の直前にして、要素全体を包みこみます。
  • CSS:.wrapに「overflow: hidden;」を設定

とします。

HTML

CSS

  • .wrap = 要素全体
  • .wrapに「overflow: hidden;」を指定することで、「.wrapからはみ出たものは隠す」という指定になる
  • = ページからはみ出た部分が隠される
  • = 余白が消える

こんな感じ?

「何がはみ出てて余白ができてるのかわからないので、ページ全体を覆っちゃおうぜ!」

っていう力技…と解釈しました。

こぼればなし

全体を包むなら、わざわざdivタグを作らなくても、body自体に overflow: hidden; をつければいいんじゃないの…?

はい。実際にbodyに設定してみました。

すると、上下左右のどこにもスクロールできず、ヘッダー画像しか見れないページになりました 笑

bodyにとっての外側はディスプレイ(画面・モニタ)なので、ディスプレイに表示されていない部分=はみ出たもの扱いになって隠されるのかな…と。

こちらの記事を参考にさせていただきました!

CSSを駆使して右にできた謎の余白を消す方法