30DAYSトライアルの「DAY21~25. モデルを決めて、実在するお店のLPを作る」を実践して、完成したLPをクライアントさんに見せようと全画面スクショした時に、ページの右側にうっすらと余白があることに気づきました…。
なんじゃこりゃ。
もちろん、設定した覚えはありません…。
スクショするまで気づかなかったくらいの、ほんの2〜3mmの余白だけど、気づいてしまったら気になって仕方ないので、解決すべくググって参りましたので備忘録。(このブログ、備忘録ばっかりやな 笑)
【overflow: hidden;】を設定したらサクッと解決できた件
うっすらとした余白ができる原因として、
- 子要素の幅が親要素の幅を上回っている
- HTMLタグの開始・終了タグの不一致(開始してるのに終了してない…とか)
などがあるようですが、これはどちらも問題なし。
次に試したのが、bodyタグの中身全体に「overflow: hidden;」を設定する…というもの。
「overflow」プロパティについては、サルワカさん記事をご覧ください。
サルワカさんの記事の通り、overflowプロパティは「要素のボックスからはみ出たものをどう扱うか」であり、値にhiddenを指定することで「どう扱うか=隠す」になります。
この「はみ出たものを隠す」という機能で、ページの右側にある余白を削除します。
具体的には、
- HTML:bodyタグのすぐ内側にdiv.wrapタグを追加
*クラス名は任意。ここでは「.wrap」とします。
*divの開始タグは<body>の直下、終了タグは</body>の直前にして、要素全体を包みこみます。 - CSS:.wrapに「overflow: hidden;」を設定
とします。
HTML
1 2 3 4 5 6 7 |
<html> <body> <div class="wrap"> … コンテンツ … </div> </body> </html> |
CSS
1 2 3 |
.wrap { overflow: hidden; } |
- .wrap = 要素全体
- .wrapに「overflow: hidden;」を指定することで、「.wrapからはみ出たものは隠す」という指定になる
- = ページからはみ出た部分が隠される
- = 余白が消える

こんな感じ?
「何がはみ出てて余白ができてるのかわからないので、ページ全体を覆っちゃおうぜ!」
っていう力技…と解釈しました。
こぼればなし
はい。実際にbodyに設定してみました。
すると、上下左右のどこにもスクロールできず、ヘッダー画像しか見れないページになりました 笑
bodyにとっての外側はディスプレイ(画面・モニタ)なので、ディスプレイに表示されていない部分=はみ出たもの扱いになって隠されるのかな…と。
こちらの記事を参考にさせていただきました!