WordPressブログはじめてみる?

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

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

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

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

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

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

[css]#wrap{
overflow:hidden;
}[/css]

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

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

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

最後に

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

シェアしてくれたらうれしー。
ABOUT US
アバター画像
矢野キチ
フリーランスのWEB屋です。このブログでは「自由に生きる」をテーマに生活の中で思ったことをザクザク書いていきます。身体的特徴としては目が細いので、ゴミがあまり目に入らないので人生得しています。

このサイトで使っているWordPressテーマ
「STORK19」

当ブログはWordPressを使用して作られています。そしてデザインテンプレートはSTORK19を使用しています。

3件のコメント

心からありがとう♪ めっちゃ助かった