実現したいこと
HTML、cssを用いてAirbnbのサイトの模写コーディングをしています。
プルダウンリストにリストとその補足説明を入れたいです。しかし、表示される初期値には補足説明を出現させたくないです。
問題点、エラーコード
補足説明を<p>タグで囲っても初期値として表示されてしまいます。
因みに、初期値はplaceholderで設定するものではなく、プルダウンリストのoptionから一つをserectedして表示するものだと思います。プルダウンリストの中も1つのブロックのようにcssなどを使ってデザインすることができるのでしょうか?
サンプルサイト;Airbonb
ではリストの中もきれいにデザインされていると思います。
私のformは今のところ以下の画像のようになっております。
どなたか回答お願いいたします。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <link rel="stylesheet" href="responsive.css"> 9 10 11 <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet"> 12 <link rel="stylesheet" href="style.css"> 13 <!-- Bootstrap CSS --> 14 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> 15 16 17 <title>airbnb</title> 18 </head> 19 20 <body> 21 <header> 22 <div class="header-container"> 23 <ul class="header-li"> 24 <li class="fab fa-airbnb"></li> 25 <li>概要</li> 26 <li>準備</li> 27 <li>安全</li> 28 <li>マネープラン</li> 29 </ul> 30 <button name="button-header" onclick="location.href='#'">はじめる</button> 31 </div> 32 </header> 33 34 <div class="top"> 35 <div class="top-box"> 36 <div class="top-subject"> 37 <h1>最大ホスティング収入: 38 <span>¥ 71,068</span>/1か月、エリア: 39 Fukuoka</h1> 40 <p><a href="#">予想ホスティング収入額の計算方法 41 </a></p> 42 </div> 43 <div class="top-form"> 44 <h2> 予想ホスティング収入額を更新するにはお部屋についてさらに詳しくお聞かせください</h2> 45 <form name="ifm" action="#" method="POST"> 46 <input type="text" name="location 47 "> 48 <select name="type"> 49 <option value="まるまる貸し切り" selected>まるまる貸し切り<p>ゲストはお部屋をまるまる独り占めできます。専用玄関があり、共有スペースはありません。通常、寝室、バスルーム、キッチンが含まれます。</p></option> 50 <option value="個室">個室<p>就寝時はゲスト専用の個室を利用します。その他のエリアは共用の場合があります。</p></option> 51 <option value="シェアルーム 52 ">シェアルーム<p>ゲストの寝室は他者と共有する場合のある相部屋または共用エリアとなります。</p></option> 53 </select> 54 <select name="population"> 55 <option value="1">ゲスト0人</option> 56 <option value="1">ゲスト1人</option> 57 <option value="1">ゲスト2人</option> 58 <option value="1">ゲスト3人</option> 59 <option value="1" selected>ゲスト4人</option> 60 <option value="1">ゲスト5人</option> 61 <option value="1">ゲスト6人</option> 62 <option value="1">ゲスト7人</option> 63 <option value="1">ゲスト8人</option> 64 <option value="1">ゲスト9人</option> 65 <option value="1">ゲスト10人</option> 66 <option value="1">ゲスト11人</option> 67 <option value="1">ゲスト12人</option> 68 <option value="1">ゲスト13人</option> 69 <option value="1">ゲスト14人</option> 70 <option value="1">ゲスト15人</option> 71 </select> 72 </form> 73 74 75 <button class="top-button" onclick="location.href='#'" >リスティングの掲載を調べる</button> 76 </div> 77 </div> 78 79 </div> 80</html>
css
1/* 2html5doctor.com Reset Stylesheet 3v1.6.1 4Last Updated: 2010-09-17 5Author: Richard Clark - http://richclarkdesign.com 6Twitter: @rich_clark 7*/ 8 9html, body, div, span, object, iframe, 10h1, h2, h3, h4, h5, h6, p, blockquote, pre, 11abbr, address, cite, code, 12del, dfn, em, img, ins, kbd, q, samp, 13small, strong, sub, sup, var, 14b, i, 15dl, dt, dd, ol, ul, li, 16fieldset, form, label, legend, 17table, caption, tbody, tfoot, thead, tr, th, td, 18article, aside, canvas, details, figcaption, figure, 19footer, header, hgroup, menu, nav, section, summary, 20time, mark, audio, video { 21 margin:0; 22 padding:0; 23 border:0; 24 outline:0; 25 font-size:100%; 26 vertical-align:baseline; 27 background:transparent; 28} 29 30body { 31 line-height:1; 32 font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif; 33} 34 35nav ul { 36 list-style:none; 37} 38 39blockquote, q { 40 quotes:none; 41} 42 43blockquote:before, blockquote:after, 44q:before, q:after { 45 content:''; 46 content:none; 47} 48 49a { 50 margin:0; 51 padding:0; 52 font-size:100%; 53 vertical-align:baseline; 54 background:transparent; 55} 56 57/* change colours to suit your needs */ 58ins { 59 background-color:#ff9; 60 color:#000; 61 text-decoration:none; 62} 63 64/* change colours to suit your needs */ 65mark { 66 background-color:#ff9; 67 color:#000; 68 font-style:italic; 69 font-weight:bold; 70} 71 72del { 73 text-decoration: line-through; 74} 75 76abbr[title], dfn[title] { 77 border-bottom:1px dotted; 78 cursor:help; 79} 80 81table { 82 border-collapse:collapse; 83 border-spacing:0; 84} 85 86/* change border colour to suit your needs */ 87hr { 88 display:block; 89 height:1px; 90 border:0; 91 border-top:1px solid #cccccc; 92 margin:1em 0; 93 padding:0; 94} 95 96input, select { 97 vertical-align:middle; 98} 99/*ここからオリジナル*/ 100*{ 101 box-sizing: border-box; 102} 103header{ 104 height: 80px; 105} 106.header-container{ 107 height: 80px; 108 display: flex; 109 flex-flow: row wrap; 110 justify-content: space-between; 111 align-items: center; 112} 113 114header ul { 115 list-style: none; 116 display: flex; 117 flex-flow: row wrap; 118 justify-content: space-around; 119 margin: 0%; 120} 121header ul li{ 122 margin: 0 17px; 123} 124li.fab.fa-airbnb { 125 font-size: 30px; 126 color: #008489; 127} 128.header-container button{ 129 -moz-appearance: none; 130 -webkit-appearance: none; 131 appearance: none; 132background-color: #DE1263; 133border-style: none; 134color: white; 135border-radius: 8px !important; 136padding: 10px 20px; 137} 138 139.top-button { 140 -moz-appearance: none; 141 -webkit-appearance: none; 142 appearance: none; 143background-color: #DE1263; 144border-style: none; 145color: white; 146border-radius: 8px !important; 147padding: 10px 20px; 148} 149.top { 150 height: 677px; 151 width: 1350px; 152 margin: 0 auto; 153 border-radius: 20px; 154 background-image: url(image/photographer-865295__340.webp); 155 background-size: cover; 156 display: flex; 157 justify-content: flex-end; 158} 159.top-box{ 160 width: 938px; 161 height: 484px; 162 background-color: white; 163 margin-right: 40px; 164 margin-top: 271px; 165 border-radius: 20px; 166 box-shadow: 0px 5px 10px gainsboro; 167 display: flex; 168} 169.top-subject{ 170 width: 50%; 171 height: 100%; 172 border-right: 1px gainsboro solid; 173} 174.top-form{ 175 width: 50%; 176 height: 100%; 177}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/13 05:58
2020/10/13 06:06
2020/11/02 05:51
2020/11/02 06:00