完成したページの右側に微妙な余白があるんだけど、これを無くすにはどうすればいいの？
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からはみ出たものは隠す」という指定になる
- ＝ ページからはみ出た部分が隠される
- ＝ 余白が消える
こんな感じ？
「何がはみ出てて余白ができてるのかわからないので、ページ全体を覆っちゃおうぜ！」
っていう力技…と解釈しました。
こぼればなし
全体を包むなら、わざわざdivタグを作らなくても、body自体に overflow: hidden; をつければいいんじゃないの…？
はい。実際にbodyに設定してみました。
すると、上下左右のどこにもスクロールできず、ヘッダー画像しか見れないページになりました 笑
bodyにとっての外側はディスプレイ（画面・モニタ）なので、ディスプレイに表示されていない部分＝はみ出たもの扱いになって隠されるのかな…と。
こちらの記事を参考にさせていただきました！
