web creating

POROA

【CSS】 width:100% で画面からはみ出す原因

スマホサイトなどでレスポンシブサイトを作成する場合
inputタグを横幅いっぱいに広げた時にはみ出して表示
または、ずれて表示されることがあります。

これは、inputタグにはデフォルトで枠線が設定されているので その分を含めて横幅が設定するためにずれてしまうようです。

いくつか方法があるのですが、一番簡単な方法

box-sizing というCSSがあります。

これに
box-sizing:border-box

を設定すると

枠線を含めたサイズという設定になります。

こうすることにより、視覚的にwidth:100%が設定することができます。

デメリットとして、旧ブラウザ(IE8等)では対応していない場合がありますので、注意が必要です。
著者:poroa | 投稿日:2016年09月16日 | カテゴリ:CSS
  • ■同じカテゴリの記事
  • ■よく見られている記事
■最新記事
■カテゴリ一覧
CSS
Excel
Google Analytics
HTML
jQuery
PHP
SEO
WordPress
ホームページ作成
ホームページ作成講座
未分類
楽天
■アーカイブ
2018年9月
2016年12月
2016年11月
2016年10月
2016年9月
2016年8月
■ランキング