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

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

新規登録して質問してみよう
ただいま回答率
85.49%
スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

Q&A

解決済

1回答

10066閲覧

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

RyoYo

総合スコア9

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

0グッド

0クリップ

投稿2020/06/29 08:58

編集2020/06/29 16:08

前提・実現したいこと

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}

試したこと

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

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

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

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

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

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

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の全てを貼りました。
guest

回答1

0

ベストアンサー

CSS

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

投稿2020/06/29 16:16

kei344

総合スコア69380

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

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

RyoYo

2020/06/30 00:41

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問