実現したいこと
作成中webページについて、スクロールできるようにしたい。
前提
html、Javascript、Scssでwebページを作成しています。
発生している問題・エラーメッセージ
タイトルの通り
### 該当のソースコード ```html <!DOCTYPE html> <html lang="ja"> <head> <meta name="robots" content="noindex,nofollow" /> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="format-detection" content="telephone=no" /> <!-- meta情報 --> <title>ExciteCode</title> <!-- css 、JavaScript 読込リンク省略--> </head> <body> <header class="header"> <header class="header js-header"> <div class="header__inner"> <h1 class="header__name"><img class="header__logo" src="/images/icon.svg" alt="header logo"></h1> <nav class="header__nav md-none"> <ul class="header__items"> <li class="header__item"> <a href="#about" class="header__link">About</a> </li> <li class="header__item"> <a href="#service" class="header__link">Service</a> </li> <li class="header__item"> <a href="#news" class="header__link">News</a> </li> <li class="header__item"> <a href="#FAQ" class="header__link">FAQ</a> </li> <li class="header__item"> <a href="#contact" class="header__link header__link--contact">Contact</a> </li> </ul> </nav> </div> <div class="hamburger js-hamburger md-show"> <span></span> <span></span> <span></span> </div> <div class="drawer-menu js-drawer"> <div class="drawer-menu__inner"> <div class="drawer-menu__items"> <li class="drawer-menu__item"> <a href="#about" class="drawer-menu__link">About</a> </li> <li class="drawer-menu__item"> <a href="#service" class="drawer-menu__link">Service</a> </li> <li class="drawer-menu__item"> <a href="#news" class="drawer-menu__link">News</a> </li> <li class="drawer-menu__item"> <a href="#FAQ" class="drawer-menu__link">FAQ</a> </li> </li> <li class="drawer-menu__item"> <a href="#contact" class="drawer-menu__link drawer-menu__link--contact">Contact</a> </li> </div> </div> </div> </div> </header> <main> <!-- main view --> <div class="mv"> <div class="mv__inner"> <div class="mv__slider swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <picture> <source srcset="/images/fv-bgi1.jpg" media="(min-width:1024px)"> <img src="images/fv-sp-bgi1.jpg" alt=""> </picture> </div> <div class="swiper-slide"> <picture> <source srcset="/images/fv-bgi2.jpg" media="(min-width:1024px)"> <img src="images/fv-sp-bgi2.jpg" alt=""> </picture> </div> <div class="swiper-slide"> <picture> <source srcset="/images/fv-bgi3.jpg" media="(min-width:1024px)"> <img src="images/fv-sp-bgi3.jpg" alt=""> </picture> </div> </div> <div class="mv__title-wrap"> <img class="mv__logo" src="images/logo.svg" alt="main view logo"> <p class="mv__title"> <span class="mv__title-large">挑</span>戦する。<br class="md-show"> <span class="mv__title-strong">自</span>分を超える。 </p> </div> </div> </div> </div> <!-- about --> <section id="about" class="about"> <div class="about__inner inner"> <div class="about__body"> <div class="about__title section-title"> <h2 class="section-title__main">About</h2> <p class="section-title__sub">わ...て</p> </div> <p class="about__sub-title text--large">変化を恐れないで<br>挑戦し..添う。</p> <p class="about__text text">わたしたちは、...ます。</p> </div> <img src="images/about.jpg" alt="" class="about__img md-none"> </div> </section> </main> <footer class="footer"> </footer> </body> </html>
Scss
12//header3 4.header{5 position: fixed;6 z-index: 1000;7 top: 0;8 left: 0;9 height: 75px;10 border-color: transparent;11 width: 100%12}13 14.header__inner{15 display: flex;16 align-items: center;17 height: inherit;18 padding-left: 22px;19}20 21.header__name{22 margin-right: auto;23}24 25.header__logo{26 @include mq("lg"){27 width: 132px;28 }29 30}31 32.header__nav{33 height: inherit;34}35.header__items{36 display: flex;37 align-items: center;38 height: inherit;39}40 41.header__item{42 height: inherit;43 44 45}46.header__item:not(:first-child){47 padding-left: 70px;48}49 50.header__link{51 font-size: 16px;52 font-weight: $medium;53 display: flex;54 align-items: center;55 justify-content: center;56 height: inherit;57 color:$black;58}59 60.header__link--contact{61 padding: 0 24px;62 color: $white;63 background-color: $red2;64 transition: background-color 0.3s;65 &:hover{66 opacity: 1;67 background-color: $red;68 }69}70 71 72//hamburger73 74.hamburger{75 position:fixed;76 z-index: 9999;77 top: 30px;78 right: 15px;79 width: 25px;80 height: 25px;81 cursor:pointer;82}83 84.hamburger.is-active{85 top: 32px;86 right: 20px;87 88}89 90.hamburger span{91 position: absolute;92 left: 0;93 display: inline-block;94 width: 100%;95 height: 2px;96 background-color:$black;97 transition:transform 0.3s ,background-color 0.3s;98 99}100 101.hamburger.is-active span{102 background-color:$white;103}104 105.hamburger span:nth-child(1){106 top: 0;107}108 109.hamburger span:nth-child(2){110 top: 8px;111 transition: opacity 0.3s;112}113 114.hamburger span:nth-child(3){115 top: 16px;116}117 118.hamburger.is-active span:nth-child(1){119 top: 15px;120 transform:rotate(-45deg);121}122 123.hamburger.is-active span:nth-child(2){124 opacity: 0;125}126 127.hamburger.is-active span:nth-child(3){128 top: 15px;129 transform:rotate(45deg);130}131 132//drawer133 134.drawer-menu{135 position: absolute;136 z-index: 5000;137 top: 0;138 left: 0;139 display: none;140 width: 100%;141 height: 100vh;142 background-color: $blue2;143 144}145.drawer-menu__inner{146 display: flex;147 align-items: center;148 justify-content: center;149 width: 100%;150 height: inherit;151}152 153.drawer-menu__items{154 display: flex;155 align-items: center;156 justify-content: center;157 flex-direction: column;158}159 160.drawer-menu__item{161 display: inline-block;162 163}164 165.drawer-menu__item:not(:first-child){166 margin-top: 25px;167}168 169.drawer-menu__link{170 font-size: 16px;171 font-weight: $medium;172 display: inline-block;173 padding-bottom: 25px;174 text-align: center;175 letter-spacing: 0.05em;176 color:$white;177 border-bottom: 1px solid $gray2;178 width: 200px;179 180}181 182.drawer-menu__link--contact{183padding: 14px 14px;184transform: background-color 0.3s;185border: none;186background-color: $red;187&:hover{188 background-color: $red2;189 opacity: 1;190}191}192 193//main view194 195.mv{196 width: 100%;197 height: 100vh;198}199 200.mv__inner{201 position:relative;202 width: 100%;203 height: inherit;204 205}206 207.mv__slider, 208.swiper-slide picture, 209.swiper-slide source, 210.swiper-slide img{211 height: inherit;212}213 214.swiper-slide img{215 object-fit: cover;216}217 218.mv__title-wrap{219 position: absolute;220 z-index: 10;221 top: 50%;222 left: 50%;223 transform: translate(-50%,-50%);224 width: 100%;225}226 227.mv__logo{228 width: 244px;229 height: auto;230 margin: 0 auto;231 @include mq("lg"){232 width: 205px;233 }234}235 236.mv__title{237 font-size: 42px;238 font-weight: $medium;239 color: $white;240 text-align: center;241 margin-top: 20px;242 @include mq("lg"){243 font-size: 30px;244 line-height: 1.1;245 letter-spacing: 0.05em;246 }247}248 249.mv__title-large, 250.mv__title-strong{251 font-size: 60px;252 @include mq("lg"){253 font-size: 38px;254 }255}256.mv__title-large{257 color: $red;258}259 260.mv__title-strong{261 color: $green;262}263 264 265//about266.about{267padding: 100px 0;268@include mq("md"){269padding-top: 105px;270}271}272.about__inner{273display: flex;274align-items: flex-start;275}276 277.about__sub-title{278 margin-top: 30px;279 @include mq("md"){280 margin-top: 26px;281 }282}283 284.about__text{285 margin-top: 30px;286 @include mq("md"){287 margin-top: 26px;288 }289}290 291.about__img{292 width: 44%;293 margin-left: 30px;294}295//共通パーツ296.inner{297 width: 100%;298 max-width: 1080px;299 margin-right: auto;300 margin-left: auto;301 padding: 0 25px;302 @include mq("md"){303 padding: 0 15px;304 }305}306.section-title__main{307font-size: 36px;308font-weight: $medium;309line-height: 1.4;310letter-spacing: 0.05em;311}312 313 314.section-title__sub{315 font-size: 12px;316 margin-top: 3px;317 letter-spacing: 0.05em;318 color: $red;319 @include mq("md"){320 font-size: 10px;321 }322}323 324.section-title.section-title--center{325 text-align: center;326 @include mq("md"){327 text-align: left;328 }329}330 331.text{332 font-size: 15px;333 font-weight: $medium;334 line-height: 1.867;335 letter-spacing: 0.05em;336 @include mq("md"){337 font-size: 14px;338 line-height: 2.143;339 }340}341 342.text--large{343 font-size: 24px;344 line-height: 1.75;345 @include mq("md"){346 font-size: 20px;347 line-height: 1.9;348 }349}350 351.text.text--reverse{352color: $white;353 354}355 356.button{357 font-size: 20px;358 width: 235px;359 display: inline-block;360 padding: 15px 15px;361 transition:background-color 0.3s,box-shadow 0.3s;362 background-color: $red;363 color:$white;364 letter-spacing: 0.05em;365 box-shadow: 2px 2px 4px rgba($color: $gray2, $alpha:0.5);366 &:hover{367 opacity: 1.0;368 border-color: $red2;369 box-shadow: none;370 }371}372 373.md-none{374 @include mq("md"){375 display:none;376 }377 }378 379 .md-show{380 display: none;381 @include mq("md"){382 display: block;383 }384 }385
試したこと
・scssの.mv内heightについて100vh→30vhとすると、その下の画像や文章を確認できることから読込はできている。
・cssにoverflow:hidden;はなし。
・html+scssだとスクロールできないため、scssが怪しいと考えている。
###補足
字数の関係でmetaタグなど関係なさそうな部分の省略あり。
0 コメント