ページをスクロールできない

前提・実現したいこと

Bootstrapを使用しています。
ナビゲーションバーを固定してページをスクロールさせたいのです。

発生している問題・エラーメッセージ

ナビゲーションバーの固定はできたのですが、スクロールができず下の方の画面を表示させることができません。
ナビゲーションバーをクリックすれば、下の方の画面も表示させられます。

該当のソースコード

HTML
1
2 <!doctype html>
3<html lang="en">
4  <head>
5    <!-- Required meta tags -->
6    <meta charset="utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8
9    <!-- Bootstrap CSS -->
10    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
11    <link rel="stylesheet" type="text/css" href="style.css">
12    
13    <title>Hello, world!</title>
14    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
15  </head>
16  <body data-spy="scroll" data-target="#navbarResponsive">
17
18    <!---- start home --->
19 <div id="home">
20    
21    <!--- Navigation --->
22    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
23        <a class="navbar-brand" href="index.html"><img src="img/logo1.png"></a>
24        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
25            <span class="navbar-toggler-icon"></span>
26        </button>
27
28        <div class="collapse navbar-collapse" id="navbarResponsive">
29            <ul class="navbar-nav ml-auto">
30                <li class="nav-item">
31                    <a class="nav-link" href="#home">Home</a>
32                </li>
33                <li class="nav-item">
34                    <a class="nav-link" href="#course">Course</a>
35                </li>
36                <li class="nav-item">
37                    <a class="nav-link" href="#portfolio">Portfolio</a>
38                </li>
39                <li class="nav-item">
40                    <a class="nav-link" href="#team">Team</a>
41                </li>
42                <li class="nav-item">
43                    <a class="nav-link" href="#contact">Contact</a>
44                </li>
45            </ul>
46        </div>
47
48    </nav>
49
50    <!--- start image slider--->
51    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="7000">
52        <ol class="carousel-indicators">
53            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
54            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
55            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
56        </ol>
57        <div class="carousel-inner" role="listbox">
58            <!--- slide1--->
59            <div class="carousel-item active" style="background-image:url(img/slide0.jpg);">
60                <div class="carousel-caption text-center">
61                    <h1>Welcome To NUno</h1>
62                    <h3>Animated Bootstrap Theme</h3>
63                    <a class="btn btn-outline-light btn-lg" href="#course">Get Started</a>
64                </div>
65            </div>
66            <!---slider2--->
67            <div class="carousel-item" style="background-image:url(img/slide1.jpg);"></div>
68            <!---slider3--->
69            <div class="carousel-item" style="background-image:url(img/slide2.jpg);"></div>
70        </div><!--- end carousel--->
71        <!---prev next button-->
72        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
73            <span class="carousel-control-prev-icon" aeia-hidden="true"></span>
74        </a>
75        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
76            <span class="carousel-control-next-icon" aeia-hidden="true"></span>
77        </a>
78     </div>
79     <!--- end image slider--->
80 </div>
81    <!---- end home --->
82
83
84    <!---- start course --->
85     <div id="course"　class="offset">
86
87     <div class="col-12 narrow text-center">
88        <h1>Nuno THeme Advanced</h1>
89        <p class="lead">Learn Bootstrap by creating an advanced Bootstrap4 Responsive website template from scratch, widh no step slipped</p>
90        <a class="btn btn-secondary btn-md" href="http://bit.ly/
91        advanced-bootstrap-course" target="_blank">93%　OFF COUPON "NUN093"</a>
92     </div>
93        
94    </div>
95    <!---- end course --->
96    
97
98    <!---- start portfolio --->
99     <div id="portfolio">
100     
101    </div>
102    <!---- end portfolio --->
103
104
105     <!---- start team --->
106     <div id="team">
107        
108    </div>
109    <!---- end team --->
110
111
112     <!---- start contact --->
113     <div id="contact">
114        
115    </div>
116    <!---- end contact --->
117    
118
119    <!-- Optional JavaScript -->
120    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
121    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
122    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
123    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
124  </body>
125</html>

CSS
1
2body{
3    overflow: hidden;
4    color: #505962;
5    font-family: 'Noto Sans JP', sans-serif;
6}
7
8/*--- navbar ---*/
9
10.navbar {
11    text-transform: uppercase;
12    font-weight: 700;
13    font-size: .9rem;
14    letter-spacing: .1rem;
15    background: rgba(0, 0, 0, .6)!important;
16}
17
18.navbar-brand img {
19    height: 3rem;
20}
21
22.navbar-nav li {
23    padding-right: .7rem;
24}
25
26.navbar-dark .navbar-nav .nav-link {
27    color: white;
28    padding-top: .8rem;
29}
30
31.navbar-dark .navbar-nav .nav-link.active,
32.navbar-dark .navbar-nav .nav-link:hover {
33    color: #1ebba3;
34}
35
36/*---slider---*/
37
38.carousel-item {
39    height: 100vh;
40}

試したこと

スペルミスを疑ったのですが、どうやらスペルは合ってるみたいです。

m.ts10806

2020/06/29 09:27

style.cssの内容もご提示ください

YakumoSaki

2020/06/29 11:06

HTMLが途中で途切れていませんか？手元のchromeでコンテンツ部分を増やして試した範囲では、ナビゲーションバーを固定されてページをスクロールできました。

RyoYo

2020/06/29 16:09

返信ありがとうございます。 HTMLとCSSの全てを貼りました。

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1body{
2    /*overflow: hidden;*//* 削除 */
3    color: #505962;
4    font-family: 'Noto Sans JP', sans-serif;
5}

投稿2020/06/29 16:16

kei344

総合スコア69606

RyoYo

2020/06/30 00:41

おお！できました！！ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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

ページをスクロールできない

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

試したこと

関連した質問