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

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

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

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

CSS

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

Q&A

解決済

1回答

6425閲覧

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

ShinYam

総合スコア23

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/05/15 14:54

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

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

総合スコア9528

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

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

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.51%

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

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

質問する

関連した質問