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

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

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

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

CSS

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

Q&A

解決済

1回答

271閲覧

レスポンシブ対応が出来ない

ShinYam

総合スコア23

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/05/12 14:18

編集2019/05/12 15:12

下記をレスポンシブ化しようとしているのですが、思うようにいきません。
具体的には、幅480px以下の時にヘッダー部分のリストを消すのと、icon1,icon2,icon3を縦に並べたいのですが、反映されません。
何が間違っているのでしょうか?
初歩的な質問で申し訳ありませんが、ご教授いただけますと幸いです。
よろしくお願いします。
(文字数制限で、フッター部分などコードを削っています。)

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 90 91 <!-- Optional JavaScript --> 92 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 93 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 94 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 95 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 96</body> 97</html> 98

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 : 40%; 25 background-color: white; 26 display: flex; 27} 28 29header .logo { 30 padding-top: 15px; 31 color: red; 32} 33 34header .fa-airbnb { 35 font-size: 35px; 36} 37 38header input { 39 border-radius: 5px; 40} 41 42header .search { 43 border: 1px solid; 44 border-color: rgba(200,200,200,0.5); 45 margin-top: 20px; 46 width: 460px; 47 height: 45px; 48 font-weight: bold; 49 box-shadow:5px 5px 10px grey; 50} 51 52nav { 53 width: 60%; 54 position: absolute; 55 top: 0; 56 right: 0; 57 padding-top: 25px; 58} 59 60 61ul { 62 width: 100%; 63 display: flex; 64 justify-content: flex-end; 65 align-items: center; 66} 67 68@media screen and (max-width: 480px) { 69 ul li { display: none; } 70} 71 72 73ul li { 74 padding-left: 5px; 75 padding-right: 30px; 76 font-weight: bold; 77} 78 79a { 80 color: black; 81 text-decoration: none; 82} 83 84 85a:hover { 86 color: black; 87 text-decoration: none; 88 border-bottom: 2px solid black; 89 padding-bottom: 32px; 90} 91 92main { 93 background-image : url("../pic.jpg"); 94 background-size: cover; 95 height : 650px; 96 width: 100%; 97 color: white; 98 position: relative; 99} 100 101.close { 102 margin-top: 10px; 103 margin-right: 10px; 104} 105 106main div:nth-child(1) { 107 width: 100%; 108 height: 50px; 109 background: #C2E4E7; 110} 111 112main div:nth-child(1) h2 { 113 color : black; 114 text-align: center; 115 padding-top: 5px; 116 font-size : 15px; 117 font-weight: normal; 118} 119 120.fa-speakap { 121 padding: 0 10px; 122} 123 124main .middle { 125 position: absolute; 126 padding-left: 20%; 127 padding-top: 20%; 128} 129 130 131main .middle h1 { 132 font-size: 46px; 133 font-weight: bold; 134} 135 136main .middle h3 { 137 padding-top: 10px; 138 padding-bottom: 30px; 139 font-size: 18px; 140} 141 142main .middle input { 143 padding: 13px 22px; 144 border-radius: 5px; 145 background-color: white; 146 font-weight: bold; 147} 148 149.message-container { 150 height : 500px; 151 width : 100%; 152} 153 154 155.message-container h2 { 156 font-size: 30px; 157 text-align: center; 158 padding: 40px; 159 font-weight: bold; 160} 161 162.iconwraper { 163 position: relative; 164 padding-left: 200px; 165 padding-right: 200px; 166 padding-bottom: 75px; 167} 168 169.mailicon { 170 color : green; 171 padding-bottom: 20px; 172} 173 174.mailicon2 { 175 color : grey; 176 padding-bottom: 20px; 177} 178 179.inner1,.inner2,.inner3 { 180 height : auto; 181 text-align: center; 182 width : 33%; 183 display: inline-block; 184 vertical-align: top; 185} 186 187@media screen and (max-width: 480px) { 188 .inner1,.inner2,.inner3 { width: 100%; } 189} 190 191.message-container p { 192 font-size :16px; 193 font-weight: bold; 194 padding-right: 15px; 195 padding-left: 15px; 196} 197 198.message-container .explain { 199 font-size: 16px; 200 opacity: 0.5; 201 padding-top: 5%; 202} 203 204.present { 205 background-color: #007a87; 206 height: 440px; 207 padding-top : 45px; 208 text-align: center; 209} 210 211.present h2{ 212 color: white; 213 padding-top: 10px; 214 padding-bottom: 15px; 215} 216 217.present h3{ 218 color: white; 219 font-size: 20px; 220 221} 222 223.present input { 224 background-color: red; 225 padding : 10px 28px; 226 border-radius: 5px; 227 color : white; 228 font-weight: bold; 229 margin-top : 60px; 230} 231 232.present input:hover { 233 color: #fff; 234 opacity :0.7; 235} 236 237.present p { 238 color : white; 239 opacity :0.7; 240 font-weight: normal; 241 font-size: 15px; 242 margin-top: 20px; 243} 244 245footer { 246 margin-top: 60px; 247 margin-bottom: 30px; 248 width :auto; 249} 250 251.listwrapper { 252 display : flex; 253 justify-content: center; 254 padding-bottom: 5px; 255 width: auto; 256} 257 258 259.empty { 260 height: 15px; 261 262} 263 264footer ul { 265 display: inline-block; 266} 267 268footer ul li { 269 font-size: 14px; 270 font-weight: normal; 271} 272 273.title { 274 font-weight: bold; 275} 276 277.new { 278 background-color: green 279 margin-left: 3px; 280} 281 282 283.fa-facebook-f,.fa-twitter,.fa-instagram { 284 padding-right: 20px; 285} 286 287ul .lists .fa-facebook-f:hover { 288 color: red; 289 border-color: white; 290} 291 292 293.list { 294 margin: 0 35px; 295 color: black; 296} 297 298 299.lists a:hover { 300 text-decoration: none; 301 border-bottom:1px solid grey; 302 padding: 0px; 303} 304 305 306.lists { 307 color: grey; 308 font-weight: bold; 309} 310 311.copy { 312 height: 100px; 313 font-size: 14px; 314 font-weight: bold; 315 color: grey; 316 padding : 8px 19%; 317 width: auto; 318 position: relative; 319} 320 321.copy a { 322 color : grey; 323} 324 325.bothwrapper { 326 display : flex; 327 justify-content: space-around; 328 width: auto; 329} 330 331.fa-airbnb { 332 padding-top: 10px; 333 margin-right: 10px; 334 margin-left: 60px; 335 font-size: 25px; 336} 337 338.Arc { 339 340} 341 342.abc { 343 344} 345 346.def { 347 348} 349 350.leftcontainer { 351 padding-bottom: 30px; 352 padding-left: 50px; 353 display: flex 354} 355 356.middlecontainer { 357 margin-left: 0px; 358 padding-left: 0px; 359} 360 361.right1 { 362 margin-left: 400px; 363 padding-left: 50px; 364} 365 366.right2 { 367 margin-left: 0px; 368} 369 370button { 371 padding: 5px 8px; 372 background-color: white; 373 border: 1px solid grey; 374 opacity: 0.5; 375 font-weight: bold; 376} 377 378button:hover { 379 background-color: grey; 380 381} 382 383footer .copy .bothwrapper .middlecontainer a:hover { 384 text-decoration: none; 385 border-bottom:1px solid grey; 386 padding: 0px; 387} 388

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

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

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

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

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

kei344

2019/05/12 14:24

CSSにHTMLが書かれていますので、修正お願いします。
ShinYam

2019/05/12 15:13

keiさま 指摘ありがとうございます!お手間を取らせました。
guest

回答1

0

ベストアンサー

動くサンプル:https://jsfiddle.net/L5mdpkja/


どちらも効いています。

icon1,icon2,icon3 ではなく .inner1,.inner2,.inner3 だと思いますが、これは親要素の padding が合計400pxあるため、max-width: 480px時には最大80pxしか残っていないので、「効いていない」ように見えているのだと思います。

CSS

1.iconwraper { 2 position: relative; 3 padding-left: 200px; 4 padding-right: 200px; 5 padding-bottom: 75px; 6}

投稿2019/05/12 15:24

kei344

総合スコア69357

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

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

ShinYam

2019/05/13 15:14 編集

回答ありがとうございます! おっしゃるとおり、innerの間違いでした。 iconwrapperのpadding左右方向を消してみましたが、やはり縦並びになりませんでした... また、headerのnav内も表示されたままですのですが、kei344さんの環境では消えているのでしょうか?
kei344

2019/05/12 16:12

ハンドルネームを省略しないでください。デベロッパーツールで左右paddingを消せば、縦並びになります。
ShinYam

2019/05/13 15:15

すみません失礼いたしました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問