…とあるスマホサイトをカスタマイズ中、
サイトの右側に余白ができてしまった時に使った、
時間をかけずに余白を簡単に消せる方法をピックアップしてみたいと思います！
1.box-sizing:border-box;を用いる
CSS3に対応しているブラウザのみにはなりますが、
スマホサイトであれば問題ないため、この…
box-sizing:border-box;を用いるのが一番スマートかなと思います^^
使い方の情報を集めているとユニバーサルセレクタで、
[html]
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
[/html]
参考：http://www.paulirish.com/2012/box-sizing-border-box-ftw/
や、
[html]
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
[/html]
このように指定しておくとよい、という情報もありました。
「*」ユニバーサルセレクタを使用することで全タグを対象としてしまうため、
「表示速度が遅くなる」というのはよく耳にします^^;
僕も実際に計測していませんが、
どちらかといえば、ユニバーサルセレクタは避けていましたが、
余白ができて困惑するぐらいなら設定しておこうかな…とは思いました（笑）
…で、僕の場合、
これでも余白が消えなかったのでさらに調べました^^;
2.overflow: hidden;を用いる
はみ出しているであろう要素部分を、
overflow: hidden;で囲うことで余白を消す、といった方法です。
ちょっと強引な気もしますが…
僕の場合はこの方法で見事、余白は消えました^^
widthを「100%」ではなく「auto」に設定する
それと少し古い情報になりますがレスポンシブデザインの場合は、
widthを「100%」ではなく「auto」に設定するという方法もあるんですね。
なんでも「auto」だとpaddingも含めた横幅になるそうです。
「box-sizing」を使う方法と合わせ、もしもの時のためにメモしておこうと思います（笑）
参考サイト
http://koukitips.net/responsive-enigma-blank/
http://weboook.blog22.fc2.com/blog-entry-391.html
http://index-japan.jp/?p=2280