Q&A
Bootstrapを元に、独自でcssを追加してサイト構築をしております。
CSS初心者で色々と検索をしながらやっておりますが、右の方に隙間が空いているようで、消し方がわからず困っております。お知恵を貸していただけると助かります。。
###困っていること
footer部分を作っていたら隙間ができてしまいました。
いつの間にか横スクロールが出ており、スクロールしてみると、
隙間ができてしまっていました…！この隙間を消して、ぴったり画面が横幅いっぱいになるようにしたいです。
原因らしき箇所
html
<!-- footer --> <div class="footer-contentsarea overlay1"> <div class="bg"></div> <div class="footer-text"> <div class="row"> <div class="col-md-6"> <div class="footer-text-disc p-2"> <div class="footer-text-title"> 小さな命が新しい家族を待っています </div> <div class="footer-text-contents mt-2"> Cats Cloverは猫の殺処分ゼロを目指すため、2015年に設立しました。 消えてしまうはずだった命を保護し、新しい家族に出会えるよう支援しています。 一つでも多くの尊い命が、新しい幸せに巡り会えますように。 </div> </div> </div> <div class="col-md-6"> <div class="footer-text-logo p-5"> <div> <img src="https://catsclover.s3.amazonaws.com/myprefix/cats_clover_logo_green_touka_stroke.PNG" class="example1"> </div> </div> </div> </div> </div> <div class="footer-link"> <ul> <li><a href="#">Home</a></li> <li><a href="#">ログイン</a></li> <li><a href="#">会員登録</a></li> </ul> </div> </div> <footer class="text-center pt-3 pb-3 small"> © All rights reserved by cats-clover. </footer>
どうやら、footerの、猫写真部分の2カラムのところが原因のようでして、この2カラム部分はbootstrapのグリッドを利用してつくっているのですが、
<div class="row">～</div>を削除すると、隙間がなくなります。 <div class="row">～</div>を削除したhtml ``` <!-- footer --> <div class="footer-contentsarea overlay1"> <div class="bg"></div> <div class="footer-text"></div> <div class="footer-link"> <ul> <li><a href="#">Home</a></li> <li><a href="#">ログイン</a></li> <li><a href="#">会員登録</a></li> </ul> </div> </div> <footer class="text-center pt-3 pb-3 small"> © All rights reserved by cats-clover. </footer>
 下の横スクロールバーもなくなり、ぴったり横幅に収まっています。 ただこの2カラムは消したくないので<div class="row">～</div>を再び記載しますが……  確かに、ディベロッパーツールを見ると、 例えば、```<div id="wrapper"> ```部分や```<div class="footer-contentsarea>" ```部分はは、881.33pxになっていますが、``` <div class="row"> ```部分は911.33pxになっています。 (ディベロッパーツールを開いているので、横幅が少し全体的に狭くなってます) 自分で記載したcssには、rowは上書きしていないので、なぜだかわかりません。。 どうすれば、隙間を消せるでしょうか。 ちなみに、以下はcssです（レイアウト部分のみ抜き出し）
body {
color: #4b4b4b;
/overflow-x: hidden; 下のスクロールバーを消す/
}
.jumbotron {
padding: 0;
width: auto;
height:auto;
margin:auto;
background-size: cover;
position: relative;
}
/一番下の、All right~部分/
footer {
background-color: #d4e5ce;
height: 50px;
width: 100%;
position: absolute;
text-align: center;
bottom: 0;
}
/猫ちゃん画像部分/
.footer-contentsarea {
width: 100%;
height: 300px;
background: #EDEDED;
position: relative; /相対位置/
}
/2カラム部分 footer-textが2カラム部分/
.footer-contentsarea .footer-text{
width: 100%; /absoluteで位置を設定するときに、幅と高さは必ず必要/
/height: 1.5em;/
height: 240px;
color: #14240E;
text-align: center;
/*位置の設定 - 上下中央寄せ*/ /*position: absolute;*/ margin: 0; top: 0; bottom: 0; /*上下中央寄せ*/ display: flex; justify-content: center; align-items: center;
}
.footer-contentsarea .footer-text .footer-text-title {
font-weight: bold;
font-size: 20px;
}
img.example1 {
width: 300px;
}
@media screen and (max-width: 768px) {
.footer-text-logo {
display: none;
}
}
/1カラム部分/
.footer-link {
width: 100%;
height: 60px;
text-align: center;
padding-top: 20px;
}
.footer-link a{
color: #14240E;
font-size: 12px;
position: relative; /aが覆われるのを防ぐために記載/
}
.footer-link a:hover {
color: #14240E;
text-decoration: none;
}
.footer-link ul li {
list-style: none;
display: inline;
margin-right: 2em;
}
/猫ちゃん部分の画像/
.bg{
/位置の設定/
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
/*背景画像の設定*/ background: URL(https://catsclover.s3.amazonaws.com/myprefix/cat_footer2.JPG); background-size: cover; /*描画領域全体を覆い尽くすまで拡大・縮小させる*/ background-repeat: no-repeat; background-position: center; /*透過の設定*/ opacity: 0.5;
}
#wrapper {
padding-bottom: 50px;/*←footerの高さ 元々は50px*/ min-height: 100vh; position: relative;/*←相対位置*/ box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}
色々検索をして、body要素に``` overflow-x: hidden;```をつけるととりあえず横スクロールバーがなくなってぴったり収まることがわかりました。 その対応でよいものでしょうか？ 何卒、よろしくお願いいたします。
回答1件
0
ベストアンサー
.containerもしくは.container-fluid要素を追加すると、横スクロールが出なくなるかもしれません。
<div class="footer-contentsarea overlay1"> <div class="bg"></div> <div class="footer-text"> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div class="footer-text-disc p-2"> <div class="footer-text-title">小さな命が新しい家族を待っています </div> <div class="footer-text-contents mt-2">Cats Cloverは猫の殺処分ゼロを目指すため、2015年に設立しました。 消えてしまうはずだった命を保護し、新しい家族に出会えるよう支援しています。 一つでも多くの尊い命が、新しい幸せに巡り会えますように。 </div> </div> </div> <div class="col-md-6"> <div class="footer-text-logo p-5"> <div> <img src="https://catsclover.s3.amazonaws.com/myprefix/cats_clover_logo_green_touka_stroke.PNG" class="example1"> </div> </div> </div> </div> </div> </div> <div class="footer-link"> <div class="container-fluid"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">ログイン</a> </li> <li> <a href="#">会員登録</a> </li> </ul> </div> </div> </div> <footer class="text-center pt-3 pb-3 small">© All rights reserved by cats-clover. </footer>
デザイン的な観点でいうと、左右の余白がないため.containerなどをつけたいです。
CSSのフレームワークとしては左右の余白をつけることは、ほぼ前提として作っているはずなので、そうすることで不要な横スクロールはなくなるのでは、と思います。
投稿2020/03/18 14:42
編集2020/03/18 14:45
総合スコア4528
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/18 14:54