【HTML／CSS】画面右の謎の余白の影響で横スクロールバーが表示されてしまう原因と解決方法
このページを見ているということは、きっとWebサイトの画面右に謎の余白の影響で横スクロールが表示されてしまっているのではないでしょうか。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
ぱっと見ただけではなぜどの部分が原因で横スクロールが表示されてしまっているのか分かりませんね。
この記事ではこのようになってしまう原因と解決方法をご紹介したいと思います。
この記事の目次を表示
画面右の謎の余白の影響で横スクロールバーが表示されてしまう原因
まずはじめに何故、指定した記憶もないのに、画面の右の謎の余白が出来てしまうのか、そしてそれの影響で横スクロールバーが表示されてしまうのか、その原因をご説明します。
それは、そのページ内にあるタグの横幅の合計値がブラウザ幅以上になってしまっているからです。
これは画面サイズとCSSで指定している単位によって変わってきますが、基本的に画面右に謎の余白が出来て、それが影響して横スクロールバーが表示されてしまう原因はこれです。
画面の横サイズが1960pxだったとして、CSSで指定した横幅の合計が1961px以上になってしまうと1960pxに収まりきらなかった分、この例の場合だと1px分が余白となり、そして横スクロールバーが表示されてしまいます。
画面の横サイズが1366pxだった場合は、1367px以上で同様に余白が出来て、横スクロールバーが表示されてしまいます。
解決方法
解決方法は大きく分けると以下の2つが考えられます。
- 横幅が画面サイズ以上になっている個所を見つけて、横幅を画面サイズ以内に修正する
- 横スクロールーバーを表示しない設定にする
それぞれの方法を見ていきましょう。
横幅が画面サイズ以上になっている個所を見つけて、横幅を画面サイズ以内に修正する
この横幅が画面サイズ以上になっている個所を見つける方法はいくつかあります。
全てのタグにoutlineを指定する
全てのタグに以下のCSSを指定してみましょう。
* {
outline: 1px solid red;
}これで全てのタグのアウトラインが表示され、画面サイズ以上になっているものが一目瞭然になります。
実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
この例ではclass="box3"のアウトラインがはみ出していることが分かりますね。
つまりこのclass="box3"の横幅が画面サイズ以上になっているということです。
ひとつづつタグを消していき原因の個所を見つける
地道な方法ですが、これは確実に見つけることが出来ます。
タグにdisplay: none;を指定していき、横スクロールバーが消えるかを確認していく方法です。この方法は広範囲の要素から順番に消していき、順番に原因となる個所を絞り込んでいきます。
それでは具体的にそのやり方を見ていきましょう。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
相変わらず横スクロールバーが出ていますね。
まずはclass="wrap"にdisplay: none;を指定してみます。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
当然ですが、全ての要素が消えてしまいました。
ここで注目してほしいのが、横スクロールバーが表示されていないという点です。
画面サイズ以上になっている個所を含めて消えたので、横スクロールバーが表示されなくなりました。
つまり、画面サイズ以上になっている個所はこのclass="wrap"の中に存在するということです。
続いて、class="box1"にdisplay: none;を指定してみます。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
さっきとは異なり、横スクロールバーは表示されたままですね。
つまり、画面サイズ以上になっている個所はclass="box1"では無いということが分かりました。
続いて、class="box3"にdisplay: none;を指定してみます。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
横スクロールバーが消えましたね。
つまり、画面サイズ以上になっている個所はclass="box3"ということが分かりました。
この部分のサイズを調整して横スクロールバーが表示されないようにすれば修正完了です。
この例では簡単に見つかりましたが、実際にはもっとタグが多く使われていますよね。
そのような場合でも、このように順番に対象を絞り込んでいくことで画面サイズ以上になっている個所は必ず見つかります！
横スクロールーバーを表示しない設定にする
画面からはみ出している要素があるけど、それが見つからない。見つからないということは見た目上は問題ないということでもあります。
もともと画面サイズからはみ出す想定でコーディングをしていないから当然と言えば当然ですよね。
つまり見た目上は今のままでも問題無くて、横スクロールバーさえ消えてくれれば根本的な原因となっている画面サイズ以上の個所を見つけて修正する必要は無いということでもあります。
その場合は、<body>タグに以下のCSSを追加しましょう。
body {
overflow-x: hidden;
}これで強制的に横スクロールバーは消えるます。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
そのページ内には未だに画面サイズ以上になっている個所は残ったまま。つまり根本的な原因は解決していないので、気持ち悪さは残ってしまいますが見た目さえデザイン通りで良いということであればこの方法が一番簡単でしょう。
ただ、個人的にはこの方法で解決したとしたくは無いですね。
つい画面サイズ以上にしないために
タグにはブラウザごとに初期値というものが設定されています。それには余白も含まれていて、何も考えないでカンプ通りのサイズを指定してしまうと思ってもいない数値が指定されているということになりかねません。
そこで、予め以下のCSSを指定しておくことをお勧めします。
* {
margin: 0;
padding: 0;
}これでブラウザで予め設定されている余白をクリアすることが出来ます。
また、CSSの数値は加算方式です。
div {
width: 1980px;
border: 1px solid;
}上のサンプルの場合、<div>タグの横幅は1980 + 1 + 1 = 1982となってしまいます。
つまり、画面サイズが1980pxのモニターでも2px分の右余白と横スクロールバーが出てしまいます。
こうならないために、予め以下のCSSも指定しておくことをお勧めします。
* {
box-sizing: border-box;
}こうすることでボーダーや内余白を含んだ合計値がwidthで指定した値になるようにブラウザが自動計算してくれるようになります。
これで不用意に画面サイズ以上になってしまうことを防ぐことが出来ますね。
つまり、2つを合わせて予め以下のCSSを指定しておくことをお勧めします。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}まとめ
いかがでしたか？
画面に横スクロールバーが出来ていても以外と気が付かないものです。なのでページが完成して見直している時に、気が付くことが多いです。
原因と解決方法さえ分かっていれば比較的簡単に解決できると思います。
