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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

Q&A

解決済

1回答

1428閲覧

Airbnb プルダウンリストを作りたい

Sakupi

総合スコア17

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/10/11 12:38

実現したいこと

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}

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

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

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

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

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

guest

回答1

0

ベストアンサー

できるかできないかだと、できます。
というか余程ぶっとんだ要件でない限り可能ですし、
参照先で実現されているならなおさらです。
(もちろん、その人が持っているスキルで出来るかは別の話)

私ならとりあえず参照先のサイトを解析します。
イメージ説明

ただこれは「プルダウン」とは違います。
「サジェスト」という機能です。「予測変換」とでも申しましょうか。
Googleサポート:サジェスト

入力された内容から内部情報(データベース、入力履歴など)を検索し、
ヒットしたものを一覧で出しています。

なので、この機能を作るためには「検索のものととなる情報の一覧」が何かしらの形で必要です。
とりあえず決まっているならJavaScriptだけで配列型オブジェクトに決まった語句を適当に入れ込んでおいてその中を検索でも良いでしょう。

実装の仕方は「JavaScript サジェスト」で調べれば出てきますし、ライブラリも出てきます。
自力実装にこだわるのでしたら、そこは頑張ってください。


ひとまず「プルダウンリストのoptionから一つをserectedして表示するもの」ではないということ。

プルダウンリストの中も1つのブロックのようにcssなどを使ってデザインすることができるのでしょうか?

これは「やってみれば分かる」レベルです。
selectのoptionに対して様々なCSSを指定してみると良いです。
何がどこまでできるのか、ブラウザ毎の実装や解釈の違いも確認してみると良いです。

投稿2020/10/11 19:31

m.ts10806

総合スコア80854

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

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

Sakupi

2020/10/13 05:58

返信遅くなり申し分けないです、回答ありがとうございます! cssを指定してみて頑張ってみます! Javascriptはまだ至っていないので、外見だけでも似た形に仕上げていきたいと思います。
m.ts10806

2020/10/13 06:06

JavaScriptは必須です。 むしろ覚えないことにはまともなWebサイトにはなりませんし、表現できる範囲が話にならないくらい狭くなります。
Sakupi

2020/11/02 05:51

わかりました! HTML、cssが落ち着いたら、JavaScriptに着手してみようと思います! ご指導ありがとうございます!
m.ts10806

2020/11/02 06:00

あまり苦言ばかりで難ですけど 解決まで時間かかりすぎてては色々問題があるかと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問