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

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

ただいまの
回答率

89.13%

子要素を囲む入れ物(親要素)を子要素の大きさに合わせ、小さくしたい。

解決済

回答 1

投稿

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

AmanoEriko

score 12

いつもお世話になっております。

Airbnbの模写コーディング練習をしています。

レスポンシブ対応をさせた時、PC表示でメインイメージの中に表示される
フォームエリアを作っている最中です。

イメージ説明

今、この様な感じで、悩み、作業が止まってしまいました。

.formを囲っている.form-wrapperのwidthは100%に指定しており、
中身の大きさに合わせて変わるかと思いきや、
思う様に行きませんでした。

このまま、中身のコンテンツ幅に合わせて形を整えたいと思っているのですが、、、

よろしくお願いします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/media.css">

  <title>Document</title>
</head>
<body>
  <header>
   <section class="header-wrapper">
    <ul>
      <li><img src="img/airblogo.png"></li>
      <li><a href="#">概要</a></li>
      <li><a href="#">準備</a></li>
      <li><a href="#">安全</a></li>
      <li><a href="#">マネープラン</a></li>
    </ul>
    <div class="btn">はじめる</div>
   </section>
  </header>

  <section class="main-visual-wrapper">
    <div class="visual-content">


      <section class="form-wrapper2">
        <div class="form">
          <h2 class="form-in">Airbnbホストになって、暮らしをレベルアップ</h2>
          <h2>宿泊施設の内容を記入</h2>
          <input type="text" value="東京">

          <select class="room">
            <option>まるまる貸切</option>
            <option>個室</option>
            <option>シェアルーム</option>
          </select>

          <select class="gest">
            <option>ゲスト1人</option>
            <option>ゲスト2人</option>
            <option>ゲスト3人</option>
            <option>ゲスト4人</option>
          </select>
          <a href="#" class="btn">はじめる</a>
        </div>
      </section>

    <h1>Airbnbホストになって、暮らしをレベルアップ</h1>
    </div>
  </section>

<section class="form-wrapper">
  <div class="form">
    <h2>宿泊施設の内容を記入</h2>
    <input type="text" value="東京">

    <select class="room">
      <option>まるまる貸切</option>
      <option>個室</option>
      <option>シェアルーム</option>
    </select>

    <select class="gest">
      <option>ゲスト1人</option>
      <option>ゲスト2人</option>
      <option>ゲスト3人</option>
      <option>ゲスト4人</option>
    </select>
    <a href="#" class="btn">はじめる</a>
  </div>
</section>



  <section class="text-content">
    <div class="text-wrapper">
      <div class="text1">
        <h2>なぜAirbnbでホスト?</h2>
        <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアして、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流頻度まで、すべて自分で決めることができます。</p>
      </div>

      <div class="text2">
        <h2>困ったときも安心</h2>
        <p>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
      </div>
    </div>
  </section>


</body>
</html>
h1,
h2,
h3,
p{
  color:#484848;
}

body,
header{
  width:100%;
  margin:0;
}

a{
  text-decoration: none;
}

li{
  list-style: none;
}

/* ヘッダー */

header{
  display: none;
}

.header-wrapper ul li img{
  width:30px
}

.header-wrapper{
  display:flex;
  justify-content: space-between;
  height: 80px;
  align-items: center;
}

.header-wrapper ul{
  display:flex;

}

.header-wrapper ul li{
  margin: 0 20px;
}

.header-wrapper .btn{
  line-height: 40px;
  padding: 0 10px;
  margin-right: 10px;
  text-align: center;
  background:#DB3742;
  color: white;
  font-weight: bold;
  border-radius: 4px;
  /* align-self: center; */
}

/* メインビジュアル */

.main-visual-wrapper h1{
  color:white;
  font-size:30px;
  position:absolute;
  bottom:0;
}

.main-visual-wrapper{
  height: 300px;
  background-image: url("../img/header.jpg");
  background-size: cover;
  position:relative;
}

.visual-content{
  width: 70%;
  height:100%;
  margin: 0 auto;
  text-align: bottom;
}

.visual-content::before{
  content: '';
  display: inline-block;
  width:50px;
  height: 50px;
  background-image: url(../img/airblogo.png);
  background-size: contain;
  position: absolute;
  top:0;
  left:0;
}

/* メインビジュアルフォーム */

.form-wrapper2 .form-in{
  font-size: 40px;
}

.form-wrapper2{
  margin:0;
  width:100%;
}

.form-wrapper2 .form{
  width:50%;
}

/* インプットセクション */

.form h2,
.form input,
.form .btn{
  display: block;
}

.form-wrapper,
.form-wrapper2{
  width: 90%;
  margin: 0 auto;
  background: white;
}

.form{
  padding:40px;
}


.form h2{
  font-size:18px;
}

.form .btn{
  width:100%;
  line-height: 60px;
  text-align: center;
  background:#DB3742;
  color: white;
  font-weight: bold;
  border-radius: 4px;
}

.form input{
  line-height: 50px;
  border-radius: 4px;
  border: 1px #DCE0E0 solid;
  width: 100%;
  margin-bottom:5px;
  font-size:20px;
  color:gray;
}

.form .room,
.form .gest{
  border: 1px #DCE0E0 solid;
  padding:12px;
  background: white;
  margin-bottom:30px;
  font-size:20px;
  color:gray;
}


.form .room{
  width:60%;
}

.form .gest{
  float: right;
  width:38%;
}

select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  }
  select::-ms-expand{
  display: none;
  }

  /* テキストセクション */

  .text-wrapper{
    width:60%;
    padding-top: 40px;
    margin:0 auto;
  }

/* メディアクエリ */

@media only screen and (min-width: 1200px) {

header{
  display: block;
}

.visual-content::before{
  display:none;
}

.form-wrapper{
  display: none;
}

.main-visual-wrapper{
  height:600px;
}


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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

width:100%は親要素に対して100%です。

.form-wrapper2 .formについてるwidth:40%が横に空白を生み出している原因ですので、こいつを消せばいいのではないでしょうか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/05/11 10:35

    ありがとうございます。
    解決いたしました!

    キャンセル

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

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

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