コーディングをしていて意図しない横スクロールバーが表示されてしまったときの対処方法です。原因を追及することで予期せぬトラブルを防ぐことができるので、ぜひ試してみましょう。
給付金で最大54万円OFF！独学では手に入らないウェブスキルが身に付く日本初のW3C認定スクールが無料カウンセリング受付中！
原因が特定できないときにbodyにとりあえずoverflow-x:hidden;を指定することがあると思います。
body {
overflow-x: hidden;
}
これは「body要素の横スクロールのはみ出しを隠す」ということですが、後に修正やコンポーネントを追加したときに意図しない動きになる可能性がありますので、絶対にやってはいけません。
全要素にアウトラインを付ける
で、じゃあどうやって原因を特定していくかということですが、ユニバーサルセレクタにアウトラインを付けて、どの要素がはみ出しているか視覚的に確認する方法があります。
* {
outline: 1px solid #ff0099;
}
ブラウザでHTMLファイルを開きます。
次にF12を押してデベロッパーツールを開き、:hovや.clsなどがある部分の+をクリックして、上記のCSSを追加します。こうすることで全要素に1pxのアウトラインを付けることができるので、視覚的に判断が付きやすくなります。
特定の要素を削除していく
上記の方法で原因が見つけられないときは、Google Chromeのデベロッパーツールを使って要素をひとつずつ削除していきましょう。
大きな要素から削除する
要素を右クリック → Delete Elementを選択して削除していきます。削除するのは大きな要素から行なっていきましょう。
例えばヘッダー、コンテンツ、フッターと3つのセクションに分かれている場合は、大きなコンテンツが収まっているコンテンツ、その次にヘッダー、最後にフッターという順番で要素を削除していきます。要素を削除して横のスクロールバーが消えたらその要素の中に原因があるので、またその中の大きな要素から選択して削除していきましょう。
さいごに
というわけで、原因を特定することも大切ですが、だいたいは「横幅をpxで指定している」、「marginの計算方法を間違えている」など初歩的なミスが大きいので、最初からそういったレイアウトを組まないように設計しておきましょう。
