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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

711閲覧

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

RyoYo

総合スコア9

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/07/22 15:12

前提・実現したいこと

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

余白を消したいです

該当のソースコード

HTML

1<!doctype html> 2<html lang="en"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> 10 <link rel="stylesheet" type="text/css" href="style.css"> 11 12 <title>Hello, world!</title> 13 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet"> 14 <link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet"> 15 </head> 16 <body data-spy="scroll" data-target="#navbarResponsive"> 17 18 <!---- start home ---> 19 <div id="home"> 20 21 <!--- Navigation ---> 22 <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> 23 <a href="index.html"><p class="navbar-brand">湯川設計事務所</p></a> 24 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> 25 <span class="navbar-toggler-icon"></span> 26 </button> 27 28 <div class="collapse navbar-collapse" id="navbarResponsive"> 29 <ul class="navbar-nav ml-auto"> 30 <li class="nav-item"> 31 <a class="nav-link" href="#home">Home</a> 32 </li> 33 <li class="nav-item"> 34 <a class="nav-link" href="#about">About</a> 35 </li> 36 <li class="nav-item"> 37 <a class="nav-link" href="#works">Works</a> 38 </li> 39 <li class="nav-item"> 40 <a class="nav-link" href="#profile">Profile</a> 41 </li> 42 <li class="nav-item"> 43 <a class="nav-link" href="#contact">Contact</a> 44 </li> 45 </ul> 46 </div> 47 48 </nav> 49 50 51 </div> 52 <!---- end home ---> 53 54 55 56 57 58 <!---- start works ---> 59 <div id="works" class="offset"> 60 61 <div class="jumbotron container-fluid"> 62 <div class="col-12 text-center"> 63 <h3 class="heading">Works</h3> 64 <div class="heading-underline"></div> 65 </div> 66 <div class="row no-padding"> 67 68 <div class="col-sm-4"> 69 <div class="works"> 70 <a href="img/box1.png" target="_blank"> 71 <img src="img/box1.png"> 72 </a> 73 </div> 74 </div> 75 76 <div class="col-sm-4"> 77 <div class="works"> 78 <a href="img/box2.png" target="_blank"> 79 <img src="img/box2.png"> 80 </a> 81 </div> 82 </div> 83 84 <div class="col-sm-4"> 85 <div class="works"> 86 <a href="img/box3.png" target="_blank"> 87 <img src="img/box3.png"> 88 </a> 89 </div> 90 </div> 91 92 <div class="col-sm-4"> 93 <div class="works"> 94 <a href="img/box4.png" target="_blank"> 95 <img src="img/box4.png"> 96 </a> 97 </div> 98 </div> 99 100 <div class="col-sm-4"> 101 <div class="works"> 102 <a href="img/box5.png" target="_blank"> 103 <img src="img/box5.png"> 104 </a> 105 </div> 106 </div> 107 108 <div class="col-sm-4"> 109 <div class="works"> 110 <a href="img/box6.png" target="_blank"> 111 <img src="img/box6.png"> 112 </a> 113 </div> 114 </div> 115 116 <div class="col-12 narrow text-center mitumori"> 117 <a class="btn btn-secondary btn-md" href="url" target="_blank">今すぐ簡単見積もり</a> 118 </div> 119 120 </div><!---end row--> 121 </div><!---end jumbotron--> 122 123 </div> 124 <!---- end works ---> 125 126 127 128 129 130 <!-- Optional JavaScript --> 131 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 132 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> 133 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 134 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> 135 </body> 136</html>

css

1body{ 2 /*---overflow: hidden;---*/ 3 color: #505962; 4 font-family: 'Noto Sans JP', sans-serif; 5} 6 7.offset:before{ 8 height: 4.8rem; 9 margin-top: -4.8rem; 10 content: ""; 11 display: block; 12} 13 14/*--- navbar ---*/ 15 16.navbar { 17 text-transform: uppercase; 18 font-weight: 700; 19 font-size: .9rem; 20 letter-spacing: .1rem; 21 background: rgba(0, 0, 0, .6)!important; 22 margin: 0 auto; 23} 24 25.navbar-brand { 26 position: relative; 27 top: 15px; 28 left: 20px; 29 height: 3rem; 30} 31 32.navbar-nav li { 33 padding-right: .7rem; 34} 35 36.navbar-dark .navbar-nav .nav-link { 37 color: white; 38 padding-top: .8rem; 39} 40 41.navbar-dark .navbar-nav .nav-link.active, 42.navbar-dark .navbar-nav .nav-link:hover { 43 color: #1ebba3; 44} 45 46/*---slider---*/ 47 48.carousel-item { 49 height: 100vh; 50 background-size: cover; 51} 52 53 54 55.carousel-caption h1 { 56 font-size: 3.8rem; 57 font-weight: 700; 58 letter-spacing: .3rem; 59 text-shadow: .1rem .1rem .8rem black; 60 padding-bottom: 1rem; 61 color: #FFFFFF; 62} 63 64.btn-flat-border { 65 height: 30px; 66 text-align: center; 67 line-height: 30px; 68 font-size: 25px; 69 padding: 0.2em 0.6em; 70 text-decoration: none; 71 text-shadow: .1rem .1rem .1rem black; 72 color: #FFFFFF; 73 border: solid 2px #FFFFFF; 74 border-radius: 3px; 75 transition: .4s; 76 margin-top: 50px; 77 } 78 79 .btn-flat-border:hover { 80 background: #FFFFFF; 81 color: black; 82 text-shadow: none; 83 } 84 85.slider-wrapper{ 86 z-index: 1; 87} 88.prevnext-btn{ 89 z-index: 2; 90} 91 92.slider-doc{ 93 position: relative; 94 top: 400px; 95 left: -200px; 96} 97 98/*---about---*/ 99 100.narrow { 101 width: 75%; 102 margin: 0 auto; 103 padding-top: 2rem; 104} 105 106.btn-md { 107 border-width: medium; 108 border-radius: 0; 109 padding: .6rem 1.1rem; 110 text-transform: uppercase; 111 margin: 1rem; 112} 113 114.jumbotron { 115 border-radius: 0em; 116 padding: 3rem 0 2rem; 117} 118 119h3.heading { 120 font-size: 1.9rem; 121 font-weight: 700; 122 text-transform: uppercase; 123 padding-bottom: 1.9rem; 124} 125 126.heading-underline { 127 width: 3rem; 128 height: .2rem; 129 background-color: #1ebba3; 130 margin: 0 auto 2rem; 131} 132 133p.lead { 134 line-height: 40px; 135 padding-bottom: 40px; 136} 137 138div.narrow h1{ 139 line-height: 90px; 140} 141 142div.narrow h2 { 143 line-height: 70px; 144 font-weight: 900; 145} 146 147/*---WORKS---*/ 148 149.works img { 150 max-width: 100%; 151 transition: transform .5s ease; 152} 153 154.row.no-padding [class*=col-] { 155 padding: 0; 156} 157 158.works img:hover { 159 transform: scale(1.1); 160 cursor: zoom-in; 161} 162 163.works { 164 overflow: hidden; 165} 166 167.card { 168 margin: 2rem; 169} 170 171.mitumori { 172 margin-top: 30px; 173} 174 175/*---profile---*/ 176.card-wrapper { 177 margin: 0 auto; 178 display:flex; 179 } 180 181/*---contact---*/ 182 183footer { 184 background-color: #40474e; 185 color: white; 186 padding: 2rem 0 3rem; 187 margin-top: 1rem; 188} 189 190footer img { 191 height: 3rem; 192 margin: 1.5rem 0; 193} 194 195footer a { 196 color: white; 197} 198 199footer svg.svg-inline--fa { 200 font-size: 1.6rem; 201 margin: 1.2rem .5rem 0 0; 202}  203 204footer svg.svg-inline--fa:hover { 205 color: #1ebba3; 206} 207 208hr.socket { 209 border-top: .2rem solid #666b71; 210 width: 100%; 211} 212 213.contact-info{ 214 text-align: center; 215} 216 217hr { 218 width: 100%; 219} 220 221.contact-name{ 222 padding-top: 10px; 223} 224 225/*---media queries---*/ 226 227@media (max-width: 767px) { 228 .carousel-caption h1 { 229 font-size: 2.3rem; 230 letter-spacing: .1rem; 231 padding-bottom: .5rem; 232 } 233 234 .carousel-caption h3 { 235 font-size: 1.2rem; 236 padding-bottom: 1.1rem; 237 } 238 239 .btn-lg { 240 font-size: 1rem; 241 } 242 243 .narrow h1 { 244 font-size: 1.5rem; 245 } 246 247 p.lead { 248 font-size: 1rem; 249 } 250}

試したこと

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

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

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

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

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

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

hope_mucci

2020/07/22 15:36

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

2020/07/23 02:49

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

2020/07/23 05:04

なるほど!! 画像はいずれも1280px×1280pxです。 (提示して頂いたサイトでは、大きすぎて再現できませんでした。)
guest

回答1

0

ベストアンサー

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

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

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

とすれば良いです。

diff

1- <div class="jumbotron container-fluid"> 2+ <div class="jumbotron jumbotron-fluid"> 3+ <div class="container-fluid"> 4 <div class="col-12 text-center"> 5 <h3 class="heading">Works</h3> 6 <div class="heading-underline"></div> 7 </div> 8 <div class="row no-padding"> 9(以下略) 10+ </div>

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

投稿2020/07/23 09:14

hope_mucci

総合スコア4447

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問