\r\n\t\t\t\r\n\t\r\n\r\n \t
\r\n\t \t

旅を贈ろう。

\r\n\t \t

Air bnbギフトカードで、世界をぐんと身近に

\r\n\t \t\r\n\t
\r\n \r\n \r\n\r\n
\r\n \t

いつも完璧な贈り物

\r\n
\r\n
\t\r\n \t\r\n \t

簡単に使える

\r\n \t

ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。

\r\n
\r\n \r\n\r\n
\t\r\n \t\r\n \t

有効期限なし

\r\n \t

Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。

\r\n
\r\n\r\n
\t\r\n \t\r\n \t

忘れられない旅

\r\n \t

お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。

\r\n
\r\n
\r\n \t\r\n
\r\n \t\"\"\r\n \t

ギフトカードを貰ったら...

\r\n \t

ログインあるいは、利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。

\r\n \t\r\n \t

Air bnbギフトカードの仕組みは?

\r\n
\r\n\r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n```\r\n```CSS\r\nコード\r\n@charset \"UTF-8\";\r\n\r\n/* RESET CSS */\r\nhtml, body, div,button, span, h1, h2, h3, h4, h5, h6, p, a, img, small, ul, li, article, aside, section, footer, header, nav , input {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tborder: 0;\r\n\tfont: inherit;\r\n\tvertical-align: baseline;\r\n\tlist-style-type: none;\r\n}\r\n\r\nheader .header-container {\r\n\theight : 80px;\r\n\twidth : 100%;\r\n\tbackground-color: white;\r\n\tposition : relative;\r\n}\r\n\r\n\r\nheader .menu-box {\r\n height : 80px;\r\n width : 60%;\r\n background-color: white;\r\n display: flex;\r\n}\r\n\r\n\r\nheader .logo {\r\n\tpadding-top: 15px;\r\n\tcolor: red;\r\n\twidth: 10%;\r\n}\r\n\r\nheader .fa-airbnb {\r\n\t\tfont-size: 35px;\r\n}\r\n\r\nheader input {\r\n border-radius: 5px;\r\n}\r\n\r\nheader .search {\r\n\tborder: 1px solid;\r\n\tborder-color: rgba(200,200,200,0.5);\r\n\tmargin-top: 20px;\r\n\twidth: 460px;\r\n\theight: 45px;\r\n\tfont-weight: bold;\r\n\tbox-shadow:5px 5px 10px grey;\r\n}\r\n\r\nnav {\r\n\twidth: 60%;\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tpadding-top: 25px;\r\n}\r\n\r\nul {\r\n\twidth: 100%;\r\n\tdisplay: flex;\r\n\tjustify-content: flex-end;\r\n\talign-items: center;\r\n}\r\n\r\nul li {\r\n\tpadding-left: 5px;\r\n\tpadding-right: 30px;\r\n\tfont-weight: bold;\r\n}\r\n\r\na {\r\n color: black;\r\n text-decoration: none;\r\n}\r\n\r\na:hover {\r\n color: black; \r\n text-decoration: none;\r\n border-bottom: 2px solid black;\r\n padding-bottom: 32px;\r\n}\r\n\r\nmain {\r\n\tbackground-image : url(\"../pic.jpg\");\r\n\tbackground-size: cover;\r\n\theight : 650px;\r\n\twidth: 100%;\r\n\tcolor: white;\r\n\tposition: relative;\r\n}\r\n\r\n.close {\r\n\tmargin-top: 10px;\r\n\tmargin-right: 10px;\r\n}\r\n\r\nmain div:nth-child(1) {\r\n\twidth: 100%;\r\n\theight: 50px;\r\n\tbackground: #C2E4E7;\r\n}\r\n\r\nmain div:nth-child(1) h2 {\r\n\tcolor : black;\r\n\ttext-align: center;\r\n\tpadding-top: 5px;\r\n\tfont-size : 15px;\r\n\tfont-weight: normal;\r\n}\r\n\r\n.fa-speakap {\r\n\tpadding: 0 10px;\r\n}\r\n\r\nmain .middle {\r\n padding-left: 20%;\r\n padding-top: 20%;\r\n height: 200px;\r\n}\r\n\r\nmain .middle h1 {\r\n font-size: 46px;\r\n font-weight: bold;\r\n}\r\n\r\nmain .middle h3 {\r\n padding-top: 10px;\r\n padding-bottom: 30px;\r\n font-size: 18px;\r\n}\r\n\r\nmain .middle input {\r\n padding: 13px 22px;\r\n border-radius: 5px;\r\n background-color: white;\r\n font-weight: bold;\r\n}\r\n\r\n.message-container {\r\n\theight : 500px;\r\n\twidth : 100%;\r\n}\r\n\r\n.message-container h2 {\r\n\tfont-size: 30px;\r\n\ttext-align: center;\r\n\tpadding: 40px;\r\n\tfont-weight: bold;\r\n}\r\n\r\n.iconwraper {\r\n\tposition: relative;\r\n\t\r\n\tpadding-bottom: 75px;\r\n}\r\n\r\n.mailicon {\r\n\tcolor : green;\r\n\tpadding-bottom: 20px;\r\n}\r\n\r\n.mailicon2 {\r\n\tcolor : grey;\r\n\tpadding-bottom: 20px;\r\n}\r\n\r\n.inner1,.inner2,.inner3 {\r\n\theight : auto;\r\n\ttext-align: center;\r\n\twidth : 33%;\r\n\tdisplay: inline-block;\r\n\tvertical-align: top;\r\n}\r\n\r\n.message-container p {\r\n font-size :16px;\r\n font-weight: bold;\r\n padding-right: 15px;\r\n padding-left: 15px;\r\n}\r\n\r\n.message-container .explain {\r\n font-size: 16px;\r\n opacity: 0.5;\r\n padding-top: 5%;\r\n}\r\n\r\n.present {\r\n\tbackground-color: #007a87;\r\n\theight: 440px;\r\n\tpadding-top : 45px;\r\n\ttext-align: center;\r\n}\r\n\r\n.present h2{\r\n\tcolor: white;\r\n\tpadding-top: 10px;\r\n\tpadding-bottom: 15px;\r\n}\r\n\r\n.present h3{\r\n\tcolor: white;\r\n\tfont-size: 20px;\r\n}\r\n\r\n.present input {\r\n\tbackground-color: red;\r\n\tpadding : 10px 28px;\r\n\tborder-radius: 5px;\r\n\tcolor : white;\r\n\tfont-weight: bold;\r\n\tmargin-top : 60px;\r\n}\r\n\r\n.present input:hover {\r\n\tcolor: #fff;\r\n\topacity :0.7;\r\n}\r\n\r\n.present p {\r\n\tcolor : white;\r\n\topacity :0.7;\r\n\tfont-weight: normal;\r\n font-size: 15px; \r\n margin-top: 20px;\r\n}\r\n\r\n//以下、レスポンシブ用//\r\n@media screen and (max-width: 480px) {\r\n\theader .header-container {\r\n\theight : 64px;\r\n\tvertical-align: center;\r\n\tdisplay: flex;\r\n\tjustify-content: flex-start; }\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\nheader .menu-box {\r\n justify-content: flex-start;}\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\nheader .logo {\r\n\tpadding: 0; \r\n padding-left: 15px;\r\n padding-bottom: 15px;\r\n margin-bottom: 20px;\r\n vertical-align: center;}\r\n} \r\n\r\n@media screen and (max-width: 480px) {\r\n.fa-airbnb {\r\n\t\tpadding: 0;}\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n.search {width: 700px;}\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n\tnav { display: none;}\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n\tul li { display: none; }\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\nmain div:nth-child(1) {\r\n\tdisplay: none; }\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\nmain {height : 400px; }\r\n}\t\r\n\r\n@media screen and (max-width: 480px) {\r\nmain .middle {\r\n padding: 0 !imprtant; }\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\nmain .middle h1 {\r\n font-size: 38px; }\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n.iconwraper {height: 580px;}\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n.inner1,.inner2,.inner3 { \r\n\t width: 100%;\r\n\t padding-bottom: 20px; }\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n.present {\r\n\theight: 460px; }\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n.present h2{\r\n\tcolor: white;\r\n\tfont-size: 32px;\r\n\tpadding-left: 10px;\r\n\tpadding-right: 10px;\r\n\tpadding-bottom: 10px; }\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n.present h3 {\r\n\tpadding-left: 8px;\r\n\tpadding-right: 8px; }\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n.present input {\r\n\twidth: 95%; \r\n margin-top: 30px;\r\n padding: 9px 28px;}\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\nhr {display: none}\r\n}\r\n\r\n\r\n\r\n```","answerCount":1,"upvoteCount":0,"datePublished":"2019-05-15T14:54:51.068Z","dateModified":"2019-05-15T14:54:51.068Z","acceptedAnswer":{"@type":"Answer","text":"1は、該当箇所のCSSを下記に変えれば、うまく真ん中になるかと。\r\n\r\n```CSS\r\nmain .middle {\r\n padding-left: 20%;\r\n /* 高さを親ブロックと同じかつ、messageの高さ分マイナスした高さにした */\r\n height: calc(100% - 50px);\r\n /* display: flexを使い、子要素が真ん中にくるよう調整 */\r\n display:flex;\r\n flex-direction: column;\r\n justify-content:center;\r\n}\r\n/* flexを使うと、なぜか、inputが伸びてしまったので、横幅を適用 */\r\nmain .middle input {\r\n width: 190px;\r\n}\r\n```\r\n\r\n2は、タイポミスです。\r\n```css\r\n@media screen and (max-width: 480px) {\r\nmain {height : 400px; }\r\n} \r\n```\r\nよく見てみてください。\r\nブロック終了の波括弧が、**全角**になってます。\r\n故にそれ以降のCSSが無効になってます。\r\n\r\nさらに、padding: 0 !important;だと、適用されなかったので、下記のようにします。\r\n```CSS\r\n@media screen and (max-width: 480px) {\r\n main .middle {\r\n padding: 0 10%;\r\n /* ついでに、上で適用させた高さを100%にする */\r\n height: 100%;\r\n }\r\n}\r\n```\r\n\r\n3は、CSSの優先権の問題です。\r\n.search単体より、\r\nheader .searchの方が優先権が強いため、\r\n下のメディアクエリ内のCSSで上書きできていないためです。\r\n他の部分も調整し、うまく意図通り動くようにしたのが下記です。\r\n```CSS\r\n@media screen and (max-width: 480px) {\r\n /* 他の部分も、いい感じになるよう調整 */\r\n header .menu-box {\r\n margin-right: 15px;\r\n width: auto;\r\n }\r\n .menu-box .logo {\r\n margin-top: 15px;\r\n width: 60px;\r\n }\r\n /* 優先権の強さを同じにし、隙間と大きさを調整 */\r\n header .search {\r\n margin-top: 15px;\r\n width: calc(100% - 60px);\r\n }\r\n}\r\n```","dateModified":"2019-05-15T15:58:49.458Z","datePublished":"2019-05-15T15:58:49.458Z","upvoteCount":3,"url":"https://teratail.com/questions/189618#reply-281480"},"suggestedAnswer":[],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/HTML","name":"HTMLに関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/189618","name":"Padding解除やレイアウトが上手くいかない"}}]}}}
質問するログイン新規登録

Q&A

解決済

1回答

7290閲覧

Padding解除やレイアウトが上手くいかない

ShinYam

総合スコア23

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/05/15 14:54

0

0

以下のコードで配置が上手くいかなくて詰まっています。
何が問題なのか理由を教えていただけないでしょうか?よろしくお願いいたします。

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; } 279280 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

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

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

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

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

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

guest

回答1

0

ベストアンサー

1は、該当箇所のCSSを下記に変えれば、うまく真ん中になるかと。

CSS

1main .middle { 2 padding-left: 20%; 3 /* 高さを親ブロックと同じかつ、messageの高さ分マイナスした高さにした */ 4 height: calc(100% - 50px); 5 /* display: flexを使い、子要素が真ん中にくるよう調整 */ 6 display:flex; 7 flex-direction: column; 8 justify-content:center; 9} 10/* flexを使うと、なぜか、inputが伸びてしまったので、横幅を適用 */ 11main .middle input { 12 width: 190px; 13}

2は、タイポミスです。

css

1@media screen and (max-width: 480px) { 2main {height : 400px; } 3

よく見てみてください。
ブロック終了の波括弧が、全角になってます。
故にそれ以降のCSSが無効になってます。

さらに、padding: 0 !important;だと、適用されなかったので、下記のようにします。

CSS

1@media screen and (max-width: 480px) { 2 main .middle { 3 padding: 0 10%; 4 /* ついでに、上で適用させた高さを100%にする */ 5 height: 100%; 6 } 7}

3は、CSSの優先権の問題です。
.search単体より、
header .searchの方が優先権が強いため、
下のメディアクエリ内のCSSで上書きできていないためです。
他の部分も調整し、うまく意図通り動くようにしたのが下記です。

CSS

1@media screen and (max-width: 480px) { 2 /* 他の部分も、いい感じになるよう調整 */ 3 header .menu-box { 4 margin-right: 15px; 5 width: auto; 6 } 7 .menu-box .logo { 8 margin-top: 15px; 9 width: 60px; 10 } 11 /* 優先権の強さを同じにし、隙間と大きさを調整 */ 12 header .search { 13 margin-top: 15px; 14 width: calc(100% - 60px); 15 } 16}

投稿2019/05/15 15:58

miyabi_takatsuk

総合スコア9572

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

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

ShinYam

2019/05/15 16:42

miyabi_takatsukさん回答ありがとうございます! ずっと考えてもわからなかったのにすぐ解決していただき、びっくりです。 1.calcとflexboxの利用をしたらよかったんですね。 2.全角になっているのに気づきませんでした。逆に何故すぐわかったのですか?   何かチェックするツールを使用されたのでしょうか? 3.メディアクエリを使用していても、優先度が低ければ適用されないのですね!知りませんでした。   優先度を考えながらの設計、ますます難しいです。精進いたします。
miyabi_takatsuk

2019/05/15 16:50

1に関して、flexboxと、calcはかなり便利で、応用技がいろいろあるので、よく勉強されるといいかと思います。 2は、コードをこちらの方で、コーディングアプリケーションにて、コピペさせていただいた時に、要素検証をしてCSSそのものが効いてなかったのと、コードカラーリングで気づきました。 3に関して、 他にも、.hogeのクラス定義より、#hogeのid定義の方が強い、 指定詳細度が高い方が強い、(今回のように、.hoge単体より、.mogu .hogeのように指定詳細度が高い方)など様々な仕様がありますので、調べられるといいと思いますよー。
ShinYam

2019/05/16 14:30

ありがとうございます。 今回教えて頂いたことを活かしていきながら、勉強もしていこうと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問