Q&A
Bootstrapを使ってサイトの模写をしているのですが、list-inlineでリストを横並びにした後に、新たにtext-rightを使って一つだけ右端付近に寄せたいのですが、機能しません。この場合、複数のクラスは当たらないのでしょうか。解決策を教えて欲しいです。よろしくお願いします。
<!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.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="testAirbnb-style.css"> <title>Airbnbでお家、アパート、お部屋をシェアしよう</title> </head> <main> <header> <div> <ul class="list-inline"> <img src="img/Airbnb_icon-icons.com_66791.ico" alt="" class="img-fluid"> <li class="list-inline-item btn-link">概要</li> <li class="list-inline-item btn-link">準備</li> <li class="list-inline-item btn-link">安全</li> <li class="list-inline-item btn-link">マネープラン</li> <button class="btn-danger text-right">はじめる</ｂ> </ul> </div> </header> <body> <h2 class="title">Airbnbでホストするこれだけの理由</h2> <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p> <h2 class="title">困ったときも安心</h2> <p>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p> <h2 class="title">3ステップでホスティング</h2> <h3>無料でお部屋を掲載</h3> <p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p> <h3>ホスティング方法を設定</h3> <p>スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。</p> <h3>はじめてのゲストが来ます！</h3> <p>リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。</p> <h2 class="midasi">「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</h2> <p>Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています</p> <h2 class="title">万一のときも安心です</h2> <p>大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。 その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。 万一のトラブルのときには、Airbnbが全力でサポートします。 建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p> <ul> <li>予約前に政府発行の身分証明書を求める権限</li> <li>ハウスルールに同意しないと泊まれない</li> <li>過去の宿泊のレビューもばっちり読める</li> <li>財物損害は¥100,000,000まで無料で補償</li> <li>$1,000,000の賠償責任保険が無料で付帯</li> <li>24時間365日対応グローバルカスタマーサポート</li> </ul> <h2 class="title">シンプルな決済</h2> <h3>料金設定は完全に自由</h3> <p>料金は常に自由に選択できます。 迷ったときには、 域内需要に合わせて設定できるツールがあります。</p> <h3>手数料が安い</h3> <p>登録に費用は一切かかりません。Airbnbは通常、予約ごとに業界で最低の均一3％をサービス料としていただいております。</p> <h3>迅速な支払い</h3> <p>ゲストのチェックイン後に、Paypal、直接振り込み、またはその他の利用可能な方法で受取金を送金できます。</p> <h2 class="midasi">ホスト収入でキッチンリフォーム。お家をいろいろアップグレードしました。</h2> <p>Tessaさんはロンドン在住。ホストになって経済的なゆとりができました</p> <h2 class="title">夢を共有する仲間が世界中に</h2> <h3>290万</h3> <p>Airbnbのホスト</p> <h3>80万</h3> <p>Airbnbにおける毎晩の平均宿泊数</p> <h3>14,000</h3> <p>月あたりの新規登録ホスト数</p> <h2 class="title">Airbnbについて</h2> <h3>Airbnbとは？</h3> <p>Airbnbは世界中の宿泊先や体験と人々をつなぎます。 ホストたちが原動力となるコミュニティが、地元のように旅するユニークな機会をゲストに提供しています。</p> <h3>ホスティングとは？</h3> <p>空いているお部屋やお家、得意分野があるなら、世界中の仲間とシェアして暮らしをステップアップできます。 掲載できるのはお部屋や体験です。掛け持ちもOK。 無理のないペースでできます。</p> <h2 class="title">よくある質問</h2> <ul> <li>Airbnbホストになれるのはどんな人？</li> <li>予約前にゲストに求められる条件は？</li> <li>お部屋の掲載料はいくら？</li> <li>家財破損があった場合、どのような補償がありますか？ </li> <li>リスティングの料金を選ぶには？</li> <li>料金設定の支援ツールはありますか？</li> </ul> <h2>ホスティングの詳細はこちら</h2> <h3>初期設定</h3> <p>ホスティング入門ガイド</p> <h3>安全</h3> <p>ホストを守るAirbnbのしくみ</p> <h3>マネープラン</h3> <p>Airbnbで収益を得るには</p> <h3>企業情報</h3> <ul> <li>Airbnbのご利用方法</li> <li>ニュースルーム</li> <li>Airbnb Citizen</li> <li>Airbnb Plus</li> <li>Airbnb Luxe</li> <li>HotelTonight</li> <li>Airbnbビジネスプログラム</li> <li>オリンピック</li> <li>採用情報</li> </ul> <h3>コミュニティ</h3> <ul> <li>ダイバーシティ＆ビロンギング</li> <li>アクセシビリティ対応</li> <li>Airbnb Magazine</li> <li>Airbnbアソシエイト</li> <li>お友達を招待</li> </ul> <h3>ホスト</h3> <ul> <li>お部屋を掲載</li> <li>オンライン体験をホストする</li> <li>体験をホストする</li> <li>CEOブライアン・チェスキーからのメッセージ</li> <li>責任あるホスティング</li> <li>オープンホーム</li> <li>リソースセンター</li> <li>コミュニティセンター</li> </ul> <h3>サポート</h3> <ul> <li>新型コロナウイルスに関する最新情報</li> <li>ヘルプセンター</li> <li>キャンセルオプション</li> <li>近隣コミュニティサポート</li> <li>信頼＆安全</li> </ul> </body> <footer> <small>Airbnb Global Services Limited 観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日) © 2020 Airbnb, Inc. All rights reserved·プライバシー·利用規約·サイトマップ·企業情報</small> </footer> </main> <!-- 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.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </html> コード
あなたの回答
tips
プレビュー
