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

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

ただいまの
回答率

88.77%

綺麗にdiv要素で囲む方法を教えてください

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,179

kentasuzuki_

score 19

早めに答えが知りたいので、再度ご質問させていただきます。

念のために全文を記載しております。
見づらいコードで申し訳ありませんが、アドバイスをいただければと思っております。
画像を見ていただければ、ご理解いただけるかと思いますが、
赤太字で いつも完璧な贈りもの と書いている上のdiv class="space-full"で囲んだところが、
実際の失敗画像では、赤枠の部分が狭くなっています。

理想のイメージ画像のように 

img要素

<div class="space-full">
h2要素
p要素
div
</div>

img要素

divで囲んだ要素を綺麗に囲いたいのですが、うまくいきません。

div class="space-full"に高さを加えようとして、height:500px;などとしましたが、
これでは無理やり高さを調整している気がして、別の方法を探しています。
自動的に調整できるようなコマンドがあれば、それを使いたいのですが、
height:auto;と試しましたが、何も起こりませんでした。

この理由も分からないので、どなたか教えていただきたいと思っております。
(デベロッパーツールの中身も確認しましたが、複雑で分かりませんでした。)

※補足ですが、JavaScript文が入っていますが、これはBootstrapというツールを利用しているからです。
【理想の全体のイメージURL】
https://www.airbnb.jp/gift
※HTML・CSS練習のためこのサイトを模写しております。

【理想のイメージ画像】
イメージ説明

【実現したいイメージ画像】
イメージ説明

【実際の失敗画像】
イメージ説明

<!DOCTYPE html>
 <html lang="ja">
  <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="UTF-8">
     <title>現地の人から借りる家、体験&スポット-Airbnb</title>
     <link rel="stylesheet" href="css/style.css" type="text/css">
     <link rel="icon" href="image/image1.png">
    <!-- <link href="../Sublime3/css/bootstrap.min.css" rel="stylesheet" type="text/css"> -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="mokuji">
       <img src="image/image1.png" width="60px" height="48px" alt="目次">
    </div>
   <div class="search-bigbox">
     <div class="search-box">
        <input id="text-searchbox" type="text" name="search" value="探す" size="40px" >

          <div class="search">
          <img src="image/image2.png" width="18px" height="18px" alt="探す">
          </div>
     </div>
   </div>

     <div class="boxbutton">
     <button type="button" name="ホスト" class="host1">
      <p>ホストをはじめる</p>
     </button>
     <button type="button" name="ヘルプ" class="help2">
       <p>ヘルプ</p>
     </button>
     <button type="button" name="登録" class="regist3">
      <p>登録する</p>
     </button>
     <button type="button"name="ログイン"  class="login4">
      <p>ログイン</p>
      </button>
    </div>
    <!--画像挿入-->
    <div class="trip">
     <img src="image/image4.jpg" width="1920px" height="680px" alt="旅行">
      <div class="tripgift">
      <p id="tp"><strong>旅を贈ろう。</strong></p>
      Airbnbギフトカードで、世界を身近に<br><br>
      <input id="submit_button" type="submit" value="ギフトカード登録">
      </div>
     </div>
     <br><br>
 <div class="space-full">   
 <div class="space-top3">
     <h2>いつも完璧な贈りもの</h2>
    <div class="space-top3-2">
    <div class="mail">
       <img src="image/image5.png" width="50px" height="50px" alt="メール">
      <h3>簡単に使える</h3>
       <p>ギフトカードはメールで届きます。Airbnbア<br>カウントへのギフト登録も超かんたん。</p>
      </div>
      <div class="watch">
         <img src="image/image6.png" width="50px" height="50px" alt="時計">
       <h3>有効期間なし</h3>
         <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
      </div>
      <div class="earth">
         <img src="image/image7.png" width="50px" height="50px" alt="地球儀">
         <h3>忘れられない旅</h3>
         <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
      </div>
      </div>
     </div>
    </div> 
      <div class="page-container-full">
      <br><br>
      <img src="image/image8.png" width="100px" height="100px" alt="プレゼント">
      <h2>ギフトカードをもらったら...</h2>
      <p>ログインあるいは利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</p>
      </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="../Sublime3/js/bootstrap.min.js"></script>
  </body>

 </html>
.mokuji{
position:absolute;
top:20px;
left:10px;
}


.search{
position:absolute;
top:15px;
left:10px;
}

.search-bigbox{
position:relative;
top:-15px;
left: 80px;
width:350px;
height:48px;
background-color:rgba(0,0,0,0);
box-shadow: rgba(0,0,0,0.1) 0px 2px 4px;
border-width:1px;
border-style: solid;
border-color: rgb(235,235,235);
border-image: initial;
border-radius: 4px;
}

input#text-searchbox{
position:absolute;
top:15px;
left:45px;
font-size:16px;
font-weight:bold;
color:gray;
background-color:transparent;
border:0px;

}



.boxbutton{
position:relative;
display:flex;
justify-content:flex-end;
top:-90px;

}


.host1{
position: relative;
display:inline-block;
width:150px;
height:50px;
font-size:14px;
font-weight:bold;
background-color:transparent;
border:0px;
}

.host1:hover{
border-top:0;
border-bottom:2px solid;
border-left:0;
border-right:0;
border-bottom-color:gray;
}

.help2{
position: relative;
display:inline-block;
width:120px;
height:50px;
font-size:14px;
font-weight:bold;
background-color:transparent;
border:0px;
}

.help2:hover{
border-top:0;
border-bottom:2px solid;
border-left:0;
border-right:0;
border-bottom-color:gray;
}

.regist3{
position: relative;
display:inline-block;
width:120px;
height:50px;
font-size:14px;
font-weight:bold;
background-color:transparent;
border:0px;
}

.regist3:hover{
border-top:0;
border-bottom:2px solid;
border-left:0;
border-right:0;
border-bottom-color:gray;
}

.login4{
position: relative;
display:inline-block;
width:120px;
height:50px;
font-size:14px;
font-weight:bold;
background-color:transparent;
border:0px;
}

.login4:hover{
border-top:0;
border-bottom:2px solid;
border-left:0;
border-right:0;
border-bottom-color:gray;
}


.trip{
position:relative;
top:40px;
}

.tripgift{
position:absolute;
top:150px;
left:300px;
text-align:center;
color:white;
}

p#tp{
font-size:48px;
}

input#submit_button{
position: absolute;
font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
width:200px;
height:50px;
left:0px;
font-weight:bold;
font-size:16px;
color:#484848;
text-align:center;
background-color:#fff;
}

.space-full{
position: relative;
width: auto;
}


.space-top3{
position: relative;
display:flex;
justify-content: center;
margin-left: auto;
margin-right: auto;
}


.space-top3 h2{
position: absolute;
font-size:32px;
font-weight:bold;
font-style:solid;
text-align:center;
}


.mail{
position:absolute;
display:inline-block;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
top: 100px;
left: 450px;
}

.mail h3{
position:absolute;
left:-20px;
}

.mail p{
position:absolute;
width: 350px;
top:100px;
left:-130px;
}

.watch{
position:absolute;
display:inline-block;
margin-left: auto;
margin-right: auto;
top: 100px;
left: 800px;
}

.watch h3{
position:absolute;
left:-20px;
}

.watch p{
position:absolute;
width: 330px;
top:100px;
left:-130px;
}

.earth{
position:absolute;
display:inline-block;
margin-left: auto;
margin-right: auto;
top: 100px;
left: 1200px;
}

.earth h3{
position:absolute;
width:330px;
left:-70px;
}

.earth p{
position:absolute;
width: 330px;
top:100px;
left:-150px;
}

.page-container-full{
position:relative;
background-color:#007a87;
top:300px;
width:auto;
height:400px;
display:flex;
justify-content:center;
}

{
position: absolute;
top: 50px;
}

.page-container-full img{
position: absolute;
top:10px;
}

.page-container-full h2{
position: absolute;
top:100px;
width:auto;
height:50px;
font-size:32px;
font-weight:bold;
color:#fff;
}

.page-container-full p{
position: absolute;
top:170px;
width: auto;
height: 20px;
font-size:20px;
color:#fff;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • Lhankor_Mhy

    2019/07/01 22:41

    https://teratail.com/questions/197843
    マルチポストは推奨されていません。

    > また、teratail上で誤って同じ質問を複数投稿してしまった場合は、質問の削除リクエストを送ってください。
    https://teratail.com/help#posted-otherservice

    キャンセル

  • kentasuzuki_

    2019/07/01 22:53

    前の質問を削除いたしました。

    キャンセル

回答 3

checkベストアンサー

+3

position:absoluteするとラップしているHTML要素は子要素の高さを引き継げません

追記

該当部分だけ

<style>
.space-full{
  width: auto;
}
.space-top3{
  background-Color:gray;
}
.space-top3 h2{
  font-size:32px;
  font-weight:bold;
  font-style:solid;
  text-align:center;
}
.space-top3-2{
  background-Color:yellow;
  justify-content: center;
  display: -webkit-flex;
  display: flex;
}
.mail,.watch,.earth{
  text-align:center;
  display:inline-block;
}
.mail{
  background-Color:lime;
}
.watch{
  background-Color:aqua;
}
.earth{
  background-Color:fuchsia;
}
.mail h3,.watch h3,.earth h3{
  text-align:center;
}
.mail p,.watch p,.earth p{
  width: 330px;
  text-align:left;
}
</style>
<div class="space-full">   
  <div class="space-top3">
    <h2>いつも完璧な贈りもの</h2>
    <div class="space-top3-2">
      <div class="mail">
        <img src="image/image5.png" width="50px" height="50px" alt="メール">
        <h3>簡単に使える</h3>
        <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p>
      </div>
      <div class="watch">
         <img src="image/image6.png" width="50px" height="50px" alt="時計">
         <h3>有効期間なし</h3>
         <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
      </div>
      <div class="earth">
         <img src="image/image7.png" width="50px" height="50px" alt="地球儀">
         <h3>忘れられない旅</h3>
         <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
      </div>
    </div>
  </div>
</div> 

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/07/01 22:55

    ありがとうございます。
    申し訳ございませんが、まだ分かっていないのですが、
    親要素でposition:relativeとしても、子要素はposition:absoluteと設定する必要はないということなのでしょうか?

    キャンセル

  • 2019/07/01 22:55

    またラップしているとはどういうことでしょうか?
    ネットで調べてみたのですが、折り返しという意味だそうなのですが、イマイチ理解できていないです。

    キャンセル

  • 2019/07/02 12:11

    ラップする=囲んでいる
    フレックスBOXを利用しているのですから、absoluteは全部とってください
    該当部分のHTMLとCSSを追記しておきました
    (わかりやすいように色をつけてあります)

    キャンセル

  • 2019/07/02 23:41

    ありがとうございます
    ご丁寧にしていただき、大変助かりました。

    キャンセル

0

お求めの回答になるかわかりませんが、heightの指定はpx以外にもビューポート等で指定する方法もあります。以下のリストからお求めのもの探してはいかがでしょうか。
https://qiita.com/anchoor/items/f197296d6b4ae874e260

height: autoに関してですが、autoは親要素内の子要素の大きさで高さが決まります。この場合は <div class="space-full"> 内のh2 h3 pタグなどが子要素にあたります。

回答になっていれば幸いです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/07/02 23:40

    ありがとうございます。
    autoの使い方が理解できました。
    この場合では、子要素の高さがないと、autoも使いづらいということですね。

    キャンセル

0

崩れる理由:
提示のコードで見ると、HTML上では「親子」の関係が記載されていますが、CSS上では、子要素全てがposition:absolute;されているので、親要素の高さが「0(ゼロ)」のため、親要素からハミ出してます。

-追記-
表現を一部、修正しました。


「yambejp」さんと、ほぼ同じで、該当箇所のみです。

.space-full {
  background-color: powderblue;  /* ← 分かりやすく色を付けています。 */
}

.space-top3 {
  /* 設定削除 */
}

.space-top3-2 {
  text-align: center;
}

.space-top3 h2 {
  font-size:32px;
  font-weight:bold;
  font-style:solid;
  text-align:center;
}

.mail,
.watch,
.earth {
  box-sizing: border-box;
  display: inline-block;
  border: solid 1px #000;  /* ← 分かりやすく枠線を付けています。 */
}

.mail p,
.watch p,
.earth p {
  width: 330px;
  text-align: left;
}


position関連は、全て削除してください。
HTMLに余分な空白が含まれているので、削除してください。
HTML、CSS共に「インデント」を揃えて作成されると良いかと思います。

※余分なコードがあったので修正しました。(^^;)

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/07/03 00:56

    flexとは、似たような配置にはなりますが、動作させる部分が変わります。
    提示(および参考先)のコードでは「.mail,.watch,.earth」を、「inline-block」で横に並べていますが、flexを使うことで、もっと自由にモニター幅(デバイス幅)に柔軟に簡単に対応することが可能になりますので、今後を考えると、大変かもしれませんが、flexを覚えるとコーディングが楽になります。

    ※今回の提示コードであれば、どちらでも、あまり変わりないかと思います。

    キャンセル

  • 2019/07/03 01:28

    inline-blockがダメな訳ではありませんが、簡単にレイアウトが出来るようにflexが誕生したので、レイアウトに関して(特にレスポンシブ対応)は、flexが使いやすい場面が多いかと思います。

    キャンセル

  • 2019/07/03 12:58

    ありがとうございます。
    納得いたしました。
    flexboxのことも視野にいれつつ勉強していきたいと思います。

    キャンセル

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

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

関連した質問

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