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

2017年10月14日カテゴリー : CSS コメント : 1

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

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

どんな空白なの？

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <div class="content">
        <p>グリーンカレーは日本でタイカレーと呼ばれるタイ料理。正確にはカレー料理ではなく、タイ料理のゲーンと呼ばれる多様な汁物の中で、香辛料を利かせた料理を外国人向けに便宜上カレーとして呼称している。ゲーン・キャオ・ワーンとはタイ語で汁物・緑・甘いを意味する。</p>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>title</title>

</head>

<body>

<p>グリーンカレーは日本でタイカレーと呼ばれるタイ料理。正確にはカレー料理ではなく、タイ料理のゲーンと呼ばれる多様な汁物の中で、香辛料を利かせた料理を外国人向けに便宜上カレーとして呼称している。ゲーン・キャオ・ワーンとはタイ語で汁物・緑・甘いを意味する。</p>

</div>

</body>

</html>

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

@charset "utf-8";

.content p {
    width: 900px;
    margin: 20px;
    padding: 20px;
    border: solid 1px #ccc;
}

@media screen and (max-width: 800px) {
    .content p {
        width: 100%;
    }
}

@charset "utf-8";

.content p {

width: 900px;

margin: 20px;

padding: 20px;

border: solid 1px #ccc;

}

@media screen and (max-width: 800px) {

.content p {

width: 100%;

}

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タグで囲むだけです。

<body>
    <div class="wrapper">
        <div class="content">
            <p>グリーンカレーは日本でタイカレーと呼ばれるタイ料理。正確にはカレー料理ではなく、タイ料理のゲーンと呼ばれる多様な汁物の中で、香辛料を利かせた料理を外国人向けに便宜上カレーとして呼称している。ゲーン・キャオ・ワーンとはタイ語で汁物・緑・甘いを意味する。</p>
        </div>
    </div>
</body>

<body>

</div>

</body>

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

@charset "utf-8";

.wrapper {
    width: 900px;
}

.content p {
    margin: 20px;
    padding: 20px;
    border: solid 1px #ccc;
}

@media screen and (max-width: 800px) {
    .wrapper {
        width: 100%;
    }
    
    .content p {
    }
}