css コーディング中に意図してない横スクロール原因を特定する方法

HTML、cssのコーディング中に意図しないよろこスクロールが発生することがよくあります。

横スクロールが出ることの原因としてはコンテンツ幅をpx指定した際にウィンドウ幅より指定した幅のpxが上回った時、もしくはposition: sbsolute;で指定したポジションで-pxを指定した際ウィンドウサイズを越えた場所に設置された際によくこの現象が現れます。

原因の特定

一つは以下のコードをcssに記述します。

このコードは全ての要素に アウトラインを表示させ、ウィンドウズサイズよりはみ出した要素を特定するコードになります。

* {
	outline: 1px solid magenta;
}

こうすることでどの要素がウィンドウサイズをはみ出しているか視覚化でき、要素を削除してた後横スクロールが出なくなればその要素が横スクロールを表示させている原因として特定できます。

原因の特定その2 検証からブロック毎に削除する

下の画像で「delete element」をクリックすると選択した要素、セクションをweb上で削除できます。

これを上から行っていき、削除したタイミングで横スクロールがなくなったら直前に削除した要素が横スクロールを出現させてる原因になります。

デベロッパーツールで原因を特定

グーグルクロームでしたら右クリック→検証をクリックでデベロッパーモードに変更し、consoleタブをクリックします。

以下のコードを貼り付けてもらうと要素にoutlineを弾けるようになります。

$$("*").forEach(v => v.style.outline = '1px solid magenta');

すぐに原因を特定できる内容だったらいいのですが、このような地道な検証で特定を行っていくとおのずとコーディングをしてる際にどの場所で横スクロールを表示させているかすぐにわかるようになります。