WEB制作初心者コーダー必見！意図していない横スクロールの原因となる要素を特定する方法２選
WEBサイト制作のコーディングをしていると、必ず通るのが横スクロール問題。
意図していない要素がはみ出てしまい、横スクロールが出現する問題ですね。
最近は横スクロールを出すことなくコーディングができていたのですが、WordPressにコードを直書きすると頻繁に横スクロールが出る問題が発生します。
それはWordPressにコードを直書きすると、改行やスペース部分に勝手に意図していない「pタグ」や「divタグ」が出現するからです。
今回はそれら横スクロールの原因となる要素を特定する方法をご紹介。
どちらの方法もGoogle Chromeの検証ツールを使用します。
outlineを表示させる方法
各要素にCSSのoutlineを表示させれば、一目瞭然でどの要素が飛び出ているのかがわかります。
* {
outline: 1px solid magenta;
}CSSで上記のような全ての要素にスタイルを適用させるユニバーサルセレクタを使ってもいいのですが、Google Chromeの検証ツールを使うときはconsoleを使えば一瞬です。
$$("*").forEach(v => v.style.outline = '1px solid magenta');consoleに上記のコードをコピペすれば全要素がピンクのアウトラインで囲まれます。
これではみ出ている要素を特定できそうですが、これでも解決しない場合は次の方法を試してみると良いでしょう。
検証ツールで要素を1つずつ消す方法
WordPress案件でコードを直貼りし、意図していない「pタグ」が出現した場合、上記のoutlineで囲む方法は役に立ちませんでした。
要素が空だと、たぶんoutlineに囲われないためだと考えられます。
そんなときは検証ツールで要素を1つずつ消してみましょう！
Google Chromeの検証ツールを開きElementで要素を選択し、右クリック→「Delete element」で選択した要素を消していきましょう。
この時選択する要素は、sectionやdivなどの大きな要素を１つずつ消していきます。
原因となる要素を消したときに横スクロールがなくなるので、徐々に要素を絞り込み特定していくと良いでしょう。
少し地道な方法かもしれませんが、これで確実に原因が判明するのでめちゃくちゃ使える方法です。
コーディングを勉強し始めてから１年くらいになりますが、先日初めてこの方法を知ったときは結構衝撃的でした。
常にGoogle Chromeの検証ツールを使用しているのに、そんな機能があったなんて気が付きませんでした。
これでもう恐るものはなにもない。