header ads

headerとfooterをばらけさせたい

2月 05, 2024

実現したいこと

ヘッダーとフッターが重なることなく存在するようにしたい。

発生している問題・分からないこと

これまで作っていたトップページからコピーして個別ページを作成しようとしています。
その際にヘッダーとフッターが重なってしまってどうやって分けたらいいのか知りたいです。

該当のソースコード

HTML

1<body> 2 <div class="mainMenu" id="js-headFixed"> 3 <h1><a href="" class="text-font">GENSEN</a><span><a href="" class="text-font">全国おすすめ温泉・温泉宿情報サイト</a></span></h1> 4 <nav> 5 <li> 6 <p class="mainMenuList">AREA</p> 7 <ul class="subMenuNav"> 8 <li><a href="">北海道</a></li> 9 <li><a href="">東北</a></li> 10 <li><a href="">甲信越・北陸</a></li> 11 </ul> 12 </li> 13 <li> 14 <p class="mainMenuList">CATEGORY</p> 15 <ul class="subMenuNav"> 16 <li><a href="">家族風呂</a></li> 17 <li><a href="">露天風呂</a></li> 18 <li><a href="">源泉かけ流し</a></li> 19 </ul> 20 </li> 21 <li> 22 <p class="mainMenuList">SPECIAL</p> 23 <ul class="subMenuNav"> 24 <li><a href="">人気の温泉特集</a></li> 25 <li><a href="">露天風呂特集</a></li> 26 <li><a href="">絶品グルメ特集</a></li> 27 </ul> 28 </li> 29 <li> 30 <p class="mainMenuList">BLOG</p> 31 <ul class="subMenuNav"> 32 <li><a href="">通常ブログ</a></li> 33 <li><a href="">アーカイブページ</a></li> 34 <li><a href="">お知らせ一覧ページ</a></li> 35 </ul> 36 </li> 37 <li><a class="mainMenuList" href="">CONTACT</a></li> 38 </nav> 39 </div> 40 <footer> 41 <div class="footer-topFlex"> 42 <div class="footer-topFall"> 43 <img src="/image/footer/footer-fall.jpeg" alt=""> 44 </div> 45 <div class="footer-topLink"> 46 <ul> 47 <li><a href="">お知らせ</a></li> 48 <li><a href="">特集一覧</a></li> 49 <li><a href="">よくある質問</a></li> 50 <li><a href="">お問い合わせ</a></li> 51 <li><a href="">運営会社</a></li> 52 <li><a href="">公式ブログ</a></li> 53 <li><a href="">利用規約</a></li> 54 </ul> 55 </div> 56 <div class="footer-topArea"> 57 <ul> 58 <li><a href="">エリア一覧</a></li> 59 <li><a href="">北海道</a></li> 60 <li><a href="">東北</a></li> 61 <li><a href="">関東</a></li> 62 <li><a href="">北陸・甲信越</a></li> 63 <li><a href="">東海</a></li> 64 <li><a href="">近畿</a></li> 65 <li><a href="">中国・四国</a></li> 66 <li><a href="">九州・沖縄</a></li> 67 </ul> 68 </div> 69 <div class="footer-topEpicContainer"> 70 <div class="footer-topEpicBox"> 71 <a href="#" class="footer-topEpic"> 72 <img src="/image/footer/footer-lump.jpeg" alt=""> 73 <div class="footer-topEpicText text-font">全国人気の温泉宿特集</div> 74 </a> 75 <a href="#" class="footer-topEpic"> 76 <img src="/image/footer/footer-food.jpeg" alt=""> 77 <div class="footer-topEpicText text-font">高級温泉宿の美味特集</div> 78 </a> 79 </div> 80 </div> 81 </div> 82 <div class="footer-bottom"> 83 <div class="footer-bottomFlex"> 84 <ul> 85 <li><a href=""><i class="fa-brands fa-x-twitter"></i></a></li> 86 <li><a href=""><i class="fa-brands fa-facebook-f"></i></a></li> 87 <li><a href=""><i class="fa-brands fa-instagram"></i></a></li> 88 <li><a href=""><i class="fa-brands fa-tiktok"></i></a></li> 89 </ul> 90 <div class="footer-bottomLink"> 91 <h2><a class="text-font" href="">GENSEN</a></h2> 92 <div class="footer-bottomLinkText"> 93 <a href="">プライバシーポリシー</a> 94 <a href="">会社概要</a> 95 <a href="">運営について</a> 96 <a href="">お問い合わせ</a> 97 </div> 98 </div> 99 <div class="footer-bottomCopy"> 100 <p>Copyright<span>&copy;</span><a href="">GENSEN(tcd050)</a>.All Rights Reserved.</p> 101 </div> 102 </div> 103 </div> 104 </footer> 105 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script> 106 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script> 107 <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> 108 <script src="/js/index.js"></script> 109</body> 110</html>

css

1.mainMenu{2 height: 60px;3 width: 100%;4 z-index: 3;5 background-color: rgba(0,0,0,0);6 position: absolute;7 top: 0;8 left: 0;9 display: flex;10 justify-content: space-between;11 border-bottom: 1px solid rgba(255,255,255,0.4); 12 h1{13 padding-left: 4em;14 display: flex;15 margin: 0;16 align-items: center; 17 a{18 font-size: 1.6em;19 text-decoration: none;20 color: $white_fff;21 }22 span{23 display: block;24 display: inline-block;25 align-items: center;26 height: 100%; 27 a{28 display: flex;29 align-items: center;30 font-size: 0.8em;31 height: 100%;32 text-decoration: none;33 margin-left: 1.3em;34 }35 }36 }37 nav{38 padding-right: 8em;39 display: flex;40 align-items: center;41 position: relative; 42 li{43 position: relative;44 list-style: none;45 height: 100%;46 display: flex;47 align-items: center; 48 .mainMenuList{49 cursor: pointer;50 height: 100%;51 display: flex;52 align-items: center;53 text-decoration: none;54 color: $white_fff;55 font-size: 1.4em;56 margin-left: 2.5em; 57 &:hover + .subMenuNav,58 .subMenuNav:hover {59 width: 200px;60 }61 }62 .subMenuNav{63 margin-top: 0;64 width: 0px;65 top: 60px;66 left: 0px;67 z-index: 4;68 padding-left: 0;69 margin-bottom: 0;70 position: absolute;71 overflow: hidden; 72 &:hover{73 width: 200px;74 }75 li{76 width: 100%;77 display: block;78 padding: 1em 2em;79 color: $white_fff;80 font-size: 1.4em;81 background-color: $light_brown;82 box-sizing: border-box;83 transition: all 0.4s ease; 84 &:hover{85 width: 200px; 86 }87 a{88 display: block;89 color: $white_fff;90 font-size: 1em;91 text-decoration: none;92 }93 }94 }95 }96 }97}98footer{99 padding: 4em 12em;100 background-color: $footer_back; 101 .footer-topFlex{102 padding-bottom: 4em;103 display: flex;104 justify-content: space-between;105 border-bottom: 1px solid $footer_border; 106 .footer-topLink{107 ul{108 li{109 margin-bottom: 1em; 110 a{111 color: $white_fff;112 text-decoration: none;113 font-size: 1.2em; 114 &:hover{115 color: $link_hover;116 }117 }118 }119 }120 }121 .footer-topArea{122 ul{123 li{124 margin-bottom: 1em; 125 a{126 color: $white_fff;127 text-decoration: none;128 font-size: 1.2em; 129 &:hover{130 color: $link_hover;131 }132 }133 }134 }135 }136 .footer-topEpicContainer{137 .footer-topEpicBox{138 .footer-topEpic{139 display: block;140 position: relative;141 margin-bottom: 2em; 142 img{143 width: 100%;144 height: auto;145 transition: opacity 0.4s;146 }147 &:hover{148 img{149 opacity: 0.5;150 151 }152 }153 }154 .footer-topEpicText{155 top: 50%;156 left: 50%;157 transform: translate(-50%,-50%);158 margin-top: 0;159 margin-bottom: 0;160 position: absolute;161 color: $white_fff;162 font-size: 2.4em;163 width: 100%;164 text-align: center;165 font-weight: 500;166 z-index: 3; 167 &:hover{168 color: $white_fff;169 }170 }171 }172 }173 }174 .footer-bottom{175 padding-top: 3em; 176 .footer-bottomFlex{177 display: flex;178 justify-content: space-between; 179 ul{180 flex: 1;181 height: auto;182 align-items: center;183 padding-left: 0;184 display: flex; 185 li{186 margin-right: 1.2em;187 display: flex;188 justify-content: center; 189 a{190 i{191 color: $white_fff;192 font-size: 1.8em;193 }194 }195 }196 }197 .footer-bottomLink{198 flex: 1.5; 199 h2{200 a{201 text-align: center;202 text-decoration: none;203 font-size: 2.4em;204 color: $white_fff;205 display: flex;206 justify-content: center;207 }208 }209 .footer-bottomLinkText{210 text-align: center;211 margin-top: 2em; 212 a{213 color: $white_fff;214 text-decoration: none;215 font-size: 1.4em;216 margin-right: 1em;217 position: relative; 218 &:not(:last-child)::before{219 content: "";220 right: -0.7em;221 display: inline-block;222 width: 1px;223 height: 100%;224 position: absolute;225 background-color: $white_fff;226 top: 0;227 }228 }229 }230 }231 .footer-bottomCopy{232 flex: 1;233 display: flex;234 width: 100%;235 justify-content: right;236 align-items: center; 237 p{238 color: $white_fff;239 font-size: 12px;240 display: flex;241 align-items: center; 242 span{243 padding-right: 0.4em;244 padding-left: 0.4em;245 font-size: 1.2em;246 }247 a{248 color: $white_fff;249 margin-right: 0.4em; 250 &:hover{251 color: $link_hover;252 }253 }254 }255 }256 }257 }258}

試したこと・調べたこと

上記の詳細・結果
  • リストfooterにmarginをつけてしまうとheader部分が隠れて消えてしまう
  • z-indexの問題でもなさそう。

片方を大きくしたり数を合わせるなど変更をしてみたがうまくいかない

  • 元々トップページのheaderがswiperの中に入っているものなので個別ページに反応しない？
hsmw

hsmw

コメントを投稿

0 コメント