以下のコードで配置が上手くいかなくて詰まっています。
何が問題なのか理由を教えていただけないでしょうか?よろしくお願いいたします。
1.「旅を贈ろう」を含む、.middleの垂直位置をメイン写真の中ほどにしたいが、paddingやmarginを入れても張り付いたように動かない。
2.レスポンシブ時に「旅を贈ろう」の位置を左寄せしたいが、左にpaddingが入っていて解除も出来ないため、動かすことが出来ない。
3.レスポンシブ時にヘッダー部分のレイアウトが崩れてしまう。inputの長さを指定しても長さが変わらない。
※このサイトを参考に作っています。https://www.airbnb.jp/gift
HTML
1コード 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="utf-8";> 6 <title>Airbnbcopy</title> 7 <link href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" rel="stylesheet"> 8 <!-- Required meta tags --> 9 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 10 11 <!-- Bootstrap CSS --> 12 <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"> 13 <link rel="stylesheet" href="css/index.css" /> 14 15 </head> 16 17 <body> 18 <header> 19 <div class="header-container"> 20 <div class="menu-box"> 21 <div class="logo"><i class="fab fa-airbnb "></i></div> 22 <input class="search" type="search" name="search" placeholder=" ???? 探す"> 23 </div> 24 25 <nav> 26 <ul> 27 <li><a href="#">ホストをはじめる</a></li> 28 <li><a href="#">ヘルプ</a></li> 29 <li><a href="#">登録する</a></li> 30 <li><a href="#">ログイン</a></li> 31 </ul> 32 </nav> 33 </div> 34 </header> 35 36 <main> 37 <div><!-- nth-child(1) --> 38 <section id="message"> 39 <h2><i class="fab fa-speakap fa-2x"></i>今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。<button class="close" aria-hidden="true" type="button" data-dismiss="alert">×</button></h2><!--<h2>~<h6>のヘッディングコンテンツを使う際は、<article>、<aside>、<section>のいずれかが親であり、親の最初の子である必要があります。--> 40 <script> 41 //#delをクリックでメッセージ削除 42 const del = document.getElementById('del'); 43 const hidden = document.getElementById('message'); 44 del.addEventListener('click', function() { 45 hidden.style.display = 'none'; 46 }); 47 </script> 48 </section> 49 </div> 50 51 <div class="middle"> 52 <h1>旅を贈ろう。</h1> 53 <h3>Air bnbギフトカードで、世界をぐんと身近に</h3> 54 <input type="submit" value="ギフトカードを登録"> 55 </div> 56 57 </main> 58 59 <div class="message-container"> 60 <h2>いつも完璧な贈り物</h2> 61 <div class="iconwraper"> 62 <div class="inner1"> 63 <i class="far fa-envelope fa-3x mailicon"></i> 64 <p>簡単に使える</p> 65 <p class="explain">ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p> 66 </div> 67 68 69 <div class="inner2"> 70 <i class="fas fa-stopwatch fa-3x mailicon"></i> 71 <p>有効期限なし</p> 72 <p class="explain">Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p> 73 </div> 74 75 <div class="inner3"> 76 <i class="fas fa-globe-europe fa-3x mailicon"></i> 77 <p>忘れられない旅</p> 78 <p class="explain">お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p> 79 </div> 80 </div> 81 82 <div class="present"> 83 <img src="https://a0.muscache.com/airbnb/gift_credit_v2/Home Page/Present Icon/Present Icon.png" alt=""> 84 <h2>ギフトカードを貰ったら...</h2> 85 <h3>ログインあるいは、利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</h3> 86 <input type="submit" value="ギフトカードを登録する"> 87 <p>Air bnbギフトカードの仕組みは?</p> 88 </div> 89<!-- Optional JavaScript --> 90 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 91 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 92 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 93 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 94</body> 95</html> 96
CSS
1コード 2@charset "UTF-8"; 3 4/* RESET CSS */ 5html, body, div,button, span, h1, h2, h3, h4, h5, h6, p, a, img, small, ul, li, article, aside, section, footer, header, nav , input { 6 margin: 0; 7 padding: 0; 8 border: 0; 9 font: inherit; 10 vertical-align: baseline; 11 list-style-type: none; 12} 13 14header .header-container { 15 height : 80px; 16 width : 100%; 17 background-color: white; 18 position : relative; 19} 20 21 22header .menu-box { 23 height : 80px; 24 width : 60%; 25 background-color: white; 26 display: flex; 27} 28 29 30header .logo { 31 padding-top: 15px; 32 color: red; 33 width: 10%; 34} 35 36header .fa-airbnb { 37 font-size: 35px; 38} 39 40header input { 41 border-radius: 5px; 42} 43 44header .search { 45 border: 1px solid; 46 border-color: rgba(200,200,200,0.5); 47 margin-top: 20px; 48 width: 460px; 49 height: 45px; 50 font-weight: bold; 51 box-shadow:5px 5px 10px grey; 52} 53 54nav { 55 width: 60%; 56 position: absolute; 57 top: 0; 58 right: 0; 59 padding-top: 25px; 60} 61 62ul { 63 width: 100%; 64 display: flex; 65 justify-content: flex-end; 66 align-items: center; 67} 68 69ul li { 70 padding-left: 5px; 71 padding-right: 30px; 72 font-weight: bold; 73} 74 75a { 76 color: black; 77 text-decoration: none; 78} 79 80a:hover { 81 color: black; 82 text-decoration: none; 83 border-bottom: 2px solid black; 84 padding-bottom: 32px; 85} 86 87main { 88 background-image : url("../pic.jpg"); 89 background-size: cover; 90 height : 650px; 91 width: 100%; 92 color: white; 93 position: relative; 94} 95 96.close { 97 margin-top: 10px; 98 margin-right: 10px; 99} 100 101main div:nth-child(1) { 102 width: 100%; 103 height: 50px; 104 background: #C2E4E7; 105} 106 107main div:nth-child(1) h2 { 108 color : black; 109 text-align: center; 110 padding-top: 5px; 111 font-size : 15px; 112 font-weight: normal; 113} 114 115.fa-speakap { 116 padding: 0 10px; 117} 118 119main .middle { 120 padding-left: 20%; 121 padding-top: 20%; 122 height: 200px; 123} 124 125main .middle h1 { 126 font-size: 46px; 127 font-weight: bold; 128} 129 130main .middle h3 { 131 padding-top: 10px; 132 padding-bottom: 30px; 133 font-size: 18px; 134} 135 136main .middle input { 137 padding: 13px 22px; 138 border-radius: 5px; 139 background-color: white; 140 font-weight: bold; 141} 142 143.message-container { 144 height : 500px; 145 width : 100%; 146} 147 148.message-container h2 { 149 font-size: 30px; 150 text-align: center; 151 padding: 40px; 152 font-weight: bold; 153} 154 155.iconwraper { 156 position: relative; 157 158 padding-bottom: 75px; 159} 160 161.mailicon { 162 color : green; 163 padding-bottom: 20px; 164} 165 166.mailicon2 { 167 color : grey; 168 padding-bottom: 20px; 169} 170 171.inner1,.inner2,.inner3 { 172 height : auto; 173 text-align: center; 174 width : 33%; 175 display: inline-block; 176 vertical-align: top; 177} 178 179.message-container p { 180 font-size :16px; 181 font-weight: bold; 182 padding-right: 15px; 183 padding-left: 15px; 184} 185 186.message-container .explain { 187 font-size: 16px; 188 opacity: 0.5; 189 padding-top: 5%; 190} 191 192.present { 193 background-color: #007a87; 194 height: 440px; 195 padding-top : 45px; 196 text-align: center; 197} 198 199.present h2{ 200 color: white; 201 padding-top: 10px; 202 padding-bottom: 15px; 203} 204 205.present h3{ 206 color: white; 207 font-size: 20px; 208} 209 210.present input { 211 background-color: red; 212 padding : 10px 28px; 213 border-radius: 5px; 214 color : white; 215 font-weight: bold; 216 margin-top : 60px; 217} 218 219.present input:hover { 220 color: #fff; 221 opacity :0.7; 222} 223 224.present p { 225 color : white; 226 opacity :0.7; 227 font-weight: normal; 228 font-size: 15px; 229 margin-top: 20px; 230} 231 232//以下、レスポンシブ用// 233@media screen and (max-width: 480px) { 234 header .header-container { 235 height : 64px; 236 vertical-align: center; 237 display: flex; 238 justify-content: flex-start; } 239} 240 241@media screen and (max-width: 480px) { 242header .menu-box { 243 justify-content: flex-start;} 244} 245 246@media screen and (max-width: 480px) { 247header .logo { 248 padding: 0; 249 padding-left: 15px; 250 padding-bottom: 15px; 251 margin-bottom: 20px; 252 vertical-align: center;} 253} 254 255@media screen and (max-width: 480px) { 256.fa-airbnb { 257 padding: 0;} 258} 259 260@media screen and (max-width: 480px) { 261.search {width: 700px;} 262} 263 264@media screen and (max-width: 480px) { 265 nav { display: none;} 266} 267 268@media screen and (max-width: 480px) { 269 ul li { display: none; } 270} 271 272@media screen and (max-width: 480px) { 273main div:nth-child(1) { 274 display: none; } 275} 276 277@media screen and (max-width: 480px) { 278main {height : 400px; } 279} 280 281@media screen and (max-width: 480px) { 282main .middle { 283 padding: 0 !imprtant; } 284} 285 286@media screen and (max-width: 480px) { 287main .middle h1 { 288 font-size: 38px; } 289} 290 291@media screen and (max-width: 480px) { 292.iconwraper {height: 580px;} 293} 294 295@media screen and (max-width: 480px) { 296.inner1,.inner2,.inner3 { 297 width: 100%; 298 padding-bottom: 20px; } 299} 300 301@media screen and (max-width: 480px) { 302.present { 303 height: 460px; } 304} 305 306@media screen and (max-width: 480px) { 307.present h2{ 308 color: white; 309 font-size: 32px; 310 padding-left: 10px; 311 padding-right: 10px; 312 padding-bottom: 10px; } 313} 314 315@media screen and (max-width: 480px) { 316.present h3 { 317 padding-left: 8px; 318 padding-right: 8px; } 319} 320 321@media screen and (max-width: 480px) { 322.present input { 323 width: 95%; 324 margin-top: 30px; 325 padding: 9px 28px;} 326} 327 328@media screen and (max-width: 480px) { 329hr {display: none} 330} 331 332 333
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/15 16:42
2019/05/15 16:50
2019/05/16 14:30