スマホで横スクロールが出る原因をCSSで簡単に特定する方法

25.08.05

ウェブデザイン備忘録

1 スマホで横スクロールが出てしまう原因をCSSで特定する方法
2 使うのはたった2つのスタイル！
3 どうなるの？

スマホで横スクロールが出てしまう原因をCSSで特定する方法

WordPressやWeb制作をしていて、
「スマホで見たときだけ横スクロールが出てしまう…！」
という経験、ありませんか？

そんなときに役立つ、CSSで一発で原因を特定する方法をご紹介します。

使うのはたった2つのスタイル！

以下のCSSを一時的にブラウザ開発ツールやスタイルシートに追加することで、
画面からはみ出している要素を目視で確認できます。

/* すべての要素に赤い枠線をつける */
* {
  outline: 1px solid red;
}

/* 横スクロールを強制的に表示させる */
body {
  overflow-x: scroll !important;
}

/* すべての要素に赤い枠線をつける */

* {

outline: 1px solid red;

}

/* 横スクロールを強制的に表示させる */

body {

overflow-x: scroll !important;

}

どうなるの？

赤い枠線がページ内のすべての要素に表示されます。
横スクロールが有効になるので、画面からはみ出している要素が一目瞭然！
スマホで横スクロールが出ると、ユーザー体験が一気に落ちてしまいます。
そんなときは、この**「outline + overflow-x」チェック法**で、ぜひ原因を探ってみてください！