【CSS】 width:100% で画面からはみ出す原因
スマホサイトなどでレスポンシブサイトを作成する場合
inputタグを横幅いっぱいに広げた時にはみ出して表示
または、ずれて表示されることがあります。
これは、inputタグにはデフォルトで枠線が設定されているので その分を含めて横幅が設定するためにずれてしまうようです。
いくつか方法があるのですが、一番簡単な方法
box-sizing というCSSがあります。
これに
を設定すると
枠線を含めたサイズという設定になります。
こうすることにより、視覚的にwidth:100%が設定することができます。
デメリットとして、旧ブラウザ(IE8等)では対応していない場合がありますので、注意が必要です。
inputタグを横幅いっぱいに広げた時にはみ出して表示
または、ずれて表示されることがあります。
これは、inputタグにはデフォルトで枠線が設定されているので その分を含めて横幅が設定するためにずれてしまうようです。
いくつか方法があるのですが、一番簡単な方法
box-sizing というCSSがあります。
これに
box-sizing:border-box
を設定すると
枠線を含めたサイズという設定になります。
こうすることにより、視覚的にwidth:100%が設定することができます。
デメリットとして、旧ブラウザ(IE8等)では対応していない場合がありますので、注意が必要です。
著者:poroa | 投稿日:2016年09月16日 | カテゴリ:CSS