[スマホサイト]左右に微妙にずれるのを解消するCSSメモ

こんばんは。 なんだか知らないけど微妙にはまってしまったのでメモ。

スマホサイト作成時になんか微妙に左右にずれる・・・なんて経験ありませんか？

そんなときに、とりあえず突貫工事的に直すためのCSSをメモしておきます。

#wrapなどの大枠にoverflow:hidden;を記述

#wrapや#wrapperなど（任意）の大枠にあたる部分にoverflow:hidden;を記述することで解決可能。

なんだこれ、めっちゃ簡単じゃん。

そもそもなんで左右にずれるのか？

それはどこかの要素が100％以上になってしまっているということ。 width:100%; などと指定している場合に、paddingやmarginなどを指定していた場合などに陥りやすいです。たぶん他にも原因はありますが。。。

最後に

※ただし、この方法は根本的な解決ではありません。ご了承下さい。 overflow:hidden; というのが大枠で指定したサイズ以上のコンテンツは無視するといった感じの意味になるので、枠からはみ出ている（であろう）箇所はなおっていません。なので根本的には解決となっていないことをご理解ください。 ただ、とりあえず左右にずれるのが気持ち悪い(ﾉД`)って方はお試し下さい。