Author
R.U.I(ルイ)
ガジェットブロガー
ECサイト運営会社でWEBエンジニア&マーケター・WEBコーダーとして日々従事しており、会社ではWindows、お家ではMacの両刀遣い。iPad Proは毎日持ち歩いています。PCデスク周りを快適にすることやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしているガジェットブロガーです。写真撮影が趣味になりました。
ルイログをGoogleニュースで読む
この記事の目次
CATEGORY

2次元のルイ

ブログやるなら SWELL × ConoHa WING がおすすめ!ルイログはこの構成で運営しています

ルイログ愛用ブログテーマSWELL

今選ぶBESTサーバー ConoHa WING

ルイログも愛用中!

YouTubeチャンネル開設しました!
ステマ規制への対応と記事内広告について

本サイト内のコンテンツはルイログが独自に制作しています。 メーカー等から商品提供を受けることもありますが、その場合は記事内にPR表記と提供を受けている旨を明記しています。 また、コンテンツの内容や評価に関する決定にも一切関与されていません。 アフィリエイトプログラムにより記事内で紹介する商品を購入することで当サイトに売り上げの一部が還元されることがあります。 詳しくはサイト運営ポリシーをご覧ください。

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

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

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

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

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

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

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

2次元のルイ

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

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

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

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

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

もくじ
この記事の著者
R.U.I

ガジェットブロガー

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デザインをっ!

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

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

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