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

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

ただいまの
回答率

88.77%

html css bootstrapについて

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 349

ho_ho_to

score 17

<!DOCTYPE html>
<html lang=ja dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- fontawesome -->
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<!-- Bootstrap CSS -->
    <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">
    <title>Airbnbでお家、アパート、お部屋をシェアしよう</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <header>
        <div class="header1">
          <div class="left">
            <img src="../trace img/Airbnb/Airbnb-logo.png" alt=""class="inheader1">
            <a href="index.html">概要</a>
            <a href="#">準備</a>
            <a href="">安全</a>
            <a href="#">マネープラン</a>
          </div>
          <div class="right">
            <p>予想月収</p><p>¥100,891</p>
            <div class="a">
              <a href="#" id="start">はじめる</a>
            </div>
          </div>
        </div>
        <div class="header2">
          <div class="inheader2">
            <h1>空き部屋で世界をつなごう</h1>
            <p>どのくらいの収入が見込めるかチェック</p>
            <form class="check" action="index.html" method="post">
              <input type="search" value="東京" placeholder="ロケーション">
              <br>
              <select class="selecet" name="select1">
                <option value="all" selected>まるまる貸切</option>
                <option value="alone">個室</option>
                <option value="share">シェアルーム</option>
              </select>
              <select class="select" name="select2">
                <option value="1">ゲスト1人</option>
                <option value="2">ゲスト2人</option>
                <option value="3">ゲスト3人</option>
                <option value="4" selected>ゲスト4人</option>              
              </select>
            </form>
            <p>¥236,567 <span>月あたり</span></p>
            <div class="a">
              <a href="#" id="start">はじめる</a>
            </div>
          </div>
          <div class="pattern2">
            <h1>空き部屋で世界をつなごう</h1>
          </div>
        </div>
      </header>
      <div class="main">
        <div class="p">
          <p>どのくらいの収入が見込めるかチェック</p>
        </div>
        <div class="row" id="form">
          <form class="check" action="index.html" method="post">
            <input type="search" value="東京" placeholder="ロケーション">
            <br>
            <div class="col section2">
              <select class="selecet" name="select1">
                <option value="all" selected>まるまる貸切</option>
                <option value="alone">個室</option>
                <option value="share">シェアルーム</option>
              </select>
            </div>
            <div class="col section2">
              <select class="select" name="select2">
                <option value="1">ゲスト1人</option>
                <option value="2">ゲスト2人</option>
                <option value="3">ゲスト3人</option>
                <option value="4" selected>ゲスト4人</option>
              </select>
            </div>
          </form>
        </div>
        <p>¥236,567 <span>月あたり</span></p>
          <div class="a">
            <a href="#" id="start">はじめる</a>
          </div>
        <div class="row">
          <div class="col">
            <h3>なぜAirbnbでホスト?</h3>
            <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアして、世界中の旅好きな仲間とつながれます。予約可能日から料金、ハウスルーム、ゲストとの交流頻度まで、すべて自分で決めることができます。</p>
          </div>
          <div class="col">
            <h3>困ったときも安心</h3>
            <p>万一に備えるUS$1,000,000の財産補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます</p>
          </div>
        </div>
        <hr>
        <h2>3スッテプで簡単ホスティング</h2>
        <div class="row">
          <div class="col">
            <i class="far fa-check-circle"></i>
            <h3>無料でお部屋を掲載</h3>
            <p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p>
          </div>
          <div class="col">
            <i class="far fa-check-circle"></i>
            <h3>ホスティング方法を設定</h3>
            <p>ご希望のスケジュール、料金、ゲストの要件を選びます。設定の際にはヒントも表示されます。</p>
          </div>
          <div class="col">
            <i class="far fa-check-circle"></i>
            <h3>はじめてのゲストをもてなそう</h3>
            <p>リスティングが掲載され次第、条件にかなったゲストから連絡を受けとることができます。ゲストの宿泊前にご質問があればメッセージを送信できます。</p>
            <a href="">ホスティングの始め方を学ぶ</a>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="responsive">
              <i class="fas fa-quote-left"></i>
              <p>「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</p>
            </div>
            <div class="add">
              <p>Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています</p>
            </div>
            <div class="a_button">
              <a href="#">ホスト実践例をチェック</a>
            </div>
          </div>
          <div class="col">
            <img src="trace img/8e6c68cc-e714-4849-bad9-464abf58e84a.jpg" alt="">
          </div>
        </div>
        <hr>
        <h2>万一のときも安心です</h2>
        <div class="row">
          <div class="col section2">
            <p>大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。万一のトラブルのときには、Airbnbが全力でサポートします。建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p>
            <div class="other_a">
              <a href="#">ホストをお守りするしくみを見る</a>
            </div>
          </div>
          <div class="col section2">
            <ul>
              <li><i class="fas fa-check"></i> 予約前に政府発行の身分証明書を求める権限</li>
              <li><i class="fas fa-check"></i> ハウスルールに同意しないと泊まれない</li>
              <li><i class="fas fa-check"></i> 過去の宿泊のレビューもばっちり読める</li>
              <li><i class="fas fa-check"></i> 財物損害は¥100,000,000まで無料で補償</li>
              <li><i class="fas fa-check"></i> $1,000,000の賠償責任保険が無料で付帯</li>
              <li><i class="fas fa-check"></i> 24時間365日対応グローバルカスタマーサポート</li>
            </ul>
          </div>
        </div>
        <div class="img">
          <img src="trace img/bb358a46-fa25-4895-b5fd-048a386bdcac.jpg" alt="">
        </div>
        <hr>
        <h2>シンプルな決済</h2>
        <div class="row">
          <div class="col section2">
            <h3>料金設定は完全に自由</h3>
            <p>料金は常に自由に選択できます。迷ったときには、域内需要に合わせて設定できるツールがあります。</p>
          </div>
          <div class="col section2">
            <h3>手数料が安い</h3>
            <p>登録に費用は一切かかりません。Airbnbは通常、予約ごとに業界で最低の均一3%をサービス料としていただいております。</p>
          </div>
          <div class="col section2">
            <h3>迅速な支払い</h3>
            <p>ゲストのチェックイン後に、Paypal、直接振込み、またはその他の利用可能な方法で受取金を送金できます。</p>
            <div class="other_a">
              <a href="#">Airbnb収入を得るまでの流れを見る</a>
            </div>
          </div>
        </div>
        <div class="row flower">
          <h2>収入を増やした<br>い?</h2>
          <div class="start2">
            <a href="#">はじめる</a>
          </div>
        </div>
      </div>
      <footer class="last">
        <hr class="last">

        <hr class="last">
        <div class="row lastfooter">
          <div class="footerlast1">
            <img src="../trace img/Airbnb/Airbnb-logo.png" alt="">
            <p>Airbnb Global Services Limited<br>
              観光庁長官(01)第s0001号(2018年6月15日-2023年6月14日)
              ©2019 Airbnb,Inc.All rights reserved.
            </p>
          </div>
          <div class="yen">
            JPY
          </div>
        </div>
      </footer>
    </div>
<!-- jQuery、Popper.js、Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>


bodyの中身をcontainerでグルッと囲むと右側に余白ができてしまいます。
container-fluidに変えると消えます。こうするとなぜ消えるのですか?

[1]container-fluidとcontainerの違いは
前者がブラウザの横幅を最大限使って描画されるのに対し、後者は閲覧者の画面サイズに応じて横幅が適宜制限されて描画されることですよね?
つまり連続的かそうでないかの違いであって、なぜそれが余白の有無に関わってしまうのですか?

[2]あと、そもそもcontainerを消し去ってもウィンドウの幅を変えるとそれに対応して表示される幅も変わります。段組もしっかりできています。
containerはなぜ必要なのでしょうか?

[3]containerはmeta name="viewport" content="width=device-width"の指定と何が違うのでしょうか?
段組ができること以外に違いはありますか?

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/06/05 21:01

    タイトルにタグと同じ文言は必要ないです。要件のみを記載してください

    キャンセル

  • ho_ho_to

    2019/06/05 23:08

    文字数が多すぎてだめです。
    一般的な話でお願いします。

    キャンセル

  • Eggpan

    2019/06/06 00:36

    https://teratail.com/questions/192214 との違いが分からないので、
    違う質問であればそれぞれの質問文を修正するか、重複でしたら削除依頼をお願いします。

    https://teratail.com/help/avoid-asking
    閲覧数を増やす目的などにより、過去に投稿した質問と同じ内容の質問を新たに投稿することは推奨していません。
    他に同じ問題を抱える人のヒントとなる情報が分散してしまうためです。
    質問について新たにわかったことや試したことがあれば、すでにある質問を編集してください。

    キャンセル

回答 1

0

containerの使い方が違うと思います。
container = コンテナ は、貨物コンテナと同じで、積み重ねて使用するイメージです。body直下に置いてwrapperとして使用する物では無いです。
参考のhtmlを見てみると、"万一のときも安心です" や "シンプルな決済" などはグループ化できますよね?
コンテナ = グループ のイメージで、コンテナを積み重ねていって1つのページが出来上がると思うとやりやすいと思います。
container-fluidとcontainerの違いは、画面サイズが2000px以上の横幅が大きい画面でわかりやすいです。
例えば、文章が2000pxも横に続いたら読みにくくないですか?containerは最大幅1200pxくらいなので、読みやすさを保ってくれます。余った余白は左右につき、containerは中央配置されます。
container-fluidは、最近多くなってきている画面幅いっぱいの写真などを使う場合に適しています。

ちょっとサンプルのコードの使いやすいところだけ抜き出して使用例を作ってみました。
こうすると、間に画面幅100%の画像が入るようなデザインでも簡単に実装できます。

<div class="main">
  <div class="container">
    <h2>万一のときも安心です</h2>
    <div class="row">
      <div class="col section2">
        <p>大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。万一のトラブルのときには、Airbnbが全力でサポートします。建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p>
        <div class="other_a">
          <a href="#">ホストをお守りするしくみを見る</a>
        </div>
      </div>
      <div class="col section2">
        <ul>
          <li><i class="fas fa-check"></i> 予約前に政府発行の身分証明書を求める権限</li>
          <li><i class="fas fa-check"></i> ハウスルールに同意しないと泊まれない</li>
          <li><i class="fas fa-check"></i> 過去の宿泊のレビューもばっちり読める</li>
          <li><i class="fas fa-check"></i> 財物損害は¥100,000,000まで無料で補償</li>
          <li><i class="fas fa-check"></i> $1,000,000の賠償責任保険が無料で付帯</li>
          <li><i class="fas fa-check"></i> 24時間365日対応グローバルカスタマーサポート</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <img src="trace img/bb358a46-fa25-4895-b5fd-048a386bdcac.jpg" alt="">
  </div>
  <div class="container">
    <h2>シンプルな決済</h2>
    <div class="row">
      <div class="col section2">
        <h3>料金設定は完全に自由</h3>
        <p>料金は常に自由に選択できます。迷ったときには、域内需要に合わせて設定できるツールがあります。</p>
      </div>
      <div class="col section2">
        <h3>手数料が安い</h3>
        <p>登録に費用は一切かかりません。Airbnbは通常、予約ごとに業界で最低の均一3%をサービス料としていただいております。</p>
      </div>
      <div class="col section2">
        <h3>迅速な支払い</h3>
        <p>ゲストのチェックイン後に、Paypal、直接振込み、またはその他の利用可能な方法で受取金を送金できます。</p>
        <div class="other_a">
          <a href="#">Airbnb収入を得るまでの流れを見る</a>
        </div>
      </div>
    </div>
  </div>
</div>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/07 09:11

    なるほど。
    そういうことなんですね。
    親切な回答ありがとうございます。

    キャンセル

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

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る