Q&A
「設定がすぐ下に」とはどういう状況でしょうか。そして完成イメージも提示してください。
また、提示コードだけではフッターしかないようですが、これだけで再現できますか？
トップの画像との関連性が不明です。
トップの画像を変更していたら、フッターで設定がすぐ下に表示されてしまうようになってしまいました。
一番下に戻す方法をご教授お願いします。
HHTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="description" content="********************************"> 6<link href="reset.css" rel="stylesheet" type="text/css" madia="screen"> 7<link href="style.css" rel="stylesheet" type="text/css" madia="screen"> 8<link rel="shortcut icon" href="/favicon.ico"> 9<meta name="viewport" content="width=device-width,initial-scale=1.0"> 10 <title>*************｜***********</title> 11 </head> 12 <body> 13 <header> 14 <div class="top"></div> 15 <div class="wapper"> 16 <a href="./"><img class="mainlogo" src="imges/ks_logo1.png" alt=""></a> 17 <a href="./"><img class="mainlogo2" src="imges/ks_logol2.png" alt=""></a> 18 </div> 19 </header> 20 <main> 21 <div class="topnav"> 22 <nav> 23 <ul> 24 <li><a href="./">HOME</a></li> 25 <li><a href="kaisyaannai.html">*****</a></li> 26 <li><a href="seihinsyoukai.html">*****</a></li> 27 <li><a href="otoiawase.html">*******</a></li> 28 </ul> 29 </nav> 30 </div> 31 <div class="topga"> 32 <br><br><br><br><br><br><br><br> 33 <p>TOP画</p> 34 </div> 35 <div class="topmongon"> 36 <h1><span class="aikya">**</span>、<span class="kyatti">**</span>、<span class="kya">**</span>**********。<br>*******************</h1> 37 <p><br><br><br>************************<br><br><br><br><br></p> 38 </div> 39 <div class="topics"> 40 <h2>**********</h2> 41 <p><br><br><br><br><br><br>**************<br><br><br><br><br></p> 42 </div> 43 <div class="meinsetumei"> 44 <h2 class="meinsyousai1">***********</h2> 45 <h2 class="meinsyousai"><span class="henkou">***********</span>で<span class="henkou2">************</span>***********、<br>******************。</h2> 46 </div> 47 <h2 class="topsyoukai">*********</h2> 48 <div class="henatuki"> 49 <ul class="syoukai"> 50 <li class="syouhin"><p><a href="seihinsyoukai.html">**********</a></p></li> 51 <li class="gazou"><img src="imges/IMG_0355-1.png"></li> 52 </ul> 53 <ul class="syoukai"> 54 <li class="syouhin2"><p><a href="seihinsyoukai.html">**********</a></p></li> 55 <li class="gazou"><img src="imges/IMG_0355-1.png"></li> 56 </ul> 57 <ul class="syoukai"> 58 <li class="syouhin3"><p><a href="seihinsyoukai.html">***********</a></p></li> 59 <li class="gazou"><img src="imges/IMG_0355-1.png"></li> 60 </ul> 61 </div> 62 </main> 63 64<footer> 65 <div class="sita"> 66 <img src="imges/ks_logol.png" alt=""> 67 </div> 68 <p class="adores">*************************</p> 69 <div class="itibansita"> 70 <p class="tel">TEL************ <span class="fax">FAX ********</span></p> 71 </div> 72 <p class="kopi">©*********** All rights reserved</p> 73 </footer> 74</body> 75</html>
CSS
1@charset "utf-8"; 2/* CSS Document */ 3html{ 4 font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Osaka,'ＭＳ Ｐゴシック',sans-serif 5} 6.top{ 7 margin-top:0; 8 padding-top:0; 9 border-top: solid 5px; 10 border-color: #32cd32; 11} 12.wapper{ 13 margin: 0 auto; 14 width: 960px; 15 max-width: 100%; 16} 17.logo{ 18 display: flex; 19 list-style-type: none; 20} 21.mainlogo{ 22 width:10%; 23 height: auto; 24 padding-right: 5px; 25 margin-bottom:20px; 26 margin-top:20px; 27} 28.mainlogo2{ 29 margin-left: 0; 30 width:50%; 31 height: auto; 32 margin-bottom:35px; 33 margin-top:0; 34 margin-left: 5px; 35} 36.topnav{ 37 margin: 0 auto; 38 background-color: #32cd32; 39 text-align: center; 40} 41.topnav ul{ 42 display: flex; 43 /* ↓一応いれます */ 44 justify-content: space-between; 45 list-style-type: none; 46 margin-left: auto; 47 margin-right: auto; 48 text-align: center; 49 width: 960px; 50 max-width: 100%; 51 font-size: 20px; 52 font-weight: bold; /*太字に*/ 53 color: #ffffff; 54} 55.topnav li { 56 width:25%; 57 text-align: center; 58 -webkit-box-sizing: border-box; 59 box-sizing: border-box; 60 /* ボーダー（左）入れます */ 61 border-left:1px solid #fff; 62} 63/* リストの最後だけ右にもボーダー*/ 64.topnav li:last-child { 65 border-right:1px solid #fff; 66} 67.topnav ul li a{ 68 text-decoration: none; 69 color: #ffffff; 70 text-align: center; 71 display:block; /* 追加 */ 72 padding:20px; /* 追加 */ 73} 74.topnav li:hover a{ 75 opacity:0.6; 76} 77.topga { 78 background-color: #afeeee; 79 height: 400px; 80 width:auto; 81 text-align: center; 82} 83.topmongon{ 84 margin: 0 auto; 85 width: 960px; 86 max-width: 100%; 87 line-height:1.4; 88} 89.topmongon h1{ 90 padding-top: 15px; 91 font-size: 28px; 92 border-bottom:solid 1px #b0c4de; 93 padding-bottom: 5px; 94 line-height:1.3; 95 margin: 0 auto; 96 width: 960px; 97 max-width: 100%; 98} 99.topmongon p{ 100 text-align: center; 101} 102.aikya{ 103 font-size:37px; 104 color: #32cd32; 105} 106.kyatti{ 107 font-size:37px; 108 color: #9932cc; 109} 110.kya{ 111 font-size: 37px; 112 color: #ff6347; 113} 114.meinsyousai1{ 115 padding-top:15px; 116} 117.meinsetumei h2{ 118 padding-bottom: 5px; 119 font-size: 28px; 120 margin: 0 auto; 121 width: 960px; 122 max-width: 100%; 123 line-height:1.4 124} 125.henkou{ 126 font-size:34px; 127 color: #32cd32; 128} 129.henkou2{ 130 font-size:34px; 131 color: #ff0000; 132} 133.meinsetumei p{ 134 text-align: center; 135} 136.zigyouannai{ 137 margin-bottom: 5px; 138 margin: 0 auto; 139 width: 960px; 140 max-width: 100%; 141} 142.zigyouannai h1{ 143 font-size: 35px; 144 margin: 0 auto; 145 width: 960px; 146 max-width: 100%; 147 margin-top:-15px; 148} 149.zigyouannai h2{ 150 padding-top: 10px; 151 margin: 0 auto; 152 width: 960px; 153 max-width: 100%; 154 font-size:25px; 155} 156.zigyouannai p{ 157 margin: 0 auto; 158 width: 960px; 159 padding-left: 20px; 160 max-width: 100%; 161 font-size: 22px; 162 margin-top:15px; 163} 164.zigyouannai img{ 165 padding-top: 10px; 166 height: 700px; 167 width: auto; 168 text-align: center; 169} 170.setumei02 h2{ 171 font-size: 20px; 172 text-align: center; 173 margin: 0 auto; 174 width: 960px; 175 max-width: 100%; 176} 177.setumei02 p{ 178 text-align: center; 179 margin: 0 auto; 180 width: 960px; 181 max-width: 100%; 182} 183/*teble*/ 184.table-wrapper{ 185 padding-bottom: 30px; 186} 187.teble-midasi{ 188 opacity:0; 189} 190.kaisya-annai{ 191 margin: 0 auto; 192 width: 960px; 193 max-width: 100%; 194} 195.topsetumei{ 196 margin-top:50px; 197} 198h2{ 199 margin-top: 20px; 200 margin-bottom:15px; 201 font-size: 18px; 202} 203.gaiyou{ 204 margin-left: auto; 205 margin-right:auto; 206 margin: 0 auto; 207 width: 960px; 208 max-width: 100%; 209 border: solid 1px #90ee90; 210} 211.gaiyou th{ 212 background: #90ee90; 213 white-space: nowrap; 214 padding:20px 10px; 215 border: solid 1px #90ee90; 216} 217.gaiyou td{ 218 padding:20px 10px; 219 vertical-align:middle; 220 border: solid 1px #90ee90; 221} 222.iti{ 223 background-color: #32cd32; 224 text-align: center; 225} 226.torihikisaki{ 227 list-style-type:none; 228} 229.topics h2{ 230 padding-top: 10px; 231 padding-bottom: 8px; 232 padding-left: 0.2em; 233 color: #ffffff; 234 font-size:25px; 235 border-bottom: solid 1px #b0c4de; 236 background-color: #32cd32; 237 margin: 0 auto; 238 width: 960px; 239 max-width: 100%; 240} 241.topics p{ 242 border-right: solid 1px #b0c4de; 243 border-left: solid 1px #b0c4de; 244 border-bottom: solid 1px #b0c4de; 245 margin: 0 auto; 246 width: 960px; 247 max-width: 100%; 248 text-align: center; 249} 250.henatuki{ 251 margin: 0 auto; 252 width: 960px; 253 max-width: 100%; 254 display: flex; 255} 256.topsyoukai{ 257 font-size:28px; 258 margin: 0 auto; 259 width: 960px; 260 max-width: 100%; 261 padding-top: 30px; 262 border-bottom: solid 1px #dcdcdc; 263} 264.syoukai{ 265 display: flex; 266 margin-top: 50px; 267 list-style-type: none; 268 margin-left: auto; 269 margin-right: auto; 270 align-items: center; 271} 272.syouhin{ 273 text-decoration: none; 274 color: #32cd32; 275 margin-left: 10px; 276 margin-right: 10px; 277 width: 80px; 278} 279.syouhin2{ 280 text-decoration: none; 281 color: #32cd32; 282 margin-right: 15px; 283 margin-left: 60px; 284 width: 80px; 285} 286.syouhin3{ 287 text-decoration: none; 288 color: #32cd32; 289 margin-right: 15px; 290 margin-left: 80px; 291 width: 80px; 292 293} 294.gazou{ 295 width: 50px; 296 height: auto; 297 padding-right:15px; 298} 299footer{ 300 position: absolute; 301 margin-top: 80px; 302 background-color:#e0ffff; 303 width: 100%; 304 height: 150px; 305 bottom: 0; 306} 307.sita{ 308 margin: 0 auto; 309 width: 960px; 310 max-width: 100%; 311 padding-top: 20px; 312 text-align: center; 313} 314.sita img{ 315 margin: 0 auto; 316 width: 960px; 317 max-width: 100%; 318 width: 50%; 319 margin-left: auto; 320 margin-right: auto; 321} 322.itibansita { 323 text-align: center; 324 margin: 0 auto; 325 width: 960px; 326 max-width: 100%; 327 bottom: 10px; 328} 329.itibansita p{ 330 text-align: center; 331 margin: 0 auto; 332 width: 960px; 333 max-width: 100%; 334 padding-top: 10px; 335} 336.adores{ 337 text-align: center; 338 margin: 0 auto; 339 width: 960px; 340 max-width: 100%; 341 font-size: 18px; 342 margn-top:10px; 343} 344.tel{ 345 color: #ff7f50; 346 font-size: 23px; 347 font-weight:bold; 348 padding-top:1px; 349 padding-bottom: 15px; 350} 351.fax{ 352 color: #32cd32; 353 font-size: 23px; 354 font-weight:bold; 355} 356.kopi{ 357 text-align: center; 358 margin:0 auto; 359 width: 960px; 360 position: absolute; 361 bottom: 0; 362 right:0; 363 left: 0; 364 font-size: 18px; 365 padding-top: 20px; 366}
回答2件
0
ベストアンサー
footer（とその中に入っている.kopi）をpositionで絶対配置したい理由がさっぱりわからず。。
もしかしたら純粋にブロック要素として<main>の下に来るだけで良いのでは？と推測してみました。
コメントアウトしている部分が削除箇所です。
CSS
1footer{ 2 /*position: absolute;*/ 3 margin-top: 80px; 4 background-color:#e0ffff; 5 width: 100%; 6 height: 150px; 7 /*bottom: 0;*/ 8} 9.kopi{ 10 text-align: center; 11 margin:0 auto; 12 width: 960px; 13 /*position: absolute;*/ 14 /*bottom: 0;*/ 15 /*right:0;*/ 16 /*left: 0;*/ 17 font-size: 18px; 18 padding-top: 20px; 19}
HTMLについては、</body> が<footer></footer>よりも前で閉じてしまっているので、</footer>の後（</html>の手前）に移動させましょう。
投稿2021/03/04 07:34
総合スコア272
ご回答ありがとうございます。
変更しましたが、一番下に移動しません。
どこがわるいのでしょうか？
回答に記述した箇所をコメントアウトするとこうなりました。
https://codepen.io/marui_ol/pen/jOVKjoK
同じ様にしてみましたが、はやり画面の中央に表示されてしまいます。
resetCSSの問題でしょうか？
今日朝までは問題なく表示されていたので可能性は薄いと思っているのですが。
一番下に移動しましたが、コピーライト表記が消えてしまいます。
なぜでしょうか？
.kopi がまだ absolute でどこかに浮いてるんじゃないですかね。
.kopi の CSSもいらないとこ消してみてください。
.kopi{
text-align: center;
margin:0 auto;
width: 960px;
/*position: absolute;*/ ←いらない
/*bottom: 0;*/ ←いらない
/*right:0;*/ ←いらない
/*left: 0;*/ ←いらない
font-size: 18px;
padding-top: 20px;
}
ちなみに、さっきの「同じ様にしてみましたが、はやり画面の中央に表示されてしまいます。」は何だったんでしょう？
font-size: 18px;
padding-top: 20px;まで適用外にしたらコピーライトが表示されるようになりました。
この動作はおかしいですか？
.kopiのフォントサイズが18pxじゃなくても良くて、padding-topも20pxじゃなくて良いなら、良いのではないでしょうか。
あー過去の質問内容を見て、絶対配置の理由がわかりました。
https://teratail.com/questions/323627
.kopiをfooterの下部に固定したくて（？）、元々はfooterにrelative、.kopiにabosoluteかけてたんですね。
で、amiya-seさんの回答を見て、footerをabsoluteにしたからfooterごと浮いた、と。
経緯なんとなく把握しました。
結果的にhatena19 さんの回答内容を打ち消すような回答になってしまって申し訳ない。。
absoluteは「浮かせて絶対配置」するので、次の要素が意図しない位置に回り込んできたり…とトラブルが起きやすいです。質問者さんの側でも、仕様を理解したうえで使っていくと良いと思います。
まずは「ブロック要素を縦に積む」「要素がブロックかインラインか意識する」「横並びにしたい場合はflexやgridで」という形で大まかなレイアウトを作っていくのが一番シンプルです。
0
この回答は不適当です。
掲載コードがフッターに関する部分のみだった時に、
見えているコードから推察したものになります。
以下の文言は参考になりませんのでご注意ください。
footerにbottom:0;付けているから、
「画面下部に絶対配置したいのでは？」と思うのだけど、
relativeにした理由が何かあるのかなぁ？
css
1footer{ 2 //position: relative; 3 position: absolute; 4 5 bottom: 0; 6}
これで直ればおめでとう、かな。
投稿2021/03/04 02:40
編集2021/03/04 13:07
退会済みユーザー
総合スコア0
グローバルナビゲーションの下にはきましたが、一番下に戻りません。
どこが悪いんでしょう？
すみません、めっちゃ真面目に仕事したり、家事していました。
嫁様が帰宅したら一緒に飯なので、その後に拝見させていただきます。
footer {
position: absolute;
margin-top: 80px;
background-color: #e0ffff;
width: 100%;
height: 150px;
/* bottom: 0; */
}
こうしたら一応下に行きました。
帰ってきちゃったんで後でもう一度見ますね。
問題が解決できるようにお答えできず、すみませんでした。
他の方とのやりとりで解決されたようで安心いたしました。
検索で来られる方の迷惑にならないように回答を編集しておきます。
あなたの回答
tips
プレビュー
