Footer部分のレイアウトで複数問題が発生していて、解決方法がどうしてもわからなかったため質問させてください。
下記のHTML,CSS構成において、Footer部分で以下の問題があります。
なるべく、今書いてあるものを修正して問題解決したいのですが、お知恵をお貸しいただけないでしょうか。
よろしくお願いいたします。
※模写サイト(https://www.airbnb.jp/gift)
1.listwrapperの下にボーダーラインを引きたいが、ブラウザ幅いっぱいに引かれてしまう。
marginやpaddingを左右に入れると段落が崩れるし、widthを数値にするとflexが解除されるのか、
中央揃えが左揃えになってしまうなど、どうしたら良いのかわかりません...
2.bothwrapper内にAir bnbのロゴをiタグで呼び出しているものの、ロゴが表示されない。
検証ツールで見ると表示が0×0となっていて意味不明です。
3.leftwrapperとその上に表示される<li class="title">Air bnb</li>の列を揃えたいが、
(ブラウザ収縮時も互いの位置がずれないように)ズレるし、収縮時に列崩れがすぐ発生してします。
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.6.1/css/all.css" rel="stylesheet"> 8 <!-- Required meta tags --> 9 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 10<!-- Bootstrap CSS --> 11 <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"> 12 <link rel="stylesheet" href="css/index.css" /> 13 </head> 14 <body> 15 <header> 16 <div class="header-container"> 17 <div class="menu-box"> 18 <div class="logo"></div> 19 <div class="search"></div> 20 </div> 21 22 <nav> 23 <ul> 24 <li><a href="#">ホストをはじめる</a></li> 25 <li><a href="#">ヘルプ</a></li> 26 <li><a href="#">登録する</a></li> 27 <li><a href="#">ログイン</a></li> 28 </ul> 29 </nav> 30 </div> 31 </header> 32 <main> 33 <div><!-- nth-child(1) --> 34 <section id="message"> 35 <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>のいずれかが親であり、親の最初の子である必要があります。--> 36 <script> 37 //#delをクリックでメッセージ削除 38 const del = document.getElementById('del'); 39 const hidden = document.getElementById('message'); 40 del.addEventListener('click', function() { 41 hidden.style.display = 'none'; 42 }); 43 </script> 44 </section> 45 </div> 46 47 <div class="middle"> 48 <h1>旅を贈ろう。</h1> 49 <h3>Air bnbギフトカードで、世界をぐんと身近に</h3> 50 <input type="submit" value="ギフトカードを登録"> 51 </div> 52 53 </main> 54 55 <div class="message-container"> 56 <h2>いつも完璧な贈り物</h2> 57 <div class="iconwraper"> 58 <div class="inner1"> 59 <i class="far fa-envelope fa-3x mailicon"></i> 60 <p>簡単に使える</p> 61 <p class="explain">ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p> 62 </div> 63 64 65 <div class="inner2"> 66 <i class="fas fa-stopwatch fa-3x mailicon"></i> 67 <p>有効期限なし</p> 68 <p class="explain">Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p> 69 </div> 70 71 <div class="inner3"> 72 <i class="fas fa-globe-europe fa-3x mailicon"></i> 73 <p>忘れられない旅</p> 74 <p class="explain">お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p> 75 </div> 76 </div> 77 78 <div class="present"> 79 <img src="https://a0.muscache.com/airbnb/gift_credit_v2/Home Page/Present Icon/Present Icon.png" alt=""> 80 <h2>ギフトカードを貰ったら...</h2> 81 <h3>ログインあるいは、利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</h3> 82 <input type="submit" value="ギフトカードを登録する"> 83 <p>Air bnbギフトカードの仕組みは?</p> 84 </div> 85 86 <footer> 87 <div class="listwrapper"> 88 <div class="list"> 89 <ul> 90 <li class="title">Air bnb</li> 91 <li class="empty"></li> 92 <li class="lists"><a>採用情報</a></li> 93 <li class="lists"><a>プレス</a></li> 94 <li class="lists"><a>ポリシー</a></li> 95 <li class="lists"><a>ヘルプ</a></li> 96 <li class="lists"><a>ダイバーシティ&ビロンギング</a></li> 97 <li class="lists"><a>企業情報</a></li> 98 </ul> 99 </div> 100 101 <div class="list"> 102 <ul> 103 <li class="title">スタッフのおすすめ</li> 104 <li class="empty"></li> 105 <li class="lists"><a>信頼&安全</a></li> 106 <li class="lists"><a>お友達紹介クーポン</a></li> 107 <li class="lists"><a>Airbnb Citizen</a></li> 108 <li class="lists"><a>出張</a></li> 109 <li class="lists"><a>ガイドブック</a></li> 110 <li class="lists"><a>Airbnbmag</a></li> 111 </ul> 112 </div> 113 114 <div class="list"> 115 <ul> 116 <li class="title">ホスティング</li> 117 <li class="empty"></li> 118 <li class="lists"><a>ホストになる理由</a></li> 119 <li class="lists"><a>おもてなしの心</a></li> 120 <li class="lists"><a>ホストの責任</a></li> 121 <li class="lists"><a>コミュニティセンター</a></li> 122 <li class="lists"><a>体験を掲載</a></li> 123 <li class="lists"><a>オープンホーム</a></li> 124 </ul> 125 </div> 126 127 <div class="list"> 128 <ul> 129 <li class="lists"> 130 <a href="#"><i class="fab fa-facebook-f fa-lg"></i></a> 131 <a href="#"><i class="fab fa-twitter fa-lg"></i></a> 132 <a href="#"><i class="fab fa-instagram fa-lg"></i></a> 133 </li> 134 <li class="empty"></li> 135 <li class="lists"><a>利用規約</a></li> 136 <li class="lists"><a>プライバシー</a></li> 137 <li class="lists"><a>サイトマップ</a></li> 138 </ul> 139 </div> 140 </div> 141 142 <div class="copy"> 143 <div class="bothwrapper"> 144 <div class="leftcontainer"> 145 <i class="fab fa-airbnb fa-3x"></i> 146 <a href="#">Arcbmb Global Services Limited<br>観光◎長◎(1)第S0XXXX号(2118年6月15日-2223年6月14日)</a><br>© 2019 Arcbmb, Inc. All rights reserved. 147 </div> 148 </div> 149 </div> 150 151 152 </footer> 153 154</body> 155</html> 156
CSS
1コード 2@charset "UTF-8"; 3 4/* RESET CSS */ 5html, body, div, 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 21header .menu-box { 22 height : 80px; 23 width : 40%; 24 background-color: white; 25} 26 27nav { 28 width: 60%; 29 position: absolute; 30 top: 0; 31 right: 0; 32 padding-top: 25px; 33} 34 35ul { 36 width: 100%; 37 display: flex; 38 justify-content: flex-end; 39 align-items: center; 40} 41 42ul li { 43 padding-left: 5px; 44 padding-right: 30px; 45 font-weight: bold; 46} 47 48a { 49 color: black; 50 text-decoration: none; 51} 52 53 54a:hover { 55 color: black; 56 text-decoration: none; 57 border-bottom: 2px solid black; 58 padding-bottom: 32px; 59} 60 61main { 62 background-image : url("../pic.jpg"); 63 background-size: cover; 64 height : 650px; 65 width: 100%; 66 color: white; 67 position: relative; 68} 69 70.close { 71 margin-top: 10px; 72 margin-right: 10px; 73} 74 75main div:nth-child(1) { 76 width: 100%; 77 height: 50px; 78 background: #C2E4E7; 79} 80 81main div:nth-child(1) h2 { 82 color : black; 83 text-align: center; 84 padding-top: 5px; 85 font-size : 15px; 86 font-weight: normal; 87} 88 89.fa-speakap { 90 padding: 0 10px; 91} 92 93main .middle { 94 position: absolute; 95 padding-left: 20%; 96 padding-top: 20%; 97} 98 99 100main .middle h1 { 101 font-size: 46px; 102 font-weight: bold; 103} 104 105main .middle h3 { 106 padding-top: 10px; 107 padding-bottom: 30px; 108 font-size: 18px; 109} 110 111main .middle input { 112 padding: 13px 22px; 113 border-radius: 5px; 114 background-color: white; 115 font-weight: bold; 116} 117 118.message-container { 119 height : 500px; 120 width : 100%; 121} 122 123 124.message-container h2 { 125 font-size: 30px; 126 text-align: center; 127 padding: 40px; 128 font-weight: bold; 129} 130 131.iconwraper { 132 position: relative; 133 padding-left: 200px; 134 padding-right: 200px; 135 padding-bottom: 75px; 136} 137 138.mailicon { 139 color : green; 140 padding-bottom: 20px; 141} 142 143.mailicon2 { 144 color : grey; 145 padding-bottom: 20px; 146} 147 148.inner1,.inner2,.inner3 { 149 height : auto; 150 text-align: center; 151 width : 33%; 152 display: inline-block; 153 vertical-align: top; 154} 155 156.message-container p { 157 font-size :16px; 158 font-weight: bold; 159 padding-right: 15px; 160 padding-left: 15px; 161} 162 163.message-container .explain { 164 font-size: 16px; 165 opacity: 0.5; 166 padding-top: 5%; 167} 168 169.present { 170 background-color: #007a87; 171 height: 440px; 172 padding-top : 45px; 173 text-align: center; 174} 175 176.present h2{ 177 color: white; 178 padding-top: 10px; 179 padding-bottom: 15px; 180} 181 182.present h3{ 183 color: white; 184 font-size: 20px; 185 186} 187 188.present input { 189 background-color: red; 190 padding : 10px 28px; 191 border-radius: 5px; 192 color : white; 193 font-weight: bold; 194 margin-top : 60px; 195} 196 197.present input:hover { 198 color: #fff; 199 opacity :0.7; 200} 201 202.present p { 203 color : white; 204 opacity :0.7; 205 font-weight: normal; 206 font-size: 15px; 207 margin-top: 20px; 208} 209 210footer { 211 margin-top: 60px; 212} 213 214.listwrapper { 215 display : flex; 216 justify-content: center; 217 padding-bottom: 30px; 218 width: auto; 219 border-bottom: 1px solid grey; 220} 221 222 223.empty { 224 height: 15px; 225 226} 227 228footer ul { 229 display: inline-block; 230} 231 232footer ul li { 233 font-size: 14px; 234 font-weight: normal; 235} 236 237.title { 238 font-weight: bold; 239} 240 241.fa-facebook-f,.fa-twitter,.fa-instagram { 242 padding-right: 20px; 243} 244 245ul .lists .fa-facebook-f:hover { 246 color: red; 247 border-color: white; 248} 249 250 251.list { 252 margin: 0 55px; 253 color: black; 254} 255 256 257.lists a:hover { 258 text-decoration: none; 259 border-bottom:1px solid grey; 260 padding: 0px; 261} 262 263 264.lists { 265 color: grey; 266 font-weight: bold; 267} 268 269.copy { 270 height: 100px; 271 font-size: 14px; 272 font-weight: bold; 273 color: grey; 274 padding : 20px 19%; 275 width: auto; 276 position: relative; 277} 278 279.copy a { 280 color : grey; 281} 282 283.bothwrapper { 284 display : flex; 285 justify-content: space-between; 286 width: auto; 287} 288 289.fa-airbnb { 290 font-size: 19px; 291} 292 293.leftcontainer { 294 padding-bottom: 30px; 295 296} 297 298footer .copy .leftcontainer a:hover { 299 text-decoration: none; 300 border-bottom:1px solid grey; 301 padding: 0px; 302}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/09 12:56