【CSS】レスポンシブ時にできる謎の右余白（隙間）をサクッと解決しよう！

レスポンシブコーディング中、画面右に謎の余白ができて困っていませんか？

謎すぎてどこを触れば解決するかイメージがわかないですよね。。

でも大丈夫。

この現象はコーディング初心者あるあるなので、ご安心くださいませ。

原因はズバリ、要素の合計幅が画面サイズをオーバーしたからです。

この記事では、コーディング中にできる謎余白ができる理由と、原因の特定方法から解決策までご紹介します！

あなたは今後二度とこの問題に悩むことはなくなるでしょう。

画面右に謎の余白ができる理由は、要素の幅が画面幅より大きいから！

上でもお伝えしましたが、レスポンシブコーディング中に謎の右余白ができてしまうのは、要素の合計幅が画面幅（bodyタグの幅）をオーバーしたからです。

もう少し具体的に言うと、デベロッパーツールを使って画面幅375pxでみている時、テキストや画像などの幅が376px以上になった時に右余白が出現します。

※要素の合計幅とは、1つの要素だけでなく横並びになっている要素の幅も含みます。

つまり「余白ができた」というより「要素がはみ出しているだけ」ですね！

これが画面右にできる余白の正体です。

そのため、画面幅を超えてしまっている要素を特定し、要素の幅（width）や余白（padding・margin等）を調整すれば解決します。

謎の右余白を作った原因を特定する方法

では、画面幅を超える要素はどのように見つけるか？

以下3つの方法が効率的でおすすめです。

1. 余白部分にカーソルを当てていく
2. 全ての要素にoutlineを指定する
3. パーツごとにdisplay: none;を指定する

1つずつ解説しますね！

余白部分にカーソルを当てていく

最も簡易的な方法は、デベロッパーツールにて余白をマウスカーソルでなぞる方法です。

上から余白をなぞっていき、選択できる要素を探すイメージですね！

原始的ではありますが、ほとんどの場合この方法で見つけることができます。

高速でなぞると反応しないことがあるので、ゆっくり、丁寧になぞるのがポイントです。

この方法で原因を特定できない場合、次の方法に進みましょう〜！

全ての要素にoutlineを指定する

次の方法は、全ての要素にoutlineプロパティを指定することで、要素の外枠を線で表示し、はみ出した要素を視認する方法です。

※outlineプロパティとは要素に輪郭線をつけるプロパティのこと

余白部分にカーソルを当てても原因が特定できない際は、この方法を使いましょう。

やり方は簡単で、CSSファイルにて全ての要素とその擬似要素に「outline: 2px solid red!important;」と指定するだけです。

*,*:before,*:after {
    outline: 2px solid red!important;
}

上記のように、全称セレクタを使うのがおすすめですね。

※色などの値は任意です。

念の為、CSSファイルの1番下に記述するとよいでしょう。（後から記述されたものが反映されるため）

あとははみ出している要素を見つけて、問題を排除すればOKです。

パーツごとにdisplay: none;を指定する

まれに、outlineを指定してもはみ出した要素が見つからない場合があります。

その場合は、デベロッパーツールで各要素にdisplay: none;を指定し、1つ1つ非表示にすることで原因を切り分けて特定するとよいでしょう。

やり方はシンプルで、bodyタグ以下の最上位の親要素に対してdisplay: none;を指定するだけ。

headerタグやdivタグなど、各セクションごとに試していきます。

1つずつ試していき、余白や横スクロールバーが消えたら、その部分に原因があると判断できますよ。

あとはその部分の子孫要素に対してdisplay: none;を指定することで、さらに絞って原因の要素を特定すればOKです。

原始的ではありますが、この方法が最も確実と言えます。

やや面倒な方法ではあるので、「余白にカーソルを当てる」「全ての要素にoutlineを指定する」を試しても原因を特定できない場合に使ってみましょう！

原因はわかったけど解決できない時にチェックしたいポイント

原因の要素を特定できたら、あとは幅や余白などを調整し、要素の合計幅が画面幅を超えないようにすれば余白は消えます。

ただ、初心者の頃は知ってる知識をフル活用しても余白が消えないこともありますよね？

ここからは、弊社スクールの生徒さんもよくつまづくポイントと解決策をご提示いたします！

widthで幅をガチガチに固定していないか？

要素に対してwidth: 800px;などガチガチに幅を固定していないか確認しましょう！

幅をwidthで固定していると、スマホ画面になった際にはみ出して右余白ができてしまいます。

レスポンシブ対応する際は、max-widthを使ったり、単位を%やvwなどで可変となるようにしましょう！

画像をimgタグでそのまま表示していないか？

画像をimgタグで配置する際、そのままにしていませんか？

画像はスタイルを何も指定しないと、元々の画像データの幅で表示される仕様となっています。

800pxの画像ならデフォルトで800pxで表示されます。

大きめの画像を配置する際は、imgタグにwidth: 100%、height: auto;を指定しておくとはみ出さなくなるのでおすすめです！

box-sizing: border-box;は指定されているか？

右余白の原因の要素にpaddingで余白を指定している時、box-sizing: border-box;が指定してあるか確認しましょう！

box-sizing: border-box;を指定していないと、要素の幅（width）にpaddingの値が含まれないため、想定外の幅になることがあります。

上記のように、要素の幅が大きく変わってしまいます。

paddingの値をwidthに含めた方がコーディングが楽なので、なるべくbox-sizing: border-box;を指定しておきましょう！

box-sizingの指定は全ての要素につけた方が良いので、CSSファイルに以下のような記述をするのがおすすめです。

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

⇒box-sizingについてはこちら

white-space: nowrap;を指定していないか？

「white-space: nowrap;」を指定していないか確認しましょう！

white-space: nowrap;は、画面幅が狭くなってもテキストが改行されないようにするプロパティで、指定された要素はテキスト量に応じた幅を持つことになります。

右余白の原因となりますので、不要な部分は削除するとよいでしょう。

変な位置で改行されたくない場合は、brタグやpタグを追加するのがおすすめです。

flex-shrink: 0;を指定していないか？

flex-shrinkプロパティは、フレックスアイテム（display: flex;が指定された要素の子要素）の伸縮率を指定します。

flex-shrinkの値を「0」にすると、「伸縮させない」という指定となるので、レスポンシブ時に画面サイズより大きくなる可能性があります。

display: flex;での横並びをblockにして縦並びにするなど、柔軟に対応しましょう！

また、そもそも横並びになっているのが原因の場合は、display: flex;を解除するか、flex-wrap: wrap;として画面幅に応じて折り返す指定をするのが良さそうです。

【まとめ】謎の右余白は、要素を画面幅の中に収めれば解決できます。

コーディング中にできた謎の右余白は、要素の幅を画面幅に収めることで解決できます。

原因の特定方法と解決策の傾向を一度つかんでしまえば、簡単に解決可能です。

この調子でコーディング学習をガシガシ進めていきましょう！

最後にこの記事をまとめます。