rui-log.com
CSSを駆使して右にできた謎の余白を消す方法

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

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

R.U.I(ルイ@rui_bass)です。

ふと自分のサイト(ルイログrui-log.com)をスマホで見てスクロールさせていると、

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

はて、これはなんぞや?と真横にスクロールさせてみたところ、
少しだけ右に余白ができてしまっている・・・

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

こりゃいかん!めっちゃ気になる!気になりすぎて夜も眠れない!!(熟睡しました)

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

その修正方法をここに記しておきます。

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

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

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

謎の右の余白がでた状況

※小さめ表示にしていたものをスクリーンショットで撮影したので少し拡大しています

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

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

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

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

全体をwrap(包んで)し「overflow:hidden;」で余白をなくす!

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

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を駆使して右にできた謎の余白を消す方法」を私自身の備忘録を兼ねて紹介しました。

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

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

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

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

知識があれば方法論がすぐにわかるし、

発想力があれば解決方法の調べ方がすぐにでてきます。

 

本職ではないのだけれど、コーディング楽しい!

 

良きWEBデザインをっ!