Author
R.U.I(ルイ)
ガジェットブロガー
ECサイト運営会社でWEBエンジニア&マーケターとして日々従事しており、会社ではWindows、お家ではmacの両刀遣い。SEOやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしています。趣味でベースも嗜んでおり、F-Bassというハイエンドベースを愛用しています。
この記事のもくじ
CATEGORY
ルイログ愛用テーマSWELL

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

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

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

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

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

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

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

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

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

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

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

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

もくじ

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

スマホでだけ発生していた現象だったので、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デザインをっ!

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ
閉じる