Q&A
ヘッダーを固定したいのですが、position: fixed;を指定すると背景の画像の高さが変わってしまいます。
理想は背景画像の上にヘッダーがあり、画像上の下の方にタイトルを配置したいです。
headerをdivで挟んだりしてみましたが結果は同じでした。
原因等どこにあるでしょうか。拙い文章ですみません。
不足等ありましたらご指摘お願いします。
HTML
1<body> 2<div class="wrap"> 3<!-- トップ --> 4<div class="img" id="slideshow"> 5 <div class="top-text"> 6 <header> 7 <h3>Cresta Design</h3> 8 9 <ul class="list"> 10 <li class="top-list"> 11 <a href="#conce" style="text-decoration:none;">Concept</a> 12 </li> 13 <li class="top-list"> 14 <a href="#work" style="text-decoration:none;">Works</a> 15 </li> 16 <li class="top-list"> 17 <a href="#serve" style="text-decoration:none;">Service</a> 18 </li> 19 <li class="top-list"> 20 <a href="#cont" style="text-decoration:none;">Contact</a> 21 </li> 22 </ul> 23 </header> 24 25 <div class="top-title" id="smile"> 26 <h1>Design for Smile.</h1> 27 <h2 class="office">快適なオフィスを<br>デザインする</h2> 28 </div><!-- top-title--> 29 30 </div><!-- top-text --> 31</div><!-- img --> 32 33 34 <div class="concept" id="conce"> 35 <h1>CONCEPT — </h1> 36 <h2>“働きたくなる空間”をデザインする<br class="h2-br1">ことで<br class="h2-br2">人々を幸せにする。</h2> 37 <div class="body-img"> 38 <p>私たちは、オフィスに特化した空間デザイン専門としております。その理由は、「働きたくなる空間で仕事ができれば多くの人を幸せにできるのではないか」と考えるためです。そんな想いの株式会社Cresta Designだからこそできる空間デザインを提供させていただきます。</p> 39 <img src="img/concept-image@2x.jpg"> 40 </div> 41 <div class="conce-h3"> 42 <h3>Our Concept</h3> 43 </div> 44</div><!-- concept --> 45 46<div class="works-img" id="work"> 47 <div class="work-title"> 48 <h1> Works— </h1> 49 </div> 50 51 <div class="works-size"> 52 <div class="works"> 53 <div class="contents"> 54 <div class="content"> 55 <img src="img/card-img01@2x.jpg"> 56 <p>新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p> 57 </div> 58 <div class="content"> 59 <img src="img/card-img02@2x.jpg"> 60 <p>新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p> 61 </div> 62 <div class="content"> 63 <img src="img/card-img03@2x.jpg"> 64 <p>新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p> 65 </div> 66 </div><!-- contents --> 67 <div class="view-btn"> 68 <a href="#" style="text-decoration:none;">View more</a> 69 </div> 70 </div><!-- works --> 71 <div class="work-h3"> 72 <h3>Our Works</h3> 73 </div> 74 75 76 </div><!-- works-size --> 77 </div><!-- works-img --> 78 79<div class="service-cont" id="serve"> 80 <div class="service-body"> 81 <div class="service"> 82 <h1>Service—</h1> 83 </div><!-- service --> 84 </div><!-- service-body --> 85 86 <div class="ser-contents"> 87 <div class="service-content hover"> 88 <img src="img/service-img01@2x.jpg" class="ser-img"> 89 <p class="img-p">Hearing</p> 90 </div> 91 <div class="service-content hover"> 92 <img src="img/service-img02@2x.jpg" class="ser-img"> 93 <p class="img-p">Planning</p> 94 </div> 95 <div class="service-content hover"> 96 <img src="img/sevice-img03@2x.jpg" class="ser-img"> 97 <p class="img-p">Direction</p> 98 </div> 99 </div><!-- service-contents --> 100 101</div><!-- service-cont --> 102<div class="ser-h3"> 103 <h3>Our Service</h3> 104</div> 105 106<div class="contact" id="cont"> 107 <div class="contact-size"> 108 <div class="contact-form"> 109 <div class="cont-h1"> 110 <h1>Contact—</h1> 111 </div> 112 <div class="form-text"> 113 <p>お気軽にご相談ください。</p> 114 <a href="#" style="text-decoration:none;">Contact</a> 115 </div><!-- form-text --> 116 </div><!-- contact-form --> 117 <div class="con-h3"> 118 <h3>Contact Us</h3> 119 </div> 120 </div><!-- contact-size --> 121 </div><!-- contact --> 122 123 124<!-- フッター --> 125<footer> 126 <h4>©︎cresta.design all rights reserved</h4> 127</footer> 128</div> 129<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 130<script src="index.js"></script> 131 132</body>
CSS
1body { 2 font-family: 'Noto Serif','Noto Serif JP', serif; 3 color: #171717; 4 padding: 0; 5 margin: 0; 6 height: 100%; 7 width: 100%; 8} 9html { 10 height: 100%; 11} 12header { 13 display: flex; 14 justify-content: space-between; 15 height: 50px; 16} 17 18.img { 19 background-image: url(img/fv-bgi_01.jpg ); 20 transition: background-image 2.5S ease; /*背景画像をゆっくり変化させる*/ 21 background-size: cover; 22 height: auto; 23 width: 100%; 24 padding: 0; 25 margin: 0; 26 background-color: black; 27} 28 29.list { 30 list-style: none; 31 margin-top: 20px; 32 display: flex; 33 flex-direction: row; 34} 35 36.list a { 37 color: rgb(255, 250, 245); 38 margin-right: 50px; 39 font-size: 18px; 40} 41 42.top-title { 43 color: rgb(255, 250, 245); 44 padding: 0; 45 margin: 0; 46} 47 48/* トップの幅調整*/ 49.top-text { 50 width: 90%; 51 margin: 0 auto; 52} 53 54.drawer { 55 width: 0; 56 display: none; 57} 58 59header h3 { 60 float: left; 61 color: rgb(255, 250, 245); 62 font-size: 28px; 63 padding: 0; 64 margin-top: 20px; 65 letter-spacing: 3px; 66} 67 68.top-title h1 { 69 font-size: 50px; 70 margin-top: 33%; 71 padding: 0; 72} 73 74.top-title h2 { 75 font-size: 30px; 76 margin-left: 70px; 77 padding-bottom: 80px; 78} 79 80.office br { 81 display: none; 82} 83 84.concept { 85 width: 80%; 86 margin: 0 auto; 87} 88 89.concept h1 { 90 font-size: 60px; 91 margin-top: 50px; 92 display: inline-block; 93 letter-spacing: 7px; 94} 95 96.concept h2 { 97 font-size: 30px; 98 text-align: center; 99 margin-top: 30px; 100} 101 102.conce-h3 h3{ 103font-size: 70px; 104color: rgba(252, 242, 229, 0.486); 105display: flex; 106justify-content: flex-end; 107margin: 0; 108padding: 30px 0 30px 0; 109} 110 111 112.body-img { 113 display: flex; 114 margin: 0 auto; 115 margin-top: 60px; 116 width: 90%; 117} 118 119.body-img img { 120 margin-left: 50px; 121 display: block; 122 width: 50%; 123} 124 125.body-img p { 126 margin-top: 60px; 127 font-size: 20px; 128 font-family: 'Osaka'; 129 margin-right: 30px; 130 width: 50%; 131} 132 133.concept-h3 { 134 display: flex; 135 justify-content: flex-end; 136 font-size: 70px; 137 color: rgba(252, 242, 229, 0.486); 138 margin-right: 30px; 139 letter-spacing: 10px; 140} 141 142.h2-br1 { 143 display: none; 144} 145 146.contents { 147 display: flex; 148 justify-content: space-between; 149 height: auto; 150 padding-bottom: 90px; 151 width: 90%; 152 margin: 0 auto; 153} 154 155.content { 156 width: 28%; 157 box-shadow: 0px 0px 6px rgba(27, 19, 16, 0.4); 158} 159.content img { 160 width: 100%; 161 vertical-align: bottom;/* 画像とテキストの隙間をうめる*/ 162} 163 164.content p { 165 margin: 0 auto; 166 line-height: 45px; 167 font-weight: border; 168 padding:10px 30px; 169 font-size: 15px; 170 background-color:aliceblue; 171 margin-top: 0; 172 height: 40%; 173} 174 175.works { 176 margin: 0 auto; 177} 178 179.works-img { 180 background-image: url(img/works-bgi@2x.jpg); 181 background-size: cover; 182 width: 100%; 183 margin: 0 auto; 184 height: 100%; 185} 186 187.works-size { 188 width: 80%; 189 margin: 0 auto; 190} 191 192.work-title { 193 font-size: 30px; 194 margin-top: 50px; 195 display: inline-block; 196 color: white; 197 text-align: right; 198 width: 90%; 199 letter-spacing: 7px; 200} 201 202.view-btn { 203 margin: 0 auto; 204 display: block; 205 text-align: center; 206} 207 208.view-btn a { 209 background-color: rgb(255, 217, 0); 210 padding: 15px 70px; 211 border-radius: 30px; 212} 213 214.work-h3 h3 { 215width: 90%; 216margin: 0 auto; 217font-size: 70px; 218color: rgba(172, 170, 169, 0.411); 219padding-bottom: 30px; 220padding-top: 50px; 221margin: 0; 222letter-spacing: 10px; 223} 224 225.service h1 { 226 font-size: 60px; 227 width: 100%; 228 letter-spacing: 7px; 229 margin: 0; 230 padding: 30px 0 30px 0; 231} 232 233.service-body { 234 width: 80%; 235 margin: 0 auto; 236} 237 238.service-cont { 239 width: 100%; 240 margin: 0 auto; 241 padding: 0; 242 margin: 0; 243 height: 100%; 244} 245 246.ser-contents { 247 display: flex; 248 width: 100%; 249 margin-bottom: 0; 250} 251 252.service-content { 253 position: relative; 254 width: 100%; 255 margin: 0 auto; 256 font-size: 0; 257 display: flex; 258 -webkit-justify-content: center; 259 justify-content: center; 260 -webkit-align-items: center; 261 align-items: center; 262} 263 264.ser-img { 265 width: 100%; 266} 267 268.img-p { 269 position: absolute; 270 top: center; 271 left: center; 272 color: white; 273 font-size: 30px; 274 display: block; 275} 276 277.ser-h3 h3 { 278 font-size: 70px; 279 color: rgba(252, 242, 229, 0.486); 280 display: flex; 281 justify-content: flex-end; 282 width: 90%; 283 margin: 0; 284 padding: 30px 0 30px 0; 285 letter-spacing: 10px; 286} 287 288/*ホバー*/ 289.hover { 290 z-index: 1; 291 background-color: black;/*黒を重ねる*/ 292} 293 294.ser-img:hover { 295 opacity: 0.5;/*黒を透かす*/ 296 transition: all 0.3s ease-in-out; 297} 298 299.contact { 300 background-image: url(img/contact-bgi@2x.jpg); 301 width: 100%; 302 background-size: cover; 303 height: 100%; 304} 305 306.contact-form { 307 width: 80%; 308 margin: 0 auto; 309} 310 311.cont-h1 h1{ 312 color: white; 313 text-align: right; 314 width: 100%; 315 letter-spacing: 7px; 316 margin-bottom: 80px; 317 font-size: 60px; 318 padding-top: 80px; 319} 320 321.form-text { 322 text-align: center; 323} 324 325.form-text p { 326 color: white; 327 height: 50%; 328 margin-bottom: 50px; 329 font-size: 20px; 330} 331 332.form-text a { 333 background-color: rgb(255, 217, 0); 334 padding: 15px 70px; 335 border-radius: 30px; 336 margin: 100px; 337} 338 339.con-h3 h3 { 340 font-size: 70px; 341 color: rgba(172, 170, 169, 0.411); 342 padding-bottom: 100px; 343 padding-top: 50px; 344 width: 90%; 345 margin: 0 auto; 346 letter-spacing: 10px; 347} 348 349footer { 350 height: 50px; 351 bottom: 0; 352 margin: 0; 353 padding:0; 354} 355 356footer h4 { 357 text-align: center; 358 font-weight: normal; 359 font-size: 15px; 360 line-height: 40px; 361 margin: 0; 362 padding: 0; 363} 364
回答1件
0
ベストアンサー
提示のコードには、position: fixed; がありませんが、
css
1header { 2 display: flex; 3 justify-content: space-between; 4 height: 50px; 5 width: 100%; 6 position: fixed; 7 top: 0; 8}
上記のような感じで header を固定すると div.img に設定した背景画像の高さが変わるという現象のことでしょうか。
「マージンの相殺」という現象が起きていて、子要素のマージンが div.img の外側にはみ出しているのが原因です。
対処法としてはいろいろありますが、例えば、親要素に overflow: hidden; を追加すればいいでしょう。
css
1.top-title { 2 color: rgb(255, 250, 245); 3 margin: 0; 4 overflow: hidden; /* 追加 */ 5}
投稿2021/03/22 00:48
総合スコア34073
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/22 01:35