2020/09/22 (更新日: 2020/10/22)

サイトの右側の謎の余白を消す方法【１分で解決&レスポンシブ対応】

サイト作成時に余白が出来ることって誰もがありますよね。
簡単に解決できるので見ていきましょう！

サイトの右側の余白を消す方法【１分で解決&レスポンシブ対応】

今回はAirbnb（エアビー）の模写を参考にしてみます。

このようになんでもなさそうに見えますが、
右側にスクロールしてみると、、

このように余白が出来てしまっています。

模写サイトを作ってるときに、
右側にスクロールすると、なぜか余白が出来てしまっている、、、。
同じような初学者の方は多いはず。。

要するに、wrapで囲ってはみでた部分をoverflow: hiddenで隠そうってことです。

実際にやっていきましょう。

HTMLはこんな感じです。
よくある構成にしています。
body,header,content,footerですね。


<body>
 <div class="wrap">

 <header></header>
  <div class="contents">
   <p>コンテンツ</p>
  </div>
 <footer></footer>

 </div>
 </body>

CSSはclass名(wrap)にoverflow: hiddenを与えるだけです。


.wrap {
     overflow: hidden;
 }

簡単ですね。

wrapで囲むのはbodyタグの内側になります。

サイト作成時に使えるのでぜひ活用してみてください(｀・ω・´)