意図していない横スクロールの原因を一瞬で特定する方法

ウェブサイト制作時。初心者のかたにありがちですが、「知らないうちに横スクロールバーが発生したけど消し方がわからない！」という問題があります。
そんな意図しない横スクロールが発生しているとき、問題となっている要素を一瞬で特定するテクニックを紹介します。

「CSSを使う方法」と「JavaScriptを使う方法」の2種類があります。
「JavaScriptを使う方法」は具体的にはブラウザのデベロッパーツールのConsoleを使う方法になります。

問題の原因と解決方法は？

そもそもブラウザで意図していない横スクロールが発生するのは、CSSで横幅の計算を間違えて表示領域を超えてしまうことが原因です。
多くはwidthをpxで指定していたり、marginとpaddingの兼ね合い、table要素の横幅問題のいずれかでしょう。

各要素のアウトラインを視覚的にわかりやすく表示させれば問題となっている要素を特定できるので、CSSまたはJavaScriptを使って、全要素のアウトラインを確認できる状態にしましょう。

CSSで判定する方法

CSSの全称セレクタ（ユニバーサルセレクタ）を利用してoutlineを表示させます。
以下のコードをCSSに追加してください。

* {
	outline: 1px solid magenta;
}

これで全要素のアウトラインを確認できます。

これが * {outline: 1px solid magenta;} を適用させた状態。
一目瞭然ですね。

この状態でブラウザの右クリック「要素の詳細を表示」または「検証」または「調査」を行えば、横スクロールを発生させている原因の要素を特定できます。

しかしながら、わざわざCSSに記述してFTPでアップロードして…という作業も面倒なので、以下で紹介するようにブラウザのデベロッパーツールのConsole機能を使ってJavaScriptを実行したほうが簡単です。

JavaScriptで判定する方法

ブラウザのデベロッパーツールのConsole機能を使います。
使用するコードは以下。

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

ブラウザのConsole機能の使い方

ブラウザ上で右クリックで、Google Chromeの場合は「検証」を、Safariの場合は「要素の詳細を表示」を、Firefoxの場合は「調査」を実行します。

Consoleツールを開いたら上記のスクリーンショット、ピンクで囲った場所に $$("*").forEach(v => v.style.outline = '1px solid magenta'); をコピペしてください。
CSSで設定したときと同じように要素のアウトラインを確認できるようになります。

最後に

ウェブサイト制作、特にレスポンシブCSSコーディング時に、意図していない横スクロールが発生したときの解決方法を紹介しました。
「CSSを使う方法」と「JavaScriptを使う方法」の2種類、どちらでもお好みのほうで試せますが、後者のほう、ブラウザのデベロッパーツールのConsoleからJavaScriptを実行するほうが簡単です。
ぜひお試しください。