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

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

ただいまの
回答率

88.91%

サイトの右端に余白ができてしまいます。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 176

RyoYo

score 9

前提・実現したいこと

サイトを作ったのですが、ページの右端に余白ができてしまって困っています。

余白を消したいです

該当のソースコード

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">

    <title>Hello, world!</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet">
  </head>
  <body data-spy="scroll" data-target="#navbarResponsive">

    <!---- start home --->
 <div id="home">

    <!--- Navigation --->
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <a href="index.html"><p class="navbar-brand">湯川設計事務所</p></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#works">Works</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#profile">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>

    </nav>


 </div>
    <!---- end home --->





    <!---- start works --->
     <div id="works" class="offset">

    <div class="jumbotron container-fluid">
        <div class="col-12 text-center">
        <h3 class="heading">Works</h3>
        <div class="heading-underline"></div>
        </div>
    <div class="row no-padding">

        <div class="col-sm-4">
            <div class="works">
                <a href="img/box1.png" target="_blank">
                    <img src="img/box1.png">
                </a>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="works">
                <a href="img/box2.png" target="_blank">
                    <img src="img/box2.png">
                </a>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="works">
                <a href="img/box3.png" target="_blank">
                    <img src="img/box3.png">
                </a>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="works">
                <a href="img/box4.png" target="_blank">
                    <img src="img/box4.png">
                </a>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="works">
                <a href="img/box5.png" target="_blank">
                    <img src="img/box5.png">
                </a>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="works">
                <a href="img/box6.png" target="_blank">
                    <img src="img/box6.png">
                </a>
            </div>
        </div>

        <div class="col-12 narrow text-center mitumori">
                <a class="btn btn-secondary btn-md" href="url" target="_blank">今すぐ簡単見積もり</a>
        </div>

    </div><!---end row-->
    </div><!---end jumbotron-->

    </div>
    <!---- end works --->





    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>
body{
    /*---overflow: hidden;---*/
    color: #505962;
    font-family: 'Noto Sans JP', sans-serif;
}

.offset:before{
    height: 4.8rem;
    margin-top: -4.8rem;
    content: "";
    display: block;
}

/*--- navbar ---*/

.navbar {
    text-transform: uppercase;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .1rem;
    background: rgba(0, 0, 0, .6)!important;
    margin: 0 auto;
}

.navbar-brand {
    position: relative;
    top: 15px;
    left: 20px;
    height: 3rem;
}

.navbar-nav li {
    padding-right: .7rem;
}

.navbar-dark .navbar-nav .nav-link {
    color: white;
    padding-top: .8rem;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #1ebba3;
}

/*---slider---*/

.carousel-item {
    height: 100vh;
    background-size: cover;
}



.carousel-caption h1 {
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: .3rem;
    text-shadow: .1rem .1rem .8rem black;
    padding-bottom: 1rem;
    color: #FFFFFF;
}

.btn-flat-border {
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 25px;
    padding: 0.2em 0.6em;
    text-decoration: none;
    text-shadow: .1rem .1rem .1rem black;
    color: #FFFFFF;
    border: solid 2px #FFFFFF;
    border-radius: 3px;
    transition: .4s;
    margin-top: 50px;
  }

  .btn-flat-border:hover {
    background: #FFFFFF;
    color: black;
    text-shadow: none;
  }

.slider-wrapper{
    z-index: 1;
}
.prevnext-btn{
    z-index: 2;
}

.slider-doc{
    position: relative;
    top: 400px;
    left: -200px;
}

/*---about---*/

.narrow {
    width: 75%;
    margin: 0 auto;
    padding-top: 2rem;
}

.btn-md {
    border-width: medium;
    border-radius: 0;
    padding: .6rem 1.1rem;
    text-transform: uppercase;
    margin: 1rem;
}

.jumbotron {
    border-radius: 0em;
    padding: 3rem 0 2rem;
}

h3.heading {
    font-size: 1.9rem;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 1.9rem;
}

.heading-underline {
    width: 3rem;
    height: .2rem;
    background-color: #1ebba3;
    margin: 0 auto 2rem;
}

p.lead {
    line-height: 40px;
    padding-bottom: 40px;
}

div.narrow h1{
    line-height: 90px;
}

div.narrow h2 {
    line-height: 70px;
    font-weight: 900;
}

/*---WORKS---*/

.works img {
    max-width: 100%;
    transition: transform .5s ease;
}

.row.no-padding [class*=col-] {
    padding: 0;
}

.works img:hover {
    transform: scale(1.1);
    cursor: zoom-in;
}

.works {
    overflow: hidden;
}

.card {
    margin: 2rem;
}

.mitumori {
    margin-top: 30px;
}

/*---profile---*/
.card-wrapper {
    margin: 0 auto;
    display:flex;
  }

/*---contact---*/

footer {
    background-color: #40474e;
    color: white;
    padding: 2rem 0 3rem;
    margin-top: 1rem;
}

footer img {
    height: 3rem;
    margin: 1.5rem 0; 
}

footer a {
    color: white;
}

footer svg.svg-inline--fa {
    font-size: 1.6rem;
    margin: 1.2rem .5rem 0 0;
} 

footer svg.svg-inline--fa:hover {
    color: #1ebba3;
}

hr.socket {
    border-top: .2rem solid #666b71;
    width: 100%;
}

.contact-info{
    text-align: center;
}

hr {
    width: 100%;
}

.contact-name{
    padding-top: 10px;
}

/*---media queries---*/

@media (max-width: 767px) {
    .carousel-caption h1 {
        font-size: 2.3rem;
        letter-spacing: .1rem;
        padding-bottom: .5rem;
    }

    .carousel-caption h3 {
        font-size: 1.2rem;
        padding-bottom: 1.1rem;
    }

    .btn-lg {
        font-size: 1rem;
    }

    .narrow h1 {
        font-size: 1.5rem;
    }

    p.lead {
        font-size: 1rem;
    }
}

試したこと

CSSを見直したのですが、原因は分かりませんでした。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hope_mucci

    2020/07/23 00:36

    windows10:chrome,firefoxで試してみましたが右端に余白が出るような現象は確認できませんでした。
    質問文提示のコードで現象が再現されるか、質問者さんのほうでもう一度確認してください。

    キャンセル

  • RyoYo

    2020/07/23 11:49

    やはり、余白が出てしまいます。
    余白が出るというより、右に5mmほどスクロールできてしまうといった方が正しいかもしれません。

    よかったら、確認お願いします。

    キャンセル

  • hope_mucci

    2020/07/23 11:57

    使っている画像が原因ではありませんか?
    画像はあなた以外取得できないので画像が原因ならこちら側で現象が再現できません。
    imgタグに想定するheight,widthを設定するか、https://dummyimage.com/などのダミーイメージを設定したソースを提示してください。

    キャンセル

  • RyoYo

    2020/07/23 14:04

    なるほど!!
    画像はいずれも1280px×1280pxです。

    (提示して頂いたサイトでは、大きすぎて再現できませんでした。)

    キャンセル

回答 1

checkベストアンサー

0

bootstrapのグリッドシステムはcontainerとrowの間で独自のmarginとpaddingを設定しています。
詳しくはこの記事が分かりやすいと思うのでご覧ください。
しかし、質問中で設定されているjumbotronがこのmarginとpaddingに干渉してrowのネガティブマージンを表示させてしまっています。これが右端の余白の正体です。

これを解消するには、jumbotronとcontainerクラスを同じdiv要素に設定するのではなく、

  • jumbotronの内側にcontainerクラスのdiv要素を作る
  • グリッドシステムはこのcontainerの中に入れる

とすれば良いです。

-    <div class="jumbotron container-fluid">
+    <div class="jumbotron jumbotron-fluid">
+    <div class="container-fluid">
        <div class="col-12 text-center">
        <h3 class="heading">Works</h3>
        <div class="heading-underline"></div>
        </div>
    <div class="row no-padding">
(以下略)
+    </div>


閉じタグを忘れないようにね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る