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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

解決済

1回答

631閲覧

背景画像を画面幅いっぱいにできず、左右に空白ができてしまう件

ShinjiAsai

総合スコア51

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

0クリップ

投稿2019/10/22 01:14

サイト模写をやっていて、調べてもわからず困ってしまったので質問します。

以下のAirbnbのサイトを模写してました。
Airbnb

本来であればアイキャッチ画像が画面サイズに合わせていっぱいに広がっているんですが、模写してたらスクショのように左右に空白ができてしまいました・・・。

作成しているサイトのスクショ

今は一応、コンテナの中に全部要素が入ってるんですが、それだと上手くいかないと思い、一個階層が上のone-wrapperに直接CSSを効かせようととしても、なぜだかうまく効きません。

解決策がわかる方、教えていただけないでしょうか。よろしくお願いします。

HTML

1<!doctype html> 2<html lang="ja"> 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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 10 <link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"> 11 <link href="./css/style.css" rel="stylesheet"> 12 <script src="https://kit.fontawesome.com/284c073c58.js" crossorigin="anonymous"></script> 13 14 15 <title>現地の人から借りる家、体験&スポット</title> 16 </head> 17 18 <body> 19 20 <header> 21 <div class="container"> 22 23 <div class="header-left"> 24 <a href="#"><i class="fab fa-airbnb"></i></a> 25 <input type="text" name="search" class="use_icon" placeholder="&#xf002; 探す"> 26 </div> 27 28 <div class="header-right"> 29 <ul class="menu"> 30 <li><a href="#">ホストをはじめる</a></li> 31 <li><a href="#">ヘルプ</a></li> 32 <li><a href="#">登録する</a></li> 33 <li><a href="#">ログイン</a></li> 34 </ul> 35 </div> 36 37 </div> 38 </header> 39 40 <one-wrapper> 41 <div class="container"> 42 43 <div class="top-massage"> 44 <h1>旅を贈ろう。</h1> 45 <p>Airbnbギフトカードで世界をぐんと身近に</p> 46 <button type="button" class="btn btn-light text-dark">ギフトカードを登録</button> 47 </div> 48 49 </div> 50 </one-wrapper> 51 52 <two-wrapper> 53 <div class="container"> 54 <h2>いつも完璧な贈りもの</h2> 55 56 <div class="information"> 57 58 <div class="gift mail"> 59 <i class="far fa-envelope"></i> 60 <h5>簡単に使える</h5> 61 <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p> 62 </div> 63 64 <div class="gift limit"> 65 <i class="fas fa-stopwatch"></i> 66 <h5>有効期限なし</h5> 67 <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p> 68 </div> 69 70 <div class="gift trip"> 71 <i class="fas fa-globe-americas"></i> 72 <h5>忘れられない旅</h5> 73 <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p> 74 </div> 75 76 </div> 77 78 </div> 79 </two-wrapper> 80 81 <three-wrapper> 82 <div class="container"> 83 <img src="./images/appsitter-mac.png" alt="present"> 84 <h2>ギフトカードをもらったら…</h2> 85 <h5>ログインあるいは利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</h5> 86 <button type="button" class="btn btn-danger">ギフトカードを登録する</button> 87 <p>Airbnbギフトカードの仕組みは?</p> 88 </div> 89 </three-wrapper> 90 91 <four-wrapper> 92 <div class="container"> 93 <div class="footer-info"> 94 95 <div class="airbnb"> 96 <h6 class="footer-info-title">Airbnb</h6> 97 <p>採用情報</p> 98 <p>ニュース</p> 99 <p>ポリシー</p> 100 <p>ヘルプ</p> 101 <p>ダイバーシティ&amp;ビロンギング</p> 102 <p>アクセシビリティ対応<span class="badge badge-success">新着</span></p> 103 </div> 104 105 <div class="staff"> 106 <h6 class="footer-info-title">スタッフのおすすめ</h6> 107 <p>信頼&amp;安全</p> 108 <p>お友達紹介クーポン</p> 109 <p>ギフトカード</p> 110 <p>Airbnb Citizen</p> 111 <p>出張</p> 112 <p>アクティビティ<span class="badge badge-success">新着</span></p> 113 <p>Airbnbmag</p> 114 </div> 115 116 <div class="hosting"> 117 <h6 class="footer-info-title">ホスティング</h6> 118 <p>ホストになる理由</p> 119 <p>おもてなしの心</p> 120 <p>ホストの責任</p> 121 <p>コミュニティセンター</p> 122 <p>体験を掲載<span class="badge badge-success">新着</span></p> 123 <p>オープンホーム</p> 124 </div> 125 126 <div class="poricy"> 127 <div class="sns"> 128 <i class="fab fa-facebook-f"></i> 129 <i class="fab fa-twitter"></i> 130 <i class="fab fa-instagram"></i> 131 </div> 132 <p>利用規約</p> 133 <p>プライバシー</p> 134 <p>サイトマップ</p> 135 </div> 136 137 </div> 138 </div> 139 </four-wrapper> 140 141 <footer> 142 <div class="container"> 143 144 <div class="footer-left"> 145 <i class="fab fa-airbnb"></i> 146 <p>&copy;2019 Airbnb, Inc. All rights reserved.</p> 147 </div> 148 149 <div class="footer-right"> 150 <button type="button" class="btn btn-default btn-sm">日本語</button> 151 <button type="button" class="btn btn-default btn-sm">PHP-₱</button> 152 </div> 153 154 </div> 155 156 </footer> 157 158 159 <!-- Optional JavaScript --> 160 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 161 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 162 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 163 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 164 </body> 165</html>

CSS

1@charset "UTF-8"; 2 3/*全体*/ 4 5* { 6 font-style: "Circular", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", 7 "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MS PGothic", "MS Gothic", 8 "MS ゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; 9} 10 11/*ヘッダー*/ 12 13header .container { 14 display: flex; 15 height: 80px; 16 justify-content: space-between; 17 align-items: center; 18} 19 20.header-left { 21 display: flex; 22 align-items: center; 23} 24 25header i { 26 font-size: 34px; 27 color: tomato; 28 margin-left:10px; 29 margin-right: 25px; 30} 31 32header input { 33 height: 50px; 34 width: 460px; 35} 36 37header input::placeholder { 38 font-size: 1rem; 39 font-weight: bold; 40} 41 42header ul { 43 list-style: none; 44 display: flex; 45 color: #484848; 46} 47 48header li { 49 font-size: 14px; 50 font-weight: 600; 51 padding: 0px 15px; 52} 53 54header li a { 55 color: inherit; 56 text-decoration: none; 57} 58 59 header li a:hover { 60 color: inherit; 61 border-bottom: 2px solid inherit; 62 padding-bottom: 10px; 63} 64 65.use_icon { 66 display: inline-block; 67 font-family: Fontawesome; 68 font-style: normal; 69 font-weight: normal; 70 line-height: 1rem; 71 -webkit-font-smoothing: antialiased; 72 -moz-osx-font-smoothing: grayscale; 73} 74 75/*one-wrapper*/ 76 77one-wrapper .container { 78 height: 600px; 79 background-image: url(../images/BackgroundHomeSummer.jpg); 80 background-size: cover; 81 display: flex; 82 align-items: center; 83} 84 85.top-massage { 86 margin-left: 30px; 87} 88 89.top-massage h1 { 90 font-size: 46px; 91 font-weight: bold; 92 color: #fff; 93 line-height: 52px; 94 margin-bottom: 30px; 95} 96 97.top-massage p { 98 font-size: 18px; 99 color: #fff; 100 line-height: 26px; 101 margin-bottom: 30px; 102} 103 104.top-masasge .btn{ 105 font-size: 16px; 106 color: #484848; 107} 108 109/*two-wrapper*/ 110 111two-wrapper .container { 112 color: #484848; 113 text-align: center; 114 height: 320px; 115} 116 117.information { 118 display: flex; 119 justify-content: center; 120} 121 122two-wrapper .container h2 { 123 font-size: 32px; 124 font-weight: bold; 125 color:inherit; 126 margin:50px 0px; 127} 128 129two-wrapper .container h5 { 130 font-size: 18px; 131 font-weight: bold; 132 color: inherit; 133 margin-bottom: 25px; 134} 135 136two-wrapper .container p { 137 font-size: 16px; 138 font-weight: 400; 139 color: inherit; 140} 141 142two-wrapper .container i { 143 font-size: 50px; 144 color: #007A87; 145 margin-bottom: 30px; 146 147} 148 149.gift { 150 text-align: center; 151 width: 320px; 152 margin: 0px 15px; 153} 154 155/* three-wrapper*/ 156 157three-wrapper .container { 158 height: 420px; 159 color: #fff; 160 text-align: center; 161 background-color: #007A87; 162} 163 164three-wrapper .container img { 165 margin-top: 45px; 166 margin-bottom: 25px; 167} 168 169three-wrapper .container h2 { 170 font-size: 32px; 171 font-weight: bold; 172 color: inherit; 173 margin-bottom: 20px; 174} 175 176three-wrapper .container h5 { 177 font-size: 20px; 178 font-weight: normal; 179 color: inherit; 180 margin-bottom: 50px; 181} 182 183three-wrapper .container button { 184 margin-bottom: 20px; 185} 186 187three-wrapper .container p { 188 font-size: 14px; 189 font-weight: normal; 190 color: inherit; 191 opacity: 0.7; 192} 193 194three-wrapper .container p:hover { 195 opacity: 1; 196} 197 198/*four-wrapper*/ 199 200four-wrapper .container { 201 height: 255px; 202 color: #484848; 203 border-bottom: 1px solid #999999; 204} 205 206.footer-info { 207 display: flex; 208 margin-top: 50px; 209 210} 211 212.airbnb, .staff, .hosting, .poricy { 213 width: 25%; 214} 215 216four-wrapper .container h6 { 217 display: inline-block; 218 219 font-size: 14px; 220 color: inherit; 221 font-weight: bold; 222 padding-bottom: 1.5em; 223} 224 225four-wrapper .container p { 226 font-size: 14px; 227 color: #767676; 228 line-height: 0.5em; 229} 230 231four-wrapper .container i { 232 font-size: 18px; 233 color: inherit; 234 padding-right: 15px; 235 margin-top: 2em; 236 margin-bottom: 1.5em; 237} 238 239/* footer */ 240 241footer .container { 242 display: flex; 243 justify-content: space-between; 244 height: 70px; 245 color: #484848; 246 align-items: center; 247} 248 249footer .footer-left { 250 display: flex; 251 align-items: center; 252} 253 254footer i { 255 font-size: 20px; 256 color: inherit; 257 padding-right: 10px; 258 padding-bottom: 15px; 259} 260 261footer p { 262 font-size: 14px; 263 color: #767676; 264} 265

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

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

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

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

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

guest

回答1

0

ベストアンサー

containerクラスに bootstrap のCSSが適用されているのが原因です。

独自のスタイルを設定するときは、bootstrap のクラス名と被るクラス名は避けましょう。

html

1 <one-wrapper> 2 <div class="container1"> 3 4/* 中略 */ 5 6 </div> 7 </one-wrapper>

css

1/*one-wrapper*/ 2 3one-wrapper .container1 { 4 height: 600px; 5 background-image: url(../images/BackgroundHomeSummer.jpg); 6 background-size: cover; 7 display: flex; 8 align-items: center; 9}

他の部分のcontainerも修正してください。

投稿2019/10/22 03:20

hatena19

総合スコア33601

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

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

ShinjiAsai

2019/10/22 05:41

むむむ、ということはcontenairクラスが予約語?指示語?みたいな形でBootstrapにあって、それと競合しているということでしょうか?だからCSSが効かないという認識であってますかね? とりあえず、container1とか2とか変えてみて今やってみたんですが、直せました!ありがとうございます!
ShinjiAsai

2019/10/22 09:47

丁寧にありがとうございます!本当に助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問