Webサイトを作成しているとブラウザで予期せぬ横スクロールが発生してしまうことがある。 ブラウザで予期せぬ横スクロールが発生するのはCSSで幅の計算などを間違えて表示領域を超えてしまうことが原因だ。 例えばこちらのサンプルをブラウザで見ると横スクロールが発生している。 横スクロールが発生している原因の要素 一般的に横スクロールが発生している要素の確認する際はCSSの全称セレクタ(ユニバーサルセレクタ)でoutlineを付けて確認されることが多い。 * { outline: 1px solid red; } しかし、CSSに追加するのは若干面倒なのでブラウザのデベロッパーツールのConsoleで以下のJavaScriptを実行したほうが簡単にoutlineを追加できる。 $$("*").forEach(v => v.style.outline = '1px solid red') outli