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

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

ただいまの
回答率

88.61%

サイトの右側に巨大な余白 (検証でカーソルを当てても反応なしです。)

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 371

kazuki_user

score 107

サイトの右側にある巨大な余白が消せません。
●css
body { overflow: hidden; }
.container { overflow: hidden;}
を各々してみると、余白は大方消えたものの(少し残った)、画面のスクロールが出来なくなりました。
(※bodyとcontainerそれぞれ別々に試しました)

●containerは、bootstrap ver4のものです

どなたか原因を教えてくださるようよろしくお願いいたします。

以下、コードです。🙇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Airbnbでお家、アパート、お部屋をシェアしよう
  </title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css" >
  <link rel="icon" href="airbnbpp.png" type="image/vnd.microsoft.icon" />
</head>

<body>
  <header>
    <div class='logo'>
      <img src="airbnbpp.png" alt="ロゴ">
    </div>
    <nav>
      <ul>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
      </ul>
    </nav>
  </header>

  <div class="apple">    

    <div class="card" style="width: 25rem; height: 29.5rem;" >
      <div class="card-body">
        <h5 class="card-title">Airbnbホストになって、暮らしをレベルアップ</h5>
        <p class="card-text">どれくらいの収入が見込めるかチェック</p>


          <input type="text" placeholder="ロケーション" class="location" value="京都">  

          <select name="stay" class="occupy">
            <option value="a">まるまる貸切</option>
            <option value="b">個室</option>
            <option value="c">シェアルーム</option>
          </select>



        <button type="button2" class="btn btn-danger" id="btn2">はじめる</button>
      </div>
    </div>
  </div>


<div class="all">
    <div class="container">
      <div class="row">
        <div class="one col-12 col-lg-4">
          <div class="h4">
            Airbnbでホストするこれだけの理由</div>
            <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>
        </div>

        <div class="two col-12 col-lg-4">
          <div class="h4">Airbnbならホストも安心安全</div>
          <p>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
          <a href="#" class="a">ホストを守るAirbnbの仕組みをチェック</a>
        </div>

        <div class="three col-12 col-lg-4">
          <div class="h4">ゲストは認証済みです</div>
          <p>Airbnbは全ゲストを対象に、予約の前に一定の情報(認証済み電話番号、メールアドレスなど)の提供を求めています。 さらにご希望の場合は、ほかのホストからの推薦、認証済みIDの取得を追加要件として求めることもできます。</p>
        </div>  
      </div>
    </div>

    <div class="_">______</div>
    <div class="step">3ステップでホスティング</div>

  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-4">
        <div class="N1">1</div>
          <div class="h4">無料でお部屋を掲載</div>
          <p><p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p></p>
      </div>

      <div class="col-12 col-lg-4">
        <div class="N2">2</div>
          <div class="h4">ホスティング方法を設定</div>
          <p>スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。</p>
      </div>

      <div class="col-12 col-lg-4">
        <div class="N3">3</div>
          <div class="h4">はじめてのゲストが来ます!</div>
          <p>リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。</p>
          <a href="#" class="a">ホストをはじめる方法をチェック</a>
      </div>
    </div>
  </div>    

  <div class="A">
    <img src="../mother.jpg" alt="ホストマザー">
      <div class="s1">
        <p class="s2">ホスティングの収入でキッチンを新調したり、<br>他の改装費用の一部を賄うことができました」</p>
        <p class="s3">Tessaさんはロンドン在住。<br>ホストになって経済的なゆとりができました</p>
        <button type="button" class="btn btn-light">実践例をチェック</button>
      </div>
  </div>
</div>




</body>
</html>
header {
  width: 1567px;
  height: 100px;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  position: fixed;
}

.logo {
  width: 50px;
  height: 50px;
  padding-left: 0;
}

.logo img {
  max-width: 100%;
  margin-left: 0;

}

nav ul {
  display: flex;
  list-style: none;

}

nav ul li {
  margin-left: 15px;

}
/* ____________________________________ */



li {
  font-weight: bold;
  margin-right: 10px;
}
.apple {
  background-image: url("../airbnb.jpg");
  background-size: cover;
  height: 900px;
  background-repeat: no-repeat;
  position: relative;
}



/* デスクトップ */

@media screen and (min-width:1000px) {
  .card {
    float: right;
    margin: 32px;
  }

  .card-title {
    font-weight: bold;
    font-size: 40px;
    margin-bottom: 15px;
    text-align: left;
    margin-top: 10px;
  }

  .card-text {
    font-weight: bold;
    font-size: 16px;

  }

  .btn {
    font-weight: bold; 
  }

  .location {
    border-radius: 4px;
    padding: 11px;
    margin-bottom: 8px;
    width: 360px;
  }

  .occupy {
    border-radius: 4px;
    padding: 11px 40px 11px 11px;
  }

  .guest {
    border-radius: 4px;
    padding: 11px 40px 11px 11px;
  }

  #btn2 {
    width: 360px;
    padding: 10px 22px;
    margin-top: 1px;
  }

  img {
    width: 380px;
    height: 380px;
    margin-bottom: 30px;
    margin-left: 220px;
    margin-right: 30px;
  }

  .s1 {
    margin-top: 70px;
    margin-left: 50px;
  }
  .s2 {
    columns: #484848;
    font-size: 32px;
  }
  .s3 {
    color: #767676;
    font-size: 16px;
  }
  .btn {
    font-weight: bold; 
    border: solid black;
    font-size: 16px;
  }

  ._ {
    font-weight: bolder;
    font-size: 30px;
    color: #484848;
    text-align: center;
    margin-top: 140px;
  }

  .step {
    font-size: 60px;
    font-weight: bold;
    text-align: center;

  }


  .a2 {
    color: rgb(49, 148, 115);
    display: block;
    margin-top: 40px;
    margin-left: 40px;
    margin-bottom: 10px;
    font-size: 20px;
  }

  ._2 {
    margin-left: 40px;
  }
  .A {
    width: 2500px;
    height: 380px;
    display: flex;
    margin-top: 170px;
  }


}

/* デスクトップここまで */

/* モバイル */

@media screen and (max-width: 999px) {
  .card {
    display: none;
  }  
  .greap {
    font-size: 50px;
    font-weight: bold;
    color: aliceblue;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20%;
    text-align: center;
    line-height: 50px;
    letter-spacing: 2px;
  }  
  img {
    width: 350px;
    height: 340px;
    margin-top: 70px;
    margin-right: 30px;
    margin-left: 40px;

  }

  .s1 {
    margin-top: 63px;
    margin-left: 40px;
  }
  .s2 {
    columns: #484848;
    font-size: 22px;
  }
  .s3 {
    color: #767676;
    font-size: 16px;
  }
  .btn {
    font-weight: bold; 
    border: solid black;
    font-size: 16px;
  }
  ._ {
    font-weight: bolder;
    font-size: 30px;
    color: #484848;
    text-align: center;
  }

  .step {
    font-size: 45px;
    font-weight: bold;
    text-align: center;
  }

  .a2 {
    color: rgb(49, 148, 115);
    display: block;
    margin-top: 40px;
    margin-left: 40px;
    margin-bottom: 10px;
    font-size: 18px;
  }

  ._2 {
    margin-left: 40px;

  }
  .A {
    width: 2500px;
    height: 680px;
    margin-left: 45px;
  }


}
/* モバイルここまで */



.all {
  margin-right: auto;
  margin-left: auto;
}



.h4 {
  font-weight: bold;
  margin-bottom: 20px;
  margin-top: 70px;
}

.one {
  margin-top: 30px;
}
.two {
  margin-top: 30px;
}
.three {
  margin-top: 30px;
}


.a {
  color: rgb(49, 148, 115);
}

.N1 {
  background-color: cadetblue;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  color: aliceblue;
  font-weight: bold;
  text-align: center;
  padding-top: 10px;
  font-size: 20px;
  margin-top: 40px;
  margin-bottom: 20px;
}

.N2 {
  background-color: cadetblue;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  color: aliceblue;
  font-weight: bold;
  text-align: center;
  padding-top: 10px;
  font-size: 20px;
  margin-top: 40px;
  margin-bottom: 20px;
}

.N3 {
  background-color: cadetblue;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  color: aliceblue;
  font-weight: bold;
  text-align: center;
  padding-top: 10px;
  font-size: 20px;
  margin-top: 40px;
  margin-bottom: 20px;
}

h5 {
  font-weight: bold;
  font-size: 16px;
}
.ppp p {
  font-size: 14px;
}

.set{
  border: solid rgb(116, 113, 113) 2px;
  border-radius: 3px;
  box-shadow:2px 2px 1px ;
  width: 100%;
  height: 100px;
  padding-top: 20px;
  padding-left: 10px;
  display: flex;
  background-image: url("../entrance.jpg");
  background-position: 0 0 ;
}

.set img {
  width: 100px;
  height: 100px;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

画面のスクロールが出来なくなりました。

とりあえず、
overflow: scroll; か overflow: auto;  でスクロールできませんか。

これで解決しないなら、現象の再現できる HTMLコードとCSSコードを提示してください。

呈示されたコードを見て

右側に巨大な余白の原因は、

  .A {
    width: 2500px; /*この巨大な幅が原因*/
    height: 380px;
    display: flex;
    margin-top: 170px;
  }


これを適切な幅に調整するか、削除するかすれば、余白は消えるでしょう。

最終的にどのようなレイアウトをご希望か不明ですが、とりあえずこの部分は、
一つ前の質問の私の回答のサンプルコードを参考にしてください。

あと、一つの質問が解決する前に、次から次へと質問するのはどうかと思います。
まずは、一つの質問を解決させてから次へ進むようにした方が混乱が少なく、結局早道になると思います。

おそらく、一つ前の質問が解決できていたら、今回の質問は必要なかったはずです。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/02/11 21:02

    返信ありがとうございます。
    overflow-flow: hidden; と 「overflow: scroll; や overflow: auto;」の併記は機能しませんでした。
    (スクロールは出来たものの余白は消えませんでした。)

    該当箇所がわかりませんでしたので、全体のコード(字数制限の為ある程度カット)を貼らせて頂きました。ご了承ください🙇

    キャンセル

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

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

関連した質問

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