質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

317閲覧

作成中のwebページについてスクロールできない。

Wsan

総合スコア5

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2023/02/04 09:47

実現したいこと

作成中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

1 2//header 3 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//hamburger 73 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//drawer 133 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 view 194 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//about 266.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タグなど関係なさそうな部分の省略あり。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Cocode

2023/02/04 12:57 編集

第三者が自身の環境で不具合を再現できるコードを提示していただければ回答がつきやすくなると思います! 今のままですとコンパイルエラーになりCSSが生成できず、私のパソコンではブラウザに表示することができません。 デバッグ(不具合を再現してからコードを確認します)するために、必要なコードをすべて提示して(または省いたり改変して)いただければ幸いですー! 具体的に言いますと変数やmixinが邪魔していますので、変数・mixinの定義も提示する、または変数・mixinを使用しないコードに書き換えていただれば助かります。
Wsan

2023/02/04 16:00

ご指摘いただきありがとうございます。 今回は自己解決しましたが、次回質問時の参考にさせていただきます。
guest

回答1

0

自己解決

htmlについてheaderタグが二つあるが、閉じタグが一つしかなかったため。
→二つ目のheaderタグをdivタグに変更した。

投稿2023/02/04 16:02

Wsan

総合スコア5

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問