質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

730閲覧

css, Bootstrap。右の方にある隙間をなくしたい

mikeko0901

総合スコア227

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/03/18 14:18

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>
![イメージ説明](e3aa7b6e7bfd7892c38e25f85593509d.png) 下の横スクロールバーもなくなり、ぴったり横幅に収まっています。 ただこの2カラムは消したくないので<div class="row">~</div>を再び記載しますが…… ![イメージ説明](d8a620b893a54cc28d3699245f65e811.png) 確かに、ディベロッパーツールを見ると、 例えば、```<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;```をつけるととりあえず横スクロールバーがなくなってぴったり収まることがわかりました。 その対応でよいものでしょうか? 何卒、よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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
new1ro

総合スコア4528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mikeko0901

2020/03/18 14:54

ありがとうございます! container-fluid をつけたら横いっぱいに広がりました。 container-fluidを初めて知りました…… とても貴重なことを教えていただき、ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問