Q&A
前提・実現したいこと
HTML,CSS,Bootstrapを使用して、サイトのページ模写を行っています。
画像と文字入力をしたいだけなのに、勝手にlinkを設定したときの状態になってしまいます。
解除する方法を教えてください。
発生している問題・エラーメッセージ
勝手にlinkの状態になる（ソースコードの該当箇所は/**************/で表示しています。footerの直前です）
該当のソースコード
/* 以下、HTMLコードです */ <!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="airbnb2.css"> <title>ホストをはじめる方法</title> </head> <body> <header class="bg-light"> <a href="#"><img src="img/logo.png" class="logo px-4"></a> </header> <main> <section class="bg-light px-4"> <div> <h6 class="font-weight-bold">準備</h6> <h1 class="font-weight-bold pb-2">ホスティングを始めるには</h1> <p class="pb-3">Airbnbでお部屋を掲載するのはとっても簡単です。設定も自由自在。わずか数ステップで収入の柱を増やし、旅好きな世界数百万人の仲間と交流できます。</p> <button type="button" class="btn btn-danger btn-lg font-weight-bold mb-5">はじめる</button> <img src="img/couple.png" class="w-100"> </div> </section> <section class="px-4"> <h1 class="font-weight-bold pb-4">泊め方は自分でコントロール</h1> <div> <div> <img src="img/time.png" width="6%" height="6%"> <h4>マイペースでできる</h4> <p>受け入れが必要な最低回数や日付の義務はありませんので、都合が悪い日付は自由にブロックすることができます。</p> <p>また、次のような予約受付のルールを設定することもできます。</p> <p>• 予約可能な最低／最大泊数 • 先々の予約（何か月先まで予約できるか） • 予約締切日（何日前まで予約できるか）</p> </div> <div> <img src="img/money.png" width="10%" height="10%"> <h4>料金はいつだって納得プライス</h4> <p>1泊料金は自由に設定でき、迷ったときには料金設定ツールがお役に立ちます。さらには次のようなカスタム料金も簡単に入力することができます。</p> <p>• 清掃料金 • 週割 • 期間限定スペシャルプライス</p> <p><a href="#" class="text-info">Airbnbで収入の柱を増やす方法をチェック</a></p> </div> <div> <img src="img/calender.png" width="6%" height="6%"> <h4>外部カレンダーと予定を同期</h4> <p>都合の悪い日に予約が入ったり、予約の重複を防ぐためには、Airbnbカレンダーと外部カレンダーを同期するという手段もあります。同期後は全カレンダーを常に最新情報に自動的にキープできるので安心です。</p> </div> <div> <img src="img/key.png" width="8%" height="8%"> <h4>滞在中のルールを決める</h4> <p>滞在中の決まりは「ハウスルール」に記載しておくと、予約前にゲストに同意を求め、事前告知を徹底できます。ルールを破られた場合、自分から予約をキャンセルしてもペナルティはかかりません。</p> </div> </div> </section> <section class="px-4"> <img src="img/photo1.png" class="w-100 mt-5"> <div> <p class="lead text-warning">"</p> <p class="lead">はじめるのは思っていたよりずっと簡単でした。</p> <p class="text-secondary">ボストンのJBさんとRamonaさんはホストで老後資金を貯めています。</p> <button type="button" class="btn btn-outline-secondary px-4 py-2 mb-5"><a href="#" class="font-weight-bold text-dark">ホスト実践例をチェック</a></button> </div> </section> <section class="px-4 pt-5"> <h1 class="font-weight-bold pb-4">世界数百万人にPR</h1> <img src="img/pr.png" class="w-100 pb-5"> <div> <div> <h4>設定は画面の指示に従うだけ</h4> <p>リスティングを作成する際には、予約時に誰もが気になる疑問に回答を記入していきます。宿泊施設の様子を紹介し、ほかにはない特長を具体的にまとめます。到着後ビックリされそうなことも書いておくと、のちのち安心です。</p> </div> <div> <h4>ヒントが盛りだくさん</h4> <p>予約がなかなか入らないときには、予約がすぐとれるような料金、設定、更新方法のヒントが表示されます。コミュニティセンターで経験豊富なホストに相談することもできるので、ひとりで悩みを抱え込む必要はありません。</p> </div> <div> <h4>世界数百万人が利用</h4> <p>お部屋の掲載が完了すると、全世界のゲストの検索結果に表示されます。Airbnbを利用するゲストは毎晩200万人近くにのぼります。その中から条件ぴったりの予約を呼び込むためのツールも各種ご用意しています。</p> <p><a href="#" class="text-info">ベストマッチを叶えるAirbnbのしくみをチェック</a></p> </div> </div> </section> <section class="px-4 pt-5 mt-5"> <h1 class="font-weight-bold pb-4">万全のサポート</h1> <img src="img/support.png" class="w-100"> <div> <h4>役立つ情報が満載</h4> <p>ホストには、いつもAirbnbコミュニティがついています。ヒントや情報が必要なときにはヘルプセンター、ホスト375,000人が集まるコミュニティセンター、各種ホスティング実践ツールキットがお役に立ちます。</p> </div> <img src="img/support2.png" class="w-100"> <div> <h4>24時間365日サポート</h4> <p class="pb-5">お困りのときには24時間365日いつでも電話、メール、ライブチャットでご相談ください。多言語対応のチームがリスティング作成からゲストに関するお悩みまであらゆることをお手伝いします。</p> </div> </section> <section class="px-4"> <h4 class="border-top border-secondry pt-5">200万人以上いれば、200万通りのホストスタイル。ひとつとして同じものはありません。</h4> <p class="border-bottom border-secondry pb-5"><a href="#" class="text-info font-weight-bold">ホストに求められる要件を見る</a></p> </section> <section class="px-4 pt-5"> <h1 class="font-weight-bold">みなさまの質問にお答えします</h1> <div> <p class="py-4 border-bottom border-secondry"><a href="#" class="text-info">お部屋の掲載料はいくら？</p> <p class="py-4 border-bottom border-secondry"><a href="#" class="text-info">リスティングの料金を選ぶには？</p> <p class="py-4 border-bottom border-secondry"><a href="#" class="text-info">料金設定の支援ツールはありますか？</p> </div> <div> <p class="py-4 border-bottom border-secondry"><a href="#" class="text-info">予約前にゲストに求められる要件は？</p> <p class="py-4 border-bottom border-secondry"><a href="#" class="text-info">ゲストに違和感を感じたら、どう対処？</p> <p class="py-4 border-bottom border-secondry"><a href="#" class="text-info">家財破損があった場合、どのような補償がありますか？</p> </div> </section> ／************************** ここから、勝手にlinkの状態になります***********************／ <section class="pt-5"> <img src="img/bedmaking2.png" class="w-100"> <p>収益化してみますか</p> <button type="button" class="btn btn-light btn-lg font-weight-bold">はじめる</button> </section> ／*************************** ここまでが、勝手にlink状態になる箇所です*********************／ </main> <footer> </footer> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html> /* 以下、CSSコードです */ body main section.bg-light{ height: 500px; margin-bottom: 150px } h4{ font-weight: bold; padding: 18px 0 10px; } section div div img{ padding-top: 20px; } /*ホスト実践例をチェック*/ section div button.btn{ border-width: 2px; } section div button.btn:hover{ background: white; } section div button a:hover{ text-decoration: none; }
試したこと
bootstrapの影響かと思い、コメントアウトしましたが、直りませんでした。
補足情報（FW/ツールのバージョンなど）
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/13 05:38