投稿2020/05/04 15:00
編集2020/05/05 19:00HTMLで背景画像を表示させようとしているのですが、表示できるものとできないものがあります。
例えば、airbnb.pngという画像ファイルは表示できるのですが、airbnb5.pngというファイルは表示できません。どちらもhtmlファイルと同じ階層においてます。なぜこの現象が生まれるのか知りたいです。コード載せます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Bootstrapの練習</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/Bootstrapの練習.css"> <script type="text/javascript" src="js/jquery-3.5.0.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <h1></h1> <button type="button" class="btn btn-default">概要</button> <button type="button" class="btn btn-default">準備</button> <button type="button" class="btn btn-default">安全</button> <button type="button" class="btn btn-default">マネープラン</button> <div class="text-right pr-5"> <button type="submit" class="btn btn-danger">はじめる</button> </div> <div class="background-image"> <div class="row justify-content-end"> <div class="border col-5"> <br> <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ</h1> <h2 class="size1"><b>宿泊施設の内容を記入</b></h2> <br> <div class="row clear_form"> <div class="col-md"> <form> <div class="form-group"> <input type="text" class="form-control"> <div class="d-flex"> <select class="form-control w-50"> <option>まるまる貸切</option> <option>個室</option> <option>シェアルーム</option> </select> <select class="form-control w-50"> <option>ゲスト1人</option> <option>ゲスト2人</option> <option>ゲスト3人</option> <option>ゲスト4人</option> <option>ゲスト5人</option> <option>ゲスト6人</option> <option>ゲスト7人</option> <option>ゲスト8人</option> <option>ゲスト9人</option> <option>ゲスト10人</option> <option>ゲスト11人</option> <option>ゲスト12人</option> <option>ゲスト13人</option> <option>ゲスト14人</option> <option>ゲスト15人</option> <option>ゲスト16人</option> </select> </div> <button type="submit" class="btn btn-danger ">はじめる</button> </form> </div> </div> </div> </div> </div> </div> <div class="flex1_div"> <div class="first_div"> <h2 style="text-align:center" class="size2" ><b>Airbnbでホストするこれだけの理由</b></h2> <p style="text-align:center">どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p> </div> <div class="second_div"> <h2 style="text-align:center" class="size3"><b>困った時も安心</b></h2> <p style="text-align:center">万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p> </div> </div> <h2 style="text-align:center" class="px"><b>3ステップでホスティング</b></h2> <div class="flex1_div"> <div class="third_div"> <h3><b>無料でお部屋を掲載</b></h3> <p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p> </div> <div class="f4_div"> <h3><b>ホスティング方法を設定</b></h3> <p>スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。 </p> </div> <div class="f5_div"> <h3><b>はじめてのゲストが来ます！</b></h3> <p>リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。</p> <button type="button" class="btn btn-link mt-1">ホストを始める方法をチェック</button> </div> </div> <div><p class="px3">“</p> <h2 style="text-align:left" class="px1" > 「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</h2> <p style="text-align:left" class="px1">Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています</p> <button type="submit" class="btn btn-outline-dark px1" >ホスト実践例をチェック</button> </div> <div class="background-image1"> </div> <h2 style="text-align: center"class="px"><b>万一の時も安心です</b></h2> <div class="flex_div"> <div class="f6_div"> <p class="px4">大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。 その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。 万一のトラブルのときには、Airbnbが全力でサポートします。 建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p> <button type="button" class="btn btn-link mt-1 px2">ホストを守るAirbnbの仕組みをチェック</button> </div> <div class="f7_div"> <ul> <li>予約前に政府発行の身分証明書を求める権限</li> <li>ハウスルールに同意しないと泊まれない</li> <li>過去の宿泊のレビューもばっちり読める</li> <li>財物損害は¥100,000,000まで無料で補償</li> <li>$1,000,000の賠償責任保険が無料で付帯</li> <li>24時間365日対応グローバルカスタマーサポート</li> </ul> </div> </div> </div> </body> </html> コード
.px { font-size: 320%; padding-top: 8%; padding-bottom: 5%; } .size1{ font-size: 100%; } .size2{ font-size: 170%; } .size3{ font-size: 170%; } .background-image{ background-image: url(airbnb5.png); background-repeat: no-repeat; background-position: center center; background-size: cover; padding-bottom:33% } .flex1_div { display: flex; justify-content: center; } .first_div { display: inline-block; width: 24%; padding:0.3%; margin: 0 10px 0 0; } .second_div { display: inline-block; width: 24%; padding:0.3%; margin: 0 10px 0 0; } .third_div{ display: inline-block; width: 16%; padding:0.3%; margin: 0 10px 0 0; } .f4_div{ display: inline-block; width: 16%; padding:0.3%; margin: 0 10px 0 0; } .f5_div{ display: inline-block; width: 16%; padding:0.3%; margin: 0 10px 0 0; } .px1{ width: 32%; padding-left: 10%; } .px2{ padding-left: 10%; } .background-image1{ background-image:url(../airbnb.png); } .form-control{ text-align: left } .form-group{ width: 100%; } .clear_form:after{ content: ""; display: block; clear: both; } .px3{ font-size: 500%; color:orange; padding-left: 10%; } ul { background: white; padding: 0 0.5em; position: relative; } ul li { line-height: 1.5; padding: 0.5em 0 0.5em 1.5em; border-bottom: 2px solid white; list-style-type: none!important; } ul li:before { font-family: "Font Awesome 5 Free"; content: "\f00c";/*アイコン種類*/ position: absolute; left : 1.0em; /*左端からのアイコンまで*/ color: #668ad8; /*アイコン色*/ } ul li:last-of-type { border-bottom: none;/*最後の線だけ消す*/ } .f6_div{ /* display: inline-block;*/ width: 45%; padding:0.3%; margin: 0 10px 0 0; } .f7_div{ /*display: inline-block;*/ width: 45%; padding:0.3%; margin: 0 10px 0 0; } /*.px4{ width: 34%; padding-left: 10%; }*/ h2.px{ text-align: center; } .flex_div{ max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-evenly; } コード
追記：airbnb.pngの場合：
回答1件
0
ベストアンサー
airbnb.pngという画像ファイルは表示できるのですが、airbnb5.pngというファイルは表示できません。どちらもhtmlファイルと同じ階層においてます。
同じ階層においているのに指定が違うから。
CSS
1background-image: url(airbnb5.png); 2background-image:url(../airbnb.png);
投稿2020/05/05 04:11
総合スコア69458
あなたの回答
tips
プレビュー
Q&A
