More than 5 years have passed since last update.

【CSS】iOS_Safariなどでコンテンツの幅がオーバーしてしまう時の対処方法

Posted at 2020-10-04

ページ制作時にブラウザの違いで
デザインが微妙に変わってくるのは良くあります。

その中でもiOS Safariなどで
コンテンツの幅がオーバーした時に対処した方法です。
幅100指定で横スクロールが出ると結構カッコ悪いです。
※iOSに限らない課題でもあります。

paddingやborderの幅の解釈の違い

レスポンシブを意識してコーディングしているのに
はみ出てしまう。その要因の1つとして考えられるのが
幅指定とpaddingの解釈です。
※ボックスモデルという各領域の解釈

例：

<div style="width:100%;padding:10px;">
TEXT
</div>

このような書き方ですと幅100%に加えて10pxの
内部余白を付けるという意味合いになります。

この場合は幅100%のボックスの中に、
余白10px付きのものがあるという意味合いに
なりますのではみ出ません。

<div style="width:100%;">
	<div style="padding:10px;">
	TEXT
	</div>
</div>

これはborderとpaddingの幅も含めてその要素の
サイズですと指示するためのものです。
paddingの10pxはあくまで100%の中の幅として
認識されます。

<div style="width:100%;padding:10px;box-sizing:border-box;">
TEXT
</div>

個人的に、この幅とposition(配置）辺りは
CSSの中でも特にわかり辛いなと思っています。
だからこそ実際に複数のパターンを書いてみて、
表示してみて覚える事をオススメします。