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

2023年1月1日

R.U.I

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

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

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

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

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

2次元のルイ

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

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

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

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

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

この記事の著者

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。プロフィール詳細やレビューガイドライン

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

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

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

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

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

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

全体をwrap（包んで）し「overflow:hidden;」で余白をなくす！

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

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

HTMLサンプル

<body>
 <div class="wrap">

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

 </div>
 </body>

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

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

CSSサンプル

.wrap {
     overflow: hidden;
 }

CSSはこれだけ！

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

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

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

まとめ：コーディングは発想力が必要ですね

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

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

「こういったときはどういう方法で実装すれば良いか？」
「微妙に見栄えがおかしい！修正したいけどどうやって修正すれば良いかわからない・・・」

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

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

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

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

R.U.I

コーディング楽しい！

良きWEBデザインをっ！

他のWEBデザイン関連の記事を読む

この記事が気に入ったら
フォローしてね！

Follow @rui_bass

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！