CSSを駆使して右にできた謎の余白を消す方法

2024 6/13

ルイログをご覧いただきありがとうございます。

ECサイト運営会社でWEBエンジニア＆マーケターとして日々従事している R.U.I（ルイ@rui_bass）です。

ふと当サイト（ルイログrui-log.com）をスマホで見てスクロールさせていると、

「なんかスクロールが不安定で横に少しだけ動くぞ・・・」ということに気づきました。

はて、これはなんぞや？と真横にスクロールさせてみたところ・・・

R.U.I（ルイ）

少しだけ右に余白ができてしまっているよ・・・

ということに気づきました。

こりゃいかん！めっちゃ気になる！気になりすぎて夜も眠れない！！

・・・と思い、早急に修正しました。

その「サイトの右にできた謎の余白を消す修正方法」をここに記しておきます。

ルイログで実際に発生していた右の余白

スマホでだけ発生していた現象だったので、GoogleChromeのスマホ表示でスクリーンショットを撮りました。

そう、この右にできている少しだけの余白です。

詳しく見たところ、2pxだけ余白ができてしまっていたようです。

たった 2pxですが、これがあるだけで縦にスクロールするときもちょっと横揺れしたりしてスクロールしにくくなるし、スクロールバーを消していなければスクロールするたびに横スクロールバーが見えてしまって邪魔・・・ということに。

さっそくこの余白を消し（見えなくし）にかかりましょう。

方法としては、1つ大枠「wrap」を作成し、そこからはみ出た部分は隠そうぜ！という方法。

具体的な HTML / CSS を紹介します。

<body>
 <div class="wrap">

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

 </div>
 </body>

HTML は簡単にイメージできるよう大枠を記しました。

header 〜 footer がもともとあって、wrap で囲んだ div を新しく足すイメージです。

.wrap {
     overflow: hidden;
 }

CSSはこれだけ！

ルイログの場合はもともと左右のボーダーをつけるために全体を囲っていたので、そこへ「overflow:hidden;」を追記した形で修正を試みました。

結果、スッキリピッタリ収まって変な余白は解消！

サクッと解決することができました。

「CSSを駆使して右にできた謎の余白を消す方法」を私自身の備忘録を兼ねて紹介しました。

会社でもコーディングをしていて思うのは、

なんてことを、自分でも思うときがあるし、後輩からの相談でもよくあります。

そういうとき、知識と発想力があれば解決や実装までの道のりがより早くより的確になります。

知識があれば方法論がすぐにわかるし、発想力があれば解決方法の調べ方がすぐにでてきます。

初学者の方は詳しい人に質問してみたり相談してみたり、知識と発想力を鍛えるためのコミュニケーションも取れるとより成長が早くなりそうですね。

R.U.I（ルイ）

コーディング楽しい！

良きWEBデザインをっ！