レスポンシブデザインで右側に謎の空白ができる訳

 スマホからのネットアクセスが増えたことで、Webデザインをしている人はレスポンシブ対応にしているかと思います。最近ではPCからのアクセスより多いサイトもあるようで、レスポンシブデザインの重要性はより高まっていくのでしょう。

 で、ホームページやブログテンプレートなどを作成していて、ある日ふと気が付くとスマホ画面の右側に意図していない空白があったりするわけです。おぉ、実に恐ろしい。

どんな空白なの?

次のようなHTMLがあるとします。

対するCSSを次のようにしました。

p要素をパソコンの画面では900px、800px以下のタブレット・スマホの画面では横幅いっぱいに表示するレスポンシブデザインです。

Google Chromeの右クリックから検証ツールを立ち上げて、スマホ環境での動作確認を行います。

「Select an element in the page to inspect it」ツールを使うとわかりやすいです。画面をクリックすると、どのHTMLが対応しているのかを確認できるおなじみのツールですね。

これでp要素の上にマウスを移動すると、画面の右端に奇妙な空白があることが確認できます。

原因はmargin・padding・borderである

パソコンでの表示に切り替えてください。再度、Select an element in the page to inspect itツールでp要素の上にマウスを移動させます。

よく見ると、900pxで表示させたかったp要素が942pxになってしまっています。HTMLの経験が長い人であればすぐにピンときたと思いますが、これはp要素の横幅に加えて、左枠線:1px+左パッディング:20px+右パッディング:20px+右枠線:1pxを合計したものです。

試しに先ほどのCSSでパッディングを極端に大きくしてみてください。例えば100pxにしてみると、右側の謎余白が前よりも大きくなっていることがわかります。

もちろんパッディングだけでなく、マージンや枠線にも影響を受けます。いろいろな数値を試してみるといいかと思います。

どうやって解決するの?

ソースコードを次のように修正します。修正する必要のない部分は省略しています。単純にdivタグで囲むだけです。

スタイルシートはこちら。外側のwrapperクラスで幅の切り替えを行うようにします。

狙いどおりの動作になりました。

ネットで検索すると、body要素内のHTMLをすべてラップし、overflowにhiddenを設定する方法をよく見かけます。修正箇所がたくさんある場合にはそれでも仕方ないのかもしれませんが、HTMLの基本をきちんと意識してレスポンシブ対応すれば、よりシンプルに解決することができます。

トライ&エラーを繰り返せばいつかは解決できるかもしれませんが、落ち着いてよく確認してみてください。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP