スポンサーリンク

出ないはずの横揺れが出る場合の対処方法

スポンサーリンク

出ないはずの横揺れが出る

スマートフォン向けのウェブサイトを制作していて、出ないはずという思いに反して横揺れ(スクロール)が出る場合があります。

そんなときのチェック、対処方法を記録しておきます。

まず、横揺れが出るページをChromeのデベロッパーツールなどで調べます。まず根本的にはみ出ている箇所があれば、そこを収まるサイズにhtmlファイルやスタイルシート(cssファイル)を修正します。

次に、imgやtableなど枠があるボックス要素について、borderとpaddingをチェックします。枠が付くように指定している場合、その枠のぶんをwidthに含めるか含めないかの選択肢があり、そこを「widthに含めない」としているため横にはみ出ている可能性があります。「widthに含める」ように”box-sizing: border-box;”と修正すれば、収まるようになります。

上記までの確認が済んで、もう横揺れしなくなれば、そのページは対処終了です。

小数点以下がいたずらをしている

上記が済んでもなお横揺れがある場合、要素のmargin, border, paddingを順番に見ていきます。

重点的に見るのは、marginやpaddingを割り合いで指定している箇所、emで指定している箇所になります。

margin, border, paddingのいずれかに小数点以下が出ている箇所を見つけたら、横方向についてすべて足し合わせてみます。足してみた結果、微妙に小数点以下のぶん多くなっている要素があれば、そこが原因の可能性大です。

指定している値を小さくするか、pxでの指定に変えてみます。ぴったりサイズに収めたいなら、ぜひpx指定を選択するべきです。