エグウェブ.JP@オンライン/WEB講座・セミナー・WEB分析

WEB分析・ホームページ・WEBサイト作成・WordPress、Googleアナリティクス、LINEスタンプ、Photshop・illustrator、Excelの講座やオンラインセミナーを開催中!

【CSS】右に何も無いのになぜかスマホで右にスクロールできてしまう?右側にできた謎の余白を消す方法

time 2020/04/20

横幅は収まっているはずが・・・?

cssを見ていても、横幅は画面に収まっているはずなのに、なぜか横にスクロールが出来てしまう。

こんな時の、ひとまずの対処法です。

DeveloperToolsでCSSのプロパティ&値を片っ端から消す

おそらく、position、top、leftあたりが横幅を操作している可能性が高いと思いますが、「GoogleChromeのDeveloperToolsでCSSのプロパティ&値をを片っ端から消す」…おそらく、この方法が一番早いのでは、と思います。

一番上のhtmlから順番に「プロパティ&値」を消していきます。念のため、おそらく関係ないであろうborderやfont-関係も全部消してみましょう。

そうすると、どこかで、この横幅を操作している原因が見つかるはずです。

おそらく、position、top、leftあたりが横幅を操作している可能性が高いと思いますが、

発見しました!

今回の場合は

nav class=”toolbar”

これが原因だったようです。

セレクタを見てみると

left : calc(85% – 10vw);

【calc( )】
プロパティの値を計算式で指定する方法。

この値がどのような意図で入っていたのかがパッと見ただけでは分かりませんでしたが、このままだとメディアクエリも設定されてないので、スマホでも右側にこのツールバーが(85% – 10vw)の右側の位置に寄ってしまいます。

チェックを外してOFFにしてみます。

解決できました!!

ちょっと強引な探し方な気もしますが、もし途方に暮れた時もこれで解決するかもしれません。ご参考下さい(^o^)/

download(ダウンロード)

プロフィール

EGUWEB

EGUWEB

【皆さまの人生に最良のファーストステップを】WEBサイトを作りたい!WEB分析を学びたいけど分からない。とりあえず色々と知りたい!皆様の悩みを解決できるように頑張ります。 [詳細]

カテゴリー