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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1375閲覧

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

kentasuzuki_

総合スコア28

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

0クリップ

投稿2019/07/01 13:21

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

念のために全文を記載しております。
見づらいコードで申し訳ありませんが、アドバイスをいただければと思っております。
画像を見ていただければ、ご理解いただけるかと思いますが、
赤太字で いつも完璧な贈りもの と書いている上の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; }
dotnetuseryamag👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kentasuzuki_

2019/07/01 13:53

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

回答3

0

ベストアンサー

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

追記

該当部分だけ

CSS

1<style> 2.space-full{ 3 width: auto; 4} 5.space-top3{ 6 background-Color:gray; 7} 8.space-top3 h2{ 9 font-size:32px; 10 font-weight:bold; 11 font-style:solid; 12 text-align:center; 13} 14.space-top3-2{ 15 background-Color:yellow; 16 justify-content: center; 17 display: -webkit-flex; 18 display: flex; 19} 20.mail,.watch,.earth{ 21 text-align:center; 22 display:inline-block; 23} 24.mail{ 25 background-Color:lime; 26} 27.watch{ 28 background-Color:aqua; 29} 30.earth{ 31 background-Color:fuchsia; 32} 33.mail h3,.watch h3,.earth h3{ 34 text-align:center; 35} 36.mail p,.watch p,.earth p{ 37 width: 330px; 38 text-align:left; 39} 40</style> 41<div class="space-full"> 42 <div class="space-top3"> 43 <h2>いつも完璧な贈りもの</h2> 44 <div class="space-top3-2"> 45 <div class="mail"> 46 <img src="image/image5.png" width="50px" height="50px" alt="メール"> 47 <h3>簡単に使える</h3> 48 <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p> 49 </div> 50 <div class="watch"> 51 <img src="image/image6.png" width="50px" height="50px" alt="時計"> 52 <h3>有効期間なし</h3> 53 <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p> 54 </div> 55 <div class="earth"> 56 <img src="image/image7.png" width="50px" height="50px" alt="地球儀"> 57 <h3>忘れられない旅</h3> 58 <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p> 59 </div> 60 </div> 61 </div> 62</div>

投稿2019/07/01 13:36

編集2019/07/02 03:10
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kentasuzuki_

2019/07/01 13:55

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

2019/07/01 13:55

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

2019/07/02 03:11

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

2019/07/02 14:41

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

0

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

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


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

CSS

1.space-full { 2 background-color: powderblue; /* ← 分かりやすく色を付けています。 */ 3} 4 5.space-top3 { 6 /* 設定削除 */ 7} 8 9.space-top3-2 { 10 text-align: center; 11} 12 13.space-top3 h2 { 14 font-size:32px; 15 font-weight:bold; 16 font-style:solid; 17 text-align:center; 18} 19 20.mail, 21.watch, 22.earth { 23 box-sizing: border-box; 24 display: inline-block; 25 border: solid 1px #000; /* ← 分かりやすく枠線を付けています。 */ 26} 27 28.mail p, 29.watch p, 30.earth p { 31 width: 330px; 32 text-align: left; 33}

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

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

投稿2019/07/02 07:21

編集2019/07/02 14:18
yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kentasuzuki_

2019/07/02 14:44

ご丁寧にありがとうございます。 また、コードを綺麗にまとめる方法も教えていただき、ありがとうございます。
kentasuzuki_

2019/07/02 15:40

追加でご質問させていただきたいのですが、 各セレクタにtext-align: center;とした際に、 display:flex; justify-content:center; と同じような効果があるのでしょうか? フレックスBOXについてまだ理解できていない部分が多いのですが、 text-align: center;を適用させて画面を縮めたり拡大しても各要素が伸び縮みしたので、 別にフレックスBOXを使う必要はないのかなと思ってしまいました。
yoshinavi

2019/07/02 15:56

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

2019/07/02 16:28

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

2019/07/03 03:58

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

0

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

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

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

投稿2019/07/01 13:57

ttakatech

総合スコア118

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kentasuzuki_

2019/07/02 14:40

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問