エグウェブ.JP@オンライン/WEBセミナー・分析・WEBサイト制作

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

【CSS】スマホで表示した時に画面が横にスクロールする状態を解決する方法

time 2020/04/20

WordPressなどでウェブサイトを作成した時に、スマホで表示させた時に横にスクロールしてしまう場合の解決法です。

width : 100% からのはみ出し?

例えばですが、単純に、width : 100%の場合に要素に左右にmarginやpaddingが設定されていると、横幅が上限を超えるので横にスクロールできてしまいます。

width :100%+margin(左右)

シンプルに設定を考えると、

width :?%+margin(左右)<=width :100%

となっておかなければ、横にスクロールできてしまう、ということになるかと思います。

何かの要素が横幅を超えている

例えば、Phone6/7/8が375となっていますが、bodyがwidth:100%だったとしても、全体や横幅を囲んだ何かの要素が600pxとなっていたら、横幅をはみ出すので横にスクロールできてしまいます。

横幅を全体で100%以下とする。

width:80%、margin:0 10%であれば、合計が10% 80% 10%で合計100%になります。

要素の横幅(width)をpxで直接指定している場合、メディアクエリでスマホの場合は360px程度に変えるなど調整して、横幅をはみ出さないように調整が必要です。

ご参考下さい^o^)/

download(ダウンロード)

プロフィール

EGUWEB

EGUWEB

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

カテゴリー