Q&A
現在htmlとscssを用いてAirbnbの模写コーディングをしています。
そこでhederの固定をすると1枚目の写真のようにmainの画像と被ってしまいます。
これを2枚目の写真のようにmainの画像と被らずに固定するにはどうすればいいのでしょうか？
私が書いたコードも載せておきます。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Airbnbでお家、アパート、お部屋をシェアしよう</title> 7 <link rel="stylesheet" href="css/stylesheet.css"> 8</head> 9<body> 10 <header> 11 <div class="header-ctn-left"> 12 <img src="img/head.svg" alt=""> 13 <a href="">概要</a> 14 <a href="">準備</a> 15 <a href="">安全</a> 16 <a href="">マネープラン</a> 17 </div> 18 <button type="button">はじめる</button> 19 </header> 20 <main> 21 <section class="eyecatch"> 22 <div class="eyecatch-ctn"> 23 <p>Airbnbホストになって、暮らしをレベルアップ</p> 24 <p>宿泊施設の内容を記入</p> 25 <input type=" text " placeholder="ロケーション"> 26 <div> 27 <select name="部屋" id=""> 28 <option value="">まるまる貸し切り</option> 29 <option value="">個室</option> 30 <option value="">シェアルーム</option> 31 </select> 32 <select name="人数" id=""> 33 <option value="">ゲスト1人</option> 34 <option value="">ゲスト2人</option> 35 <option value="">ゲスト3人</option> 36 <option selected=slected value="">ゲスト4人</option> 37 <option value="">ゲスト5人</option> 38 <option value="">ゲスト6人</option> 39 <option value="">ゲスト7人</option> 40 <option value="">ゲスト8人</option> 41 <option value="">ゲスト9人</option> 42 <option value="">ゲスト10人</option> 43 <option value="">ゲスト11人</option> 44 <option value="">ゲスト12人</option> 45 </select> 46 </div> 47 <button type="button">はじめる</button> 48 </div> 49 </section> 50 </main> 51</body> 52</html>
css
1body{ 2 margin: 0; 3} 4header{ 5 width: 100%; 6 height: 81px; 7 background-color: white; 8 display: flex; 9 z-index: 1; 10 position: fixed; 11 justify-content: space-between; 12 align-items: center; 13 .header-ctn-left{ 14 margin-left: 20px; 15 >*{ 16 color: #484848; 17 margin-right: 20px; 18 text-decoration: none; 19 } 20 a{ 21 &:hover{ 22 border-bottom: solid 1px #484848;; 23 } 24 } 25 img{ 26 width: 37px; 27 vertical-align: middle; 28 } 29 } 30 button{ 31 width: 91px; 32 font-weight: bold; 33 height: 37px; 34 margin-right: 43px; 35 background-color: #DB3742; 36 border: none; 37 border-radius: 5px; 38 color: white; 39 } 40} 41main{ 42 .eyecatch{ 43 background-image: url(../img/eyecatch.jpg); 44 height: 600px; 45 background-size: cover; 46 background-repeat: no-repeat; 47 background-position: center top; 48 position: relative; 49 .eyecatch-ctn{ 50 position: absolute; 51 right:20px; 52 top: 50%; 53 transform: translate(0,-50%); 54 background-color: white; 55 height: 423px; 56 width: 460px; 57 p:nth-of-type(1){ 58 font-size: 40px; 59 font-weight: 800; 60 margin: 0 32px; 61 line-height: 40px; 62 } 63 p{ 64 font-size: 16px; 65 font-weight: bold; 66 } 67 input{ 68 height: 38px; 69 width: 100%; 70 box-sizing: border-box; 71 } 72 select:nth-of-type(1){ 73 box-sizing: border-box; 74 height: 38px; 75 width: 50%; 76 } 77 select:nth-of-type(2){ 78 box-sizing: border-box; 79 height: 38px; 80 width: 40%; 81 } 82 } 83 } 84}
回答1件
0
ベストアンサー
領域を右クリックして「検証」を見てもらえばすぐわかりますが、
その白い領域の外側にもう一つdivがあり、floatで右寄せ、右と上のmarginを80pxくらい設定しています。
コメントを受けて追記
手っ取り早く上下に空白を取りたいのであればmargin指定するとか。
scss
1 .eyecatch-ctn{ 2 margin: 40px 40px 0 0; 3 /* 以下元コードと同じ */
投稿2020/05/31 23:22
編集2020/06/01 14:21
総合スコア4447
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/01 02:31
2020/06/01 14:21
2020/06/02 01:54