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

ウェブサイト制作時。初心者のかたにありがちですが、「知らないうちに横スクロールバーが発生したけど消し方がわからない！」という問題があります。 そんな意図しない横スクロールが発生しているとき、問題となっている要素を一瞬で特定するテクニックを紹介します。 「CSSを使う方法」と「JavaScriptを使う方法」の2種類があります。 「JavaScriptを使う方法」は具体的にはブラウザのデベロッパーツールのConsoleを使う方法になります。 問題の原因と解決方法は？ そもそもブラウザで意図していない横スクロールが発生するのは、CSSで横幅の計算を間違えて表示領域を超えてしまうことが原因です。 多くはwidthをpxで指定していたり、marginとpaddingの兼ね合い、table要素の横幅問題のいずれかでしょう。 各要素のアウトラインを視覚的にわかりやすく表示させれば問題となっている要素を

[syonx]

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

[remonoil]

"しかしながら、わざわざCSSに記述してFTPでアップロードして…" そんなやつおらんやろ