意図せず、しかもいつの間にか横スクロールが発生して困ったことはありませんか？
この横スクロールの原因の特定方法と解決方法、そして、発生する原因についてご紹介したいと思います。
横スクロールが発生する主な原因
横スクロールが発生する原因の代表的なものです。
- 固定幅の指定
要素に画面幅を超える固定幅（px指定）を設定している場合、小さい画面で横スクロールが発生します。 - padding/marginの計算ミス
widthを100%にしている要素にpaddingやmarginを追加すると、ボックスモデルの計算で親要素からはみ出します。 - vw単位の使いすぎ
vw（viewport width）を使いすぎると、意図しない幅になることがあります。 - 画像のサイズ指定なし
画像にmax-width: 100%を指定していないと、元のサイズで表示されてはみ出します。
＊以下は「padding/marginの計算ミス」のサンプルです
See the Pen Untitled by usagi (@Y-usa) on CodePen.
原因を特定する方法
原因を特定するのに役立つ方法を2つご紹介します。
chromeの拡張機能を使う
Chrome拡張機能の「UI Build Assistant」を使うと、要素を色分けしてくれるので、はみ出している要素が見つけやすくなります。
はみ出し以外にも、余白の確認などにも便利です。
使い方
- Chrome ウェブストアからインストール
- 確認したいページで拡張機能をON
- 全要素が自動で色分け表示される
下記のリンク先で拡張機能の追加ができます
拡張機能を使うとこのように色分けされます
検証ツールでアウトラインを表示させる
ブラウザの検証ツール（DevTools）を使って、全要素にアウトラインを表示させることで、はみ出している要素を視覚的に確認できます。
手順：
- 検証ツールを開く
Mac: `Command + Option + I` または F12
Windows `Ctrl + Shift + I` または F12
または、右クリック > 検証 - Consoleタブを開く
- 以下のコードを入力してEnter
const width = document.documentElement.clientWidth;
$$("*").forEach((el) => {
el.style.outline = "1px solid tomato";
if (width < el.clientWidth) console.log(el);
});
すると、すべての要素に赤い枠線が表示され、画面からはみ出している要素がすぐに分かります。
次のサンプル画像では「検証ツールでアウトラインを表示させる」という見出しの右側がはみ出しているのがわかります。
解決方法
原因が特定できたら、検証ツールの画面を使って、以下の方法で解消していきます。
- 固定幅を相対値に変更
固定幅（px指定）を、親要素に応じて柔軟に変化する相対値に変更します。
max-width と width: 100% を使うことで、親要素に応じて柔軟に調整されます。 - box-sizingを使う
- 画像に最大幅を設定
- overflow-xで応急処置（非推奨）
一時的に横スクロールを隠すこともできますが、原因を解決していないため、避けたいです。
横スクロールの問題は、要素の幅の計算ミスや親子関係の理解不足から発生することが多いです。
検証ツールを使って原因を特定し、適切に修正していくことで、レイアウトがスムーズになります。