【CSS】スマホで幅100％で要素がはみ出してしまう原因と対策

css

スマホページを作成しているたまに発生するのが幅を100%にしているのに微妙に横にスクロールが発生してしまってる現象。たまに画像がはみ出してる場合はすぐに原因がわかるんですがそうでないときもたまにあるんですよね。
今回はそれを検証してみました。

考えられる原因と対策

いくつか考えられる原因として下記に記載してみました。

そもそも幅の指定をpx（ピクセル）にしてしまっている

たまにやってしまいまいますが、要素の幅がピクセルでスマホの画面の幅を超えてたりCSSで間違えてピクセルで指定すると横にスクロールが発生したりします。

その場合の解決方法としては、スマホの場合は基本的にはCSSで幅を「100%」にする。これで横幅に収まると思います。


#wrapper{
	max-width:100%;
}

注意点として表示する端末の幅に合わせて適切なサイズで表示する為にヘッダーのメタタグに下記を記載してます。

余白（padding)や枠線(border)を設定している

割とここは忘れがちなんですが、CSSで幅を100%にしていても、marginやpaddingは幅に含まれません。あくまで幅の解釈は枠線（border）や余白（padding）を含まない幅ですので、余白（padding)や枠線(border)をCSSで設定しているとはみ出します。



/*外側のdiv要素*/


	
内側のp要素

上記の場合だと、親の要素320pxに対して子要素の幅を100％にしているものの余白（padding）と枠線（border）を設定しているのではみ出します。
対応策としては、「box-sizing」というプロパティがあるのでこちらで「border-box」を設定すれば子要素は親要素に収まるので、はみ出す事はなくなります。

box-sizingってなに？

そもそも「box-sizing」というCSSのプロパティなのですが、こちらはCSS3から追加されたプロパティですが、ボックスサイズ(width, height) の算出方法を指定する際に使用するプロパティです.

値 説明
content-box padding と border の幅を要素の幅と高さに含めない. デフォルト値.
border-box padding と border の幅を要素の幅と高さに含める.

上の表を見ていただければ分かりますが、要素の幅に余白と枠線も含めるか含めないかの設定です。このプロパティはめちゃくちゃ便利です。これまでPCでfloatさせる時に要素の幅（width）を設定していましたが、わざわざ余白を差し引いた幅（width）の設定をしていたのでもうそんな煩わしい計算する必要がありません。
もちろんスマホも同じです。スマホでもよく値をピクセルではなく%(パーセント)で設定する事が多いのですが、その余白分を差し引いた幅（width）の設定なんて考える必要がないのです。

どこが原因が分からない場合の対策

これまでの方法はあくまでもはみ出してしまう原因と対策なんですが、実際のところどこが原因なのか探すのがそもそも大変なんですが、自分は下記の方法で原因を探してます。

googleChromeのディベロッパーツールで原因を探る

ブラウザのgoogleChromeを右クリックして「検証」をクリックすると下記の様に選択した要素のhtmlと対応しているCSSを確認できます。そこでざっくり大枠の要素から探していくのも手です。

chromeのディベロッパーツールの画面

またCSSの画面ではブラウザ上のみでCSSのプロパティを変更することができるので、怪しい要素のCSSを変更してみてどう変化するのか見てみるのもいいかと思います。もちろん実際にCSSが変更される訳ではないので、ほんとに変更する場合はちゃんとCSSファイルを弄ることになります。

少しズレではあればoverflowで隠してしまう

これは今回自分が実践した方法ですが、少しのズレであればoverflowで隠してしまうという方法です。
というのも私が遭遇したのはほんとに1ピクセルも動いてないけど、微妙に右側にズレがあるような程度だったので実践しました。


#wrapper{
	overflow:hidden;
}

私は、一番要素の大枠にこの設定をして回避しました。ただしこの方法は根本的な解決になっていないので、オススメはしません。