実現したいこと
PC用とSP用のheaderとmainの間に余白があるので無くしたい
発生している問題・分からないこと
headerとmainの間に余白がある
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta name="description" content="京都の創作料理"> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="style.css"> 8 <title>京都の創作料理</title> 9 </head> 10 11 <body> 12 <!-- ヘッダー --> 13 <header> 14 <div id="text"> 15 <img src="img/mainvisual-pc.jpg"> 16 <div id="text-1"> 17 <nav class="menu"> 18 <p class="text-1">お知らせ</p> 19 <p class="text-1">商品のご紹介</p> 20 <p class="text-1">店舗のご案内</p> 21 </nav> 22 <h1 class="text-1">創作</h1> 23 </div> 24 <a class="text-2" href="index.html">オンラインストアを見る</a> 25 </div> 26 </header> 27 <!-- メイン --> 28 <main> 29 <div id="text-3"> 30 <p class="text-3">お知らせ</p> 31 <div id="text-4"> 32 <p><span class="text-4">2024.00.00<br>テキストテキスト</span></p> 33 <p><span class="text-4">2024.00.00<br>テキストテキスト</span></p> 34 <p><span class="text-4">2024.00.00<br>テキストテキスト</span></p> 35 <p><span class="text-4">2024.00.00<br>テキストテキスト</span></p> 36 <p><span class="text-4">2024.00.00<br>テキストテキスト</span></p> 37 </div> 38 </div> 39 </div> 40 <div id="text-6"> 41 <div class="text-10"> 42 <p class="text-6">新しい価値の創造</p> 43 <img class="img-1" src="img/products1.jpg"> 44 </div> 45 <p class="text-7">テキストテキスト<br>テキストテキスト</p> 46 </div> 47 <div id="text-8"> 48 <div class="text-11"> 49 <p class="text-9">科学と技術の調和</p> 50 <img class="img-2" src="img/products2.jpg"> 51 </div> 52 <p class="text-12">テキストテキスト<br>テキストテキスト</p> 53 </div> 54 </main> 55 <!-- フッター --> 56 <footer> 57 <iframe 58 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3267.7862945114157!2d135.76534951061075!3d35.012054366331135!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6001088d901efcc1%3A0x3a3362a1bd150594!2z5Lqs6YO95biC5b255omA!5e0!3m2!1sja!2sjp!4v1717659037773!5m2!1sja!2sjp" 59 width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"> 60 </iframe> 61 <div id="text-13"> 62 <h2>創作</h2> 63 <div id="text-15"> 64 <p class="text-13">〒604-0925 京都府京都市中京区</p> 65 <p class="text-13">電話番号:075-222-3111</p> 66 </div> 67 <div id="text-16"> 68 <p class="text-14">お知らせ</p> 69 <p class="text-14">商品のご紹介</p> 70 <p class="text-14">店舗のご案内</p> 71 </div> 72 <p class="text-16">©SOUSAKU</p> 73 <a class="text-17" href="index.html">オンラインストアを見る</a> 74 </div> 75 </footer> 76 </body> 77</html>
CSS
1* {2 margin: 0;3 padding: 0;4 box-sizing: border-box;5}6 7html, body {8 width: 100%;9 margin: 0;10 padding: 0;11 overflow-x: hidden;12}13 14header, main {15 width: 100%;16 margin: 0;17 padding: 0;18 display: block; /* 確実に適用 */19}20 21.text-1,.text-2,.text-3,.text-4,.text-5,.text-6,.text-9,.text-13,.text-14,h2,.text-17{22 writing-mode: vertical-rl;23 text-orientation: upright;24}25 26#text {27 width: 100%;28 position: relative;29}30 31#text img {32 width: 100%;33}34 35#text-1 {36 position: absolute;37 top: 10px;38 right: 20px;39 display: flex;40 align-items: flex-start;41 color: white;42}43 44h1,.text-1 {45 margin-right: 40px; /* 適当に調整可能 */46 margin-top:20px;47}48 49.menu {50 display: flex;51 flex-direction: row; /* 横並びに表示 */52 gap: 1px; /* 要素間の余白、適宜調整可能 */53}54 55 56.text-2{57 position: absolute;58 left:50px;59 bottom:50px;60 border: solid 2px white;61 padding: 30px 18px;62 background-color:gray;63 color:white;64 text-decoration: none;65}66 67/* メイン */68main {69 background-color: beige;70 text-align: center; /* テキストを中央揃えにする */71 width: 100%; /* 必要に応じて幅を調整 */72}73 74#text-3{75 position: relative;76 display: flex;77 justify-content: center; /* 水平方向に中央揃え */78 text-align: center; 79 padding: 100px ;80}81 82.text-3{83 font-size:35px;84 position: absolute;85 top:50px;86 right:150px;87}88 89#text-4{90 display: flex;91 flex-direction: row; /* 横方向に表示 */92 flex-wrap: nowrap; /* 折り返さないようにする */93 justify-content: center; /* 中央揃え */94}95 96.text-4{97 margin:20px;98 border: solid 1px black;99 padding:20px;100 border-top:0px;101 border-bottom:0px;102}103 104 105#text-6{106 width: 100%;107 position: relative;108}109 110.text-6{111 position: absolute;112 top:0px;113 right:100px;114 font-size:20px;115}116 117#text-6 img{118 width: 50%;119 height:30%;120 margin-top:50px;121 margin-left:300px;122}123 124 125.text-7{126 position: absolute;127 bottom:10px;128 left:280px;129 background-color:lightcoral;130 opacity: 0.9;131 padding: 60px 70px;132 color:white;133}134 135#text-8{136 position: relative;137 width: 100%;138}139 140.img-2{141 width:50%;142 margin:150px 50px 100px auto;143}144 145.text-9 {146 font-size: 20px;147 position: absolute; /* 追加 */148 top:50px;149 left: 210px; /* 左からの位置を調整 */150}151 152 153.text-12{154 position: absolute;155 bottom:100px;156 right:160px;157 background-color:red;158 opacity: 0.5;159 padding: 60px 70px;160 color:white;161}162 163iframe {164 width:100%;165}166 167#text-13{168 position: relative;169 background-color: black;170 width:100%;171 height:600px;172}173 174h2{175 position: absolute;176 top:60px;177 right:30px;178 color:white;179}180 181.text-13,.text-14{182 color:white;183 font-size:15px;184}185 186#text-15{187 position: absolute;188 top:60px;189 right:100px;190}191 192#text-16{193 position: absolute;194 top:60px;195 right:200px;196}197 198.text-13,.text-14{199 display: inline;200 padding:0px;201 vertical-align: top; /* 上揃えに変更 */202}203 204.text-16{205 position: absolute;206 bottom: 0;207 left: 0;208 right: 0;209 margin:auto;210 color:white;211 text-align: center; /* 文字を中央揃えにする */212}213 214.text-17{215 position: absolute;216 left:50px;217 bottom:50px;218 border: solid 2px white;219 padding: 30px 18px;220 background-color:gray;221 color:white;222 text-decoration: none;223}224 225 226@media screen and (max-width: 767px){227 228 body, html,header,main,iframe {229 margin: 0;230 padding: 0;231 width: 100%;232 overflow-x: hidden;233 }234 235 header, main {236 width: 100%;237 margin: 0;238 padding: 0;239 }240 241 /* ヘッダー */242 #text img {243 content: url('img/mainvisual-sp.jpg'); /* スマホ用の画像のパスに変更 */244 }245 246 header h1 {247 font-size: 24px; /* 任意のフォントサイズ */248 margin-right: 10px; /* 適切なマージンに調整 */249 }250 251 .text-1 {252 margin-right: 1px; /* 適切なマージンに調整 */253 margin-left:10px;254 }255 256 .text-2{257 font-size:13px;258 padding: 15px;259 }260 261 /* メイン */262 #text-3{263 position: relative;264 }265 266 .text-3{267 font-size:25px;268 position: absolute;269 top:50px;270 right:50px;271 }272 273 274#text-4 p:nth-of-type(n+4) {275display: none;276}277 278#text-4 {279 display: flex;280 flex-direction: row; /* 横方向に表示 */281 flex-wrap: nowrap; /* 折り返さないようにする */282 justify-content: center; /* 中央揃え */283}284 285 .text-4{286 display: flex;287 margin-top:100px;288 }289 290 /* 新しい */291 292#text-6{293 position: relative;294 margin-top:-50px;295}296 297.text-6{298 position: absolute;299 top:20px;300 right:10px;301}302 303#text-6 .img-1{304 margin:50px 100px 30px 50px;305 width:300px;306}307 308.text-7{309 position: absolute;310 bottom: 30px;311 left: 1px; 312 padding: 5px 5px;313}314 315/* 科学と */316#text-8{317 position: relative;318 margin-bottom:20px;319}320 321.text-9{322 position: absolute;323 top:50px;324 left:5px;325}326 327.img-2{328 margin:50px 20px 50px 20px;329 width:300px;330}331 332 333/* フッター */334 335#text-13{336 position: relative;337 width:100%;338 height:500px;339}340 341.text-12{342 position: absolute;343 bottom: 50px;344 right: 1px; 345 padding:5px 5px;346}347 348h2,.text-13,.text-14{349 font-size:15px;350}351 352.text-14{353 margin:auto 20px;354}355 356.text-17{357 position: absolute;358 left:30px;359 bottom:50px;360 border: solid 2px white;361 padding: 10px 10px;362 background-color:gray;363 color:white;364 text-decoration: none;365}366 367}
試したこと・調べたこと
上記の詳細・結果
pcとspの両方に body, html,header,main,iframe {
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
}
header, main { width: 100%; margin: 0; padding: 0; }
などのリセットをしたが余白がなくならない
補足
特になし
0 コメント