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

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

新規登録して質問してみよう
ただいま回答率
85.50%
ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

Q&A

解決済

1回答

1928閲覧

Bootstrapでのボタンデザインのエラー

sanyagi_d_1

総合スコア10

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/11/02 12:14

現在、Airbnbホスティング(https://www.airbnb.jp/host/homes)の模写を行なっています。

私の作成↓イメージ説明
イメージ説明
navbar右の「はじめる」ボタンの右と背景画像の左に謎のボタンが出現し、お手本では右にあるはずの「Airbnbホストに~」のdivの塊が、左になっており、個々が赤ボタンになっています。

HTML

1コード 2<!doctype html> 3<html lang="ja"> 4 <head> 5 <!-- Required meta tags --> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 9 <!-- Bootstrap CSS --> 10 <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"> 11 <link rel="stylesheet" href="style_airbnb2.css"> 12 <script src="https://kit.fontawesome.com/576bf3ee24.js" crossorigin="anonymous"></script> 13 14 <title>Airbnbでお家、アパート、お部屋をシェアしよう</title> 15 </head> 16 <body> 17 <header> 18 <div class="container1 menubar"> 19 <nav class="navbar navbar-expand-lg navbar-light fixed-top"> 20 <a href="#" class="navbar-brand"><img src="airbnb/airbnb_icon.png"></a> 21 <button class="navbar-toggler" data-toggle="collapse" data-target="#menu"> 22 <span class="navbar-toggler-icon"></span> 23 </button> 24 <div id="menu" class="collapse navbar-collapse"> 25 <ul class="navbar-nav"> 26 <li class="nav-item"><a href="#" class="nav-link">概要</a></li> 27 <li class="nav-item"><a href="#" class="nav-link">準備</a></li> 28 <li class="nav-item"><a href="#" class="nav-link">安全</a></li> 29 <li class="nav-item"><a href="#" class="nav-link">マネープラン</a></li> 30 </ul> 31 </div> 32 <ul class="navbar-nav navbar-light d-none d-lg-flex"> 33 <li class="nav-item">予想月収<a href="#"><i class="fa fa-question-circle-o" aria-hidden="true"></i></a></li> 34 <li class="nav-item"><span id="fee">&yen;191,966</span></li> 35 <li class="nav-item"><a href="#" class="btn btn-danger">はじめる</li> 36 </ul> 37 </nav> 38 </div> 39 <div class="container2" id="air"> 40 <div class="row"> 41 42 <form class="col-md-4 col-xs-12"> 43 44 <div class="h1">Airbnbホストになって、暮らしをレベルアップ</div> 45 <div class="form-group input"> 46 <label for="Input">どれくらいの収入が見込めるかチェック</label> 47 <input type="text" class="form-control" placeholder="東京"> 48 </div> 49 50 <div class="select"> 51 <div class="form-group" id="select1"> 52 <select class="form-control"> 53 <option selected>まるまる貸切</option> 54 <option>個室</option> 55 <option>シェアルーム</option> 56 </select> 57 </div> 58 59 <div class="form-group" id="select2"> 60 <select class="form-control"> 61 <option>ゲスト1人</option> 62 <option>ゲスト2人</option> 63 <option>ゲスト3人</option> 64 <option selected>ゲスト4人</option> 65 <option>ゲスト5人</option> 66 <option>ゲスト6人</option> 67 <option>ゲスト7人</option> 68 <option>ゲスト8人</option> 69 <option>ゲスト9人</option> 70 <option>ゲスト10人</option> 71 <option>ゲスト11人</option> 72 <option>ゲスト12人</option> 73 <option>ゲスト13人</option> 74 <option>ゲスト14人</option> 75 <option>ゲスト15人</option> 76 <option>ゲスト16人</option> 77 </select> 78 </div> 79 </div> 80 81 <div class="fee"> 82 <p class="fee-h1"> 83 &yen;191,966 84 </p> 85 <p class="fee-child">月あたり<a href="#"><i class="fa fa-question-circle-o" aria-hidden="true"></i></a></p> 86 </div> 87 88 <a href="#" class="btn btn-danger mx-auto d-block">はじめる</a> 89 </form> 90 </div> 91 </div> 92 </header> 93</html>

CSS

1コード 2#air{ 3 background-image:url(./airbnb/Airbnb2.jpg); 4 background-repeat:no-repeat; 5 background-size:100% auto; 6 background-position:center 90px; 7 background-attachment: fixed; 8 max-width: 100%; 9 padding-bottom: 70px; 10 margin-top: 72px; 11} 12 13.navbar{ 14 padding:10px 80px 0; 15} 16 17nav{ 18 background-color: white; 19 line-height: 56px; 20} 21 22.nav-item{ 23 margin:0 10px; 24} 25 26.nav-link:hover{ 27 text-decoration: underline; 28} 29 30.fa-question-circle-o{ 31 text-decoration: none; 32 color:gray; 33} 34 35#fee{ 36 font-weight:bold; 37 font-size:1.5rem; 38} 39 40.h1{ 41 font-weight:bold; 42 margin-bottom: 16px; 43} 44 45form{ 46 background-color: white; 47 margin: 30px; 48 padding: 20px; 49 border-radius: 5px; 50 margin-right: 90px; 51 margin-top: 80px; 52} 53 54.form-control{ 55 height:3rem; 56} 57 58.col-md-4{ 59 padding: 30px 40px; 60} 61 62header.row{ 63 flex-direction: row-reverse; 64} 65 66.select{ 67 display: flex; 68} 69 70#select1{ 71 width:60%; 72 margin-right: 10px; 73} 74 75#select2{ 76 width:40%; 77} 78 79.input{ 80 margin-top: 10px; 81 margin-bottom: 10px; 82} 83 84form.btn{ 85 margin-bottom: 16px; 86 padding: 12px; 87} 88 89.fee{ 90 display: flex; 91} 92 93.fee-child{ 94 line-height: 64px; 95 margin: 0; 96} 97 98.fee-h1{ 99 font-weight: bold; 100 margin-bottom: 16px; 101 font-size: 2.5rem; 102} 103 104@media screen and (max-width: 544px){ 105 106 form{ 107 background-color: transparent; 108 margin: 100px 0 0; 109 padding: 20px; 110 border-radius: 5px; 111 } 112 113 #air{ 114 background-attachment: fixed; 115 margin-top: 0; 116 } 117 118 .h1{ 119 margin-top: 120px; 120 color:white; 121 width: 100%; 122 font-size: 2.0rem; 123 } 124 125 header.row{ 126 flex-direction: row; 127 } 128 129 .select{ 130 display: block; 131 } 132 133 #select1{ 134 width: 100%; 135 margin-right: 0; 136 } 137 138 #select2{ 139 width: 100%; 140 } 141 142 .fee-child{ 143 line-height: 64px; 144 margin: 0px; 145 } 146}

・試したこと
CSS反映のテスト1回目は、btnのスペルが間違っていたため反映されなかったのですが、btnを書くと、こうなりました。なので、btnを消してみましたが変わりありませんでした。
divやcontainerに入れる要素の間違いでしょうか?
以上、ヘッダー内のボタンデザインの疑問について、回答よろしくお願いいたします。

・補足情報
Bootstrap4.3.1
VSCode
ブラウザ:Chorme
OS:Widows10
AirbnbホスティングWebサイト(https://www.airbnb.jp/host/homes)

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

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

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

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

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

guest

回答1

0

ベストアンサー

ナビゲーションの中の、下記の部分にaの閉じタグが足りないようです。

HTML

1<li class="nav-item"><a href="#" class="btn btn-danger">はじめる</li>

投稿2019/11/02 12:48

AsukaKobayashi

総合スコア296

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

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

sanyagi_d_1

2019/11/02 13:29

お、、これはダサいですね、、 row-reverse反映されてないのも半角スペース入れてないためでした。。 回答ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問