レスポンシブデザインで右側に謎の空白ができたときの解決策

公開日 2014/07/15

奥田光輝

この前、レスポンシブデザインを制作していたら突然というか気づかないうちに右側に結構な幅の空白が空いていました。あれ？おかしいなおかしいなと思ったので、そのときの解決策を試行錯誤も踏まえ載せてみます。

背景

今回のレスポンシブデザインはウィンドウサイズを縮めていったらそのまま全体的にしゅるしゅると縮小していくものだったのでwidthは基本的には%で設定しています。

とりあえず、一通り作り終え、スマートフォンで確認したときです。
あれ？斜めに動く。。。

まじすか。え、でもPCだと大j…空白あるわ。

うおーーい！（テストアップ3時間前）←ここから最終調整やなんやするのに。。。

恥ずかしながらviewport設定するのを忘れてました。なんやなんや、原因これか。

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

これで解決！…と思いきやまだ空白残っております。なぬっ!?

widthを100%に設定していた場合、paddingでwidthが100%を超えてしまって空白してるのかもっていっている記事があってそうかもと思い、width: 100%;をすべてコメントアウト。…変わってない。なぬっ!??

時間もなくなってきたときに出てきた記事。wrapperにoverflow: hidden;かけたら直ったよーとのこと。
直感でこれはいけるなと確信。
記事を見てから5秒後にコードを書き換え、更新!

できた。

結果、このレスポンシブのサイトではwrapperにoverflow: hidden;をかけたら直りました。（もちろんviewportは設定した上の話です。）overflow: hidden;しなくてもレスポンシブがでているサイトがある中、この対応は納得できないがまずはよしとしよう。