どうも、LYHOUSEです。
コーディング作業をしている時に、謎の横スクロールが発生することはありませんか？
しかもその原因が分からない、もしくは目星がついていても解決に時間がかかってしまったりして困っていませんか？
自分もコーディング時に遭遇したときはデベロッパーツールで地道に探してましたが、解決に３０分ほど時間が掛かっちゃってました…。
でもこの解決方法に出会ってからは、大体５分で解決できるようになりました。
この記事では、その解決方法についてお答えします。
定番の解決法はCSS
一つ目の解決法はCSSを使うやり方です。
ユニバーサルセレクタを利用して、以下のように記述してあげると、どこがスクロールを生み出す原因になっているかぱっと見で把握できます。
* {
outline: 1px solid red;
}
ブラウザを更新してあげると、以下のように全ての要素に赤枠がつきました。
何がはみ出ているか一目で分かりますね。
ただこの場合だと、CSSに記述したり削除したり面倒ですし、他の部分を確認したいときに普通に線が邪魔になってしまいます…。
デベロッパーツールをうまく利用して必要な時だけこのCSSを記述できれば1番良いですよね。
２通りの方法があるので、実際にデベロッパーツールに記述してみましょう！
デベロッパーツールで記述する
styleに記述する
CSSを調整したりする時に使用する場所かと思いますが、新規セレクタを追加することも可能です。
以下の画像のように、『＋』をクリックして、セレクタを『*』に変更して記述します。
【推奨】consoleに記述する
こちらの方がコピペで済むので早く記述できます。やってる事は同じです。
JSの意味が分からなくてもコピペで問題ないので、是非使ってみてください。
デベロッパーツールより「console」を開く
以下の１行を追加して、Enterを押す
$$("*").forEach(v => v.style.outline = '1px solid red')
これで、同じように赤い枠線が表示されます！
横スクロールの大体の原因
コーディング作業時に謎の横スクロールが発生した際は、以上の方法を試してみてください。
デベロッパーツールの要素検証の矢印で探そうとすると逆に時間が掛かっちゃうので、とりあえず全ての要素に枠線をつけて一目ではみ出ている箇所を把握しましょう。
ちなみに、個人的に実務をやっててあるのは、以下の2つの原因です。
参考にしてみてください！
・widthを固定値で入れていて、レスポンシブ時にはみ出てしまっている。
→%で指定してあげる
・padding分がはみ出す。
→box-sizing:border-box;を追加する
