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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

解決済

1回答

2339閲覧

footerとdivで囲んだ間の要素に隙間を空けたい

abc30

総合スコア36

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

0クリップ

投稿2017/10/15 06:27

###前提・実現したいこと
footerと3番目の<div class="advertisement">で囲んだ間の要素に隙間を空けたいが、今ぴったりくっついている。

###発生している問題・エラーメッセージ

特にエラーは発生していない。

###該当のソースコード
htmlには

<html lang="ja"> <head> <meta charset="UTF-8"> <link href="/static/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="detail.css"> <link rel="stylesheet" href="/static/bootflat/css/bootflat.min.css"> <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> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <title>WEB SITE</title> </head> <body class="relative"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="/static/accounts/header.css"> <header class="clearfix"> <h1 class="title">WEB SITE</h1>      <ul class="top-menu"> <li class="top-menu-item"><i class="fa fa-plus" aria-hidden="true"><a class="icon_head" href="send">SEND</a></i></li> <li class="top-menu-item"><i class="fa fa-eye" aria-hidden="true"><a class="icon_head" href="see">SEE</a></i></li> <li class="top-menu-item"><i class="fa fa-search" aria-hidden="true"><a class="icon_head" href="know">KNOW</a></i></li>   </ul> <a class="logout_button" href="logout_view">LOGOUT</a> </header> <main> <div class="container"> <div class="detailimg col-xs-8"> <div class="relative_ele"> <div class="image"> <img class="absolute-fill" src="detail.jpg" width="500px" height="300px" alt="詳細" /> </div> <div class="absolute-fill vertical-center-container"> <p class="hthree">I LOVE YOU</p> <p class="hthree_small">I MISS YOU</p> </div>          </div> <a class="button-primary" href="like">LIKE</a> <a class="button-primary" href="love">LOVE</a> <a class="button-primary" href="miss">MISS</a> <a class="button-primary" href="wantt">WANT</a> </div> <div class="col-xs-4 float-right"> <div class="advertisement"> <div class="flex-item"><a href="https://wwwwwwwwwwww" target="_blank" rel="nofollow"> <img border="0" width="250" height="250" alt="" src="https://yyyyyyyyyyyy"></a> <img border="0" width="1" height="1" src="https://wwwxxxxxxxxxxxxxxx" alt=""></div> </div> <div class="advertisement"> <div class="flex-item"><a href="https://aaaaaaaaaaa" target="_blank" rel="nofollow"> <img border="0" width="350" height="240" alt="" src="https://rrrrrrrrr"></a> <img border="0" width="1" height="1" src="https://wwwqqqqqqqqqqqqq" alt=""></div> </div> <div class="advertisement"> <div class="flex-item"><a href="https://zzzzzzzzz" target="_blank" rel="nofollow"> <img border="0" width="300" height="250" alt="" src="https://www2vvvvvvvvvvv"></a> <img border="0" width="1" height="1" src="https://wwwmmmmmmmmmmmmm" alt=""></div> </div> </div> </div> </main> <footer> <div class="footers"> <ul class="bottom-menu"> <li class="bottom-menu-item"><a class="bottom_index" href="">ご利用規約とプライバシポリシー</a></li> </ul> </div> </footer> </body> </html>

cssには

* { margin: 0; padding: 0; } main, ul{ display: flex; } .flex-item { width: 100%; } .half-width { width: 50%; } .title { color: white; font-size: 70px; align-self: center; } .top-menu-item{ list-style: none; font-size: 17px; } .detailimg { margin: 30px 0px; } .col-xs-8 {  width: calc(66.66666667% - 60px); } .image img{ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .white-letter { color: white; } .right-position { width: 100%; } .float-right { float: right; } .btn btn-primary btn-lg { background-color: black; } .outer { display: flex; justify-content: center; align-items: center; } .advertisement{ display: flex; align-items: flex-start; } .flex-item{ flex-flow: column nowrap; margin: 20px 30px; } .small_img { margin: 40px 0; } .relative_ele{ position: relative; height:300px } .absolute-fill { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; } .vertical-center-container { display: flex; flex-direction: column; justify-content: space-around; } .hthree { color: white; font-size: 30px; padding-top:70px; padding-left:8px; font-weight: bold; } .hthree_small { color: white; font-size: 20px; padding-left:30px; margin-top:0px; margin-left:0px; } .button-primary { display: inline-block; width: 300px; height: 45px; font-size: 20px; background-color: black; color: white; text-align: center; padding: 5px 0px; margin: 10px 0px; border-radius: 6px; } footer{ height: 50px; width: 100%; background-color: blue; position:absolute; bottom:0; margin-top:20px; } .footers{ background-color: blue; position:absolute; bottom:0; } .relative { position: relative; } .bottom-menu-item{ list-style: none; font-size: 15px; } .bottom_index { color: white; padding-left: 30px; }

と書いた。

###試したこと
clearfixが悪いのかと思ったが検証方法がわからない。
cssのflex-itemのmarginの大きさを大きくするとfooterとdivで囲んだ間の要素に隙間を空くが、3つのadvertisementの間の隙間も空いてしまい理想のスタイルにならない。

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

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

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

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

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

guest

回答1

0

ベストアンサー

的外れかもしれませんが、以下のようにしてはいかがでしょうか?

HTML

1<html lang="ja"> 2 3<head> 4 <meta charset="UTF-8"> 5 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/css/bootflat.min.css"> 7 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> 8 9 <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 10 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 11 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 12 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 13 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.selecter.min.js"></script> 14 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.stepper.min.js"></script> 15 <title>WEB SITE</title> 16 <style type="text/css"> 17 * { 18 margin: 0; 19 padding: 0; 20 } 21 22 main, ul { 23 display: flex; 24 } 25 26 .flex-item { 27 width: 100%; 28 } 29 30 .half-width { 31 width: 50%; 32 } 33 34 .title { 35 color: white; 36 font-size: 70px; 37 align-self: center; 38 } 39 40 .top-menu-item { 41 list-style: none; 42 font-size: 17px; 43 } 44 45 .detailimg { 46 margin: 30px 0px; 47 } 48 49 .col-xs-8 { 50 width: calc(66.66666667% - 60px); 51 } 52 53 .image img { 54 border-radius: 5px; 55 -webkit-border-radius: 5px; 56 -moz-border-radius: 5px; 57 } 58 59 .white-letter { 60 color: white; 61 } 62 63 .right-position { 64 width: 100%; 65 } 66 67 .float-right { 68 float: right; 69 } 70 71 .btn btn-primary btn-lg { 72 background-color: black; 73 } 74 75 .outer { 76 display: flex; 77 justify-content: center; 78 align-items: center; 79 } 80 81 .advertisement { 82 display: flex; 83 align-items: flex-start; 84 } 85 86 .flex-item { 87 flex-flow: column nowrap; 88 margin: 20px 30px; 89 } 90 91 .small_img { 92 margin: 40px 0; 93 } 94 95 .relative_ele { 96 position: relative; 97 height: 300px 98 } 99 100 .absolute-fill { 101 position: absolute; 102 left: 0px; 103 right: 0px; 104 top: 0px; 105 bottom: 0px; 106 } 107 108 .vertical-center-container { 109 display: flex; 110 flex-direction: column; 111 justify-content: space-around; 112 } 113 114 .hthree { 115 color: white; 116 font-size: 30px; 117 padding-top: 70px; 118 padding-left: 8px; 119 font-weight: bold; 120 } 121 122 .hthree_small { 123 color: white; 124 font-size: 20px; 125 padding-left: 30px; 126 margin-top: 0px; 127 margin-left: 0px; 128 } 129 130 .button-primary { 131 display: inline-block; 132 width: 300px; 133 height: 45px; 134 font-size: 20px; 135 background-color: black; 136 color: white; 137 text-align: center; 138 padding: 5px 0px; 139 margin: 10px 0px; 140 border-radius: 6px; 141 } 142 143 footer { 144 height: 50px; 145 width: 100%; 146 background-color: blue; 147 position: absolute; 148 bottom: 0; 149 margin-top: 20px; 150 } 151 152 .footers { 153 background-color: blue; 154 position: absolute; 155 bottom: 0; 156 } 157 158 .relative { 159 position: relative; 160 } 161 162 .bottom-menu-item { 163 list-style: none; 164 font-size: 15px; 165 } 166 167 .bottom_index { 168 color: white; 169 padding-left: 30px; 170 } 171 172 .advertisement:last-of-type { 173 margin-bottom: 200px; 174 } 175 </style> 176</head> 177 178<body class="relative"> 179 180<header class="clearfix"> 181 <h1 class="title">WEB SITE</h1> 182 183 <ul class="top-menu"> 184 <li class="top-menu-item"><i class="fa fa-plus" aria-hidden="true"><a class="icon_head" href="send">SEND</a></i> 185 </li> 186 <li class="top-menu-item"><i class="fa fa-eye" aria-hidden="true"><a class="icon_head" href="see">SEE</a></i> 187 </li> 188 <li class="top-menu-item"><i class="fa fa-search" aria-hidden="true"><a class="icon_head" 189 href="know">KNOW</a></i></li> 190 191 </ul> 192 <a class="logout_button" href="logout_view">LOGOUT</a> 193</header> 194 195 196<main> 197 <div class="container"> 198 <div class="detailimg col-xs-8"> 199 <div class="relative_ele"> 200 <div class="image"> 201 <img class="absolute-fill" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=detail.jpg" 202 width="500px" height="300px" alt="詳細"/> 203 </div> 204 205 <div class="absolute-fill vertical-center-container"> 206 <p class="hthree">I LOVE YOU</p> 207 <p class="hthree_small">I MISS YOU</p> 208 </div> 209 210 </div> 211 212 213 <a class="button-primary" href="like">LIKE</a> 214 <a class="button-primary" href="love">LOVE</a> 215 <a class="button-primary" href="miss">MISS</a> 216 <a class="button-primary" href="wantt">WANT</a> 217 </div> 218 219 <div class="col-xs-4 float-right"> 220 221 <div class="advertisement"> 222 <div class="flex-item"><a href="https://wwwwwwwwwwww" target="_blank" rel="nofollow"> 223 <img border="0" width="250" height="250" alt="" 224 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://yyyyyyyyyyyy"></a> 225 <img border="0" width="1" height="1" 226 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://wwwxxxxxxxxxxxxxxx" alt=""> 227 </div> 228 </div> 229 230 <div class="advertisement"> 231 <div class="flex-item"><a href="https://aaaaaaaaaaa" target="_blank" rel="nofollow"> 232 <img border="0" width="350" height="240" alt="" 233 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://rrrrrrrrr"></a> 234 <img border="0" width="1" height="1" 235 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://wwwqqqqqqqqqqqqq" alt=""> 236 </div> 237 </div> 238 239 <div class="advertisement"> 240 <div class="flex-item"><a href="https://zzzzzzzzz" target="_blank" rel="nofollow"> 241 <img border="0" width="300" height="250" alt="" 242 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://www2vvvvvvvvvvv"></a> 243 <img border="0" width="1" height="1" 244 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=https://wwwmmmmmmmmmmmmm" alt=""> 245 </div> 246 </div> 247 248 </div> 249 250 </div> 251</main> 252 253<footer> 254 <div class="footers"> 255 <ul class="bottom-menu"> 256 <li class="bottom-menu-item"><a class="bottom_index" href="">ご利用規約とプライバシポリシー</a></li> 257 </ul> 258 </div> 259</footer> 260</body> 261 262</html>

投稿2017/10/15 07:28

s8_chu

総合スコア14731

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

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

abc30

2017/10/15 07:51

ありがとうございます。 .advertisement:last-of-type { margin-bottom: 200px; } のcssがGoogleデベロッパーツールでは反映されないのですが。。。そちらでは反映されていましたか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問