出ないはずの横揺れが出る
スマートフォン向けのウェブサイトを制作していて、出ないはずという思いに反して横揺れ（スクロール）が出る場合があります。
そんなときのチェック、対処方法を記録しておきます。
まず、横揺れが出るページを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指定を選択するべきです。
