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

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

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

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

Q&A

解決済

1回答

506閲覧

Bootstrapでインジケーター・コントローラーが表示、可動しない

srmm1025

総合スコア12

Bootstrap

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

0グッド

1クリップ

投稿2019/03/10 09:10

現在、Bootstrapでサイトを作る練習をしております。
表題の通り、インジケーターとコントローラーが表示できません。
写真は3枚設定しており、1枚の時はコントローラーが表示されていたのですが、複数設定するとコントローラーが表示されなくなってしまいました。
色々調べ、書籍で参考コードがありましたのでそのコードを参考にしていますが、うまく行きません。

よろしくお願いします。

Bootstrapバージョン4

1<!doctype html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 7 <title>カフェ Mr. M COFFEE</title> 8 </head> 9 <body> 10 <div class="container text-center"> 11 <h1>Mr. M COFFEE</h1> 12 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 13 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 14 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 15 <!-- nav --> 16 17 <!--ナビゲーションバー--> 18 19 <header class="py-4"> 20    <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top"> 21 <div class="container-fluid"> 22 <!--サブコンポーネント--> 23 <a class="navbar-brand" href="index.html">Mr. M COFFEE</a> 24 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" 25 aria-expanded="false" aria-label="Toggle navigation"> 26 <span class="navbar-toggler-icon"></span> 27 </button> 28 <!--ナビゲーションー--> 29 <div class="collapse navbar-collapse" id="navbar-content"> 30 <!--ナビゲーションメニュー--> 31 <ul class="navbar-nav mr-auto"> 32 <li class="nav-item active"> 33 <a class="nav-link" href="#">Top <span class="sr-only">(current)</span></a> 34 </li> 35 <li class="nav-item"> 36 <a class="nav-link" href="#">About</a> 37 </li> 38 <li class="nav-item"> 39 <a class="nav-link" href="#">Menu</a> 40 </li> 41 <li class="nav-item"> 42 <a class="nav-link" href="#">Coupon</a> 43 </li> 44 <li class="nav-item"> 45 <!--ドロップダウン--> 46 <ul class="navbar-nav"> 47 <li class="nav-item dropdown"> 48 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Information 49 </a> 50 <div class="dropdown-menu" aria-labeliedby="navbarDropdown"> 51 <a class="dropdown-item" href="#">Shop</a> 52 <a class="dropdown-item" href="#">Access</a> 53 </div> 54 </li> 55 </ul> 56 </li> 57 </ul> 58 <!--右側のメニュー:Contactページへのリンク--> 59 <ul class="navbar-nav"> 60 <li class="nav-item"> 61 <a href="contact.html" class="nav-link btn btn-info">Contact</a> 62 </li> 63 </ul> 64 65 </div> 66 </div> 67 </nav> 68   </ol> 69 <!--カルーセル内枠--> 70 <div class="carousel-inner"> 71 72 <div class="carousel-item active"> 73 <img class="img-fluid" src=" 74 c2cd16d0a7f926968200d5d809ec9f9e_s.jpg" alt="本の写真"> 75 <div class="carousel-caption d-none d-md-block"> 76 <h2>Mr. M COFFEEのこだわり</h2> 77 <p>店主が世界中のコーヒー豆を厳選し、コーヒー豆の種類にあわせ、心を込めて焙煎、抽出しております。</p> 78 </div> 79 </div> 80 81 <div class="carousel-item"> 82 <img class="img-fluid" src="6e4e3296c2b0ab5e62483cb48a76a837_s.jpg" alt="コーヒー"> 83 <div class="carousel-caption d-none d-md-block"> 84 <h2>クマさんのこだわり</h2> 85 <p>クマさんが世界中のコーヒー豆を厳選し、コーヒー豆の種類にあわせ、心を込めて焙煎、抽出しております。</p> 86 </div> 87 </div> 88 89 <div class="carousel-item"> 90 <img class="img-fluid" src="788ebbae856b6d9c29932cf922b6eadd_s.jpg" alt="イノシシ"> 91 <div class="carousel-caption d-none d-md-block"> 92 <h2>イノシシのこだわり</h2> 93 <p>イノシシが世界中のコーヒー豆を厳選し、コーヒー豆の種類にあわせ、心を込めて焙煎、抽出しております。</p> 94 </div> 95 </div> 96 <!--コントローラー--> 97 <a class="carousel-control-prev" href="#main_visual" role="button”data-slide="prev"> 98 <span class="carousel-control-prev-icon" aria-hidden="true"></span> 99 <span class="sr-only">前に戻る</span> 100 </a> 101 102 <a class="carousel-control-next" href="#main_visual" role="button"data-slide="next"> 103 <span class="carousel-control-next-icon" aria-hidden="true"></span> 104 <span class="sr-only">次に進む</span> 105 </a> 106 107 108 </div> 109 110 </div> 111 <main> 112 <!--メインビジュアル--> 113 <div class="py-4"> 114     <div class="container"> 115 <!--カルーセル外枠--> 116 <div id="main_visual" class="carousel slide" data-ride="carousel"> 117 <!--インジゲーター--> 118 <ol class="carousel-indicators"> 119       <li data-target="#main_visual" data-slide-to="0" class="active"></li> 120 <li data-target="#main_visual" data-slide-to="1"></li> 121 <li data-target="#main_visual" data-slide-to="2"></li> 122 123 </div> 124 </div> 125 126 </header> 127 128 129 130 131 <!--コンテンツ01--> 132 <div class="py-4"> 133 <section id="news"> 134 <div class="container"> 135 <div class="row"> 136 137 <!--左からむ--> 138 <div class="col-md-2"> 139 <h3>News</h3> 140 </div> 141 <!--右からむ--> 142 <div class="col-md-10"> 143 <dl class="row"> 144 <dt class="col-md-3">2020年10月10日</dt> 145 <dd class="col-md-9">ランチクーポン配付中です</dd> 146 <dt class="col-md-3">2020年10月20日</dt> 147 <dd class="col-md-9">季節限定メニューを追加しました</dd> 148 <dt class="col-md-3">2020年10月30日</dt> 149 <dd class="col-md-9">新しい雑貨入荷しました</dd> 150 </dl> 151 </div> 152 </div> 153 </div> 154 155 </section> 156 157 </div> 158 <!--コンテンツ02--> 159 <div class="py-4 bg-light"> 160 <section> 161 <div class="container"> 162 <!--上段--> 163 <div class="row mb-4"> 164 <div class="col-md-8 mb-3"> 165 <h3 class="mb-3">Mr. M COFFEEについて</h3> 166 <p>Mr. M COFFEEは店主が焙煎したこだわりのコーヒーを最高の空間とおもてなしで提供する直焙煎のカフェです。店主が世界中のコーヒー豆を厳選し、コーヒー豆の種類にあわせ、心を込めて焙煎、抽出しております。また、女性にちょうどいいボリュームのワンプレートランチ、スイーツなどもご好評いただいております。</p> 167 <p>最高に美味しい一杯のコーヒーを、最高に心地よい空間で、美味しいコーヒーを飲みながら、ゆったりとした素敵な時間を過ごしに、ぜひMr. M COFFEEにお越しください。</p> 168 <a href="#" class="btn btn-info">メニューを見る</a> 169 <a href="#" class="btn btn-info">店舗情報を見る</a> 170 </div> 171 <div class="col-md-4"> 172 <img src=" 173 6e4e3296c2b0ab5e62483cb48a76a837_s.jpg" alt="店主が焙煎したこだわりのコーヒー" class="img-fluid"> 174 </div> 175 </div> 176 <!--下段--> 177 <div class="row"> 178 <div class="col-md-4"> 179 <!--カード01--> 180 <div class="card mb-3"> 181 <img src="c2cd16d0a7f926968200d5d809ec9f9e_s.jpg" alt="本" class="img-fluid"> 182 <div class="card-body d-flex justify-between"> 183 <h4 class="card-title">くつろぎの空間</h4> 184 <button type="button" class="btn btn-secondary">詳しく見る 185 </button> 186 </div> 187 </div> 188 </div> 189 <!--カード2--> 190 <div class="col-md-4"> 191 <div class="card mb-3"> 192 <img src="6e4e3296c2b0ab5e62483cb48a76a837_s.jpg" alt="コーヒー" class="img-fluid"> 193 <!--カード本文--> 194 <div class="card-body d-flex justify-between"> 195 <h4 class="card-title">雑貨コーナー</h4> 196 <button type="button" class="btn btn-secondary">詳しく見る 197 </button> 198 </div> 199 </div> 200 </div> 201 <!--カード3--> 202 <div class="col-md-4"> 203 <div class="card mb-3"> 204 <img src="788ebbae856b6d9c29932cf922b6eadd_s.jpg" alt="イノシシ" class="img-fluid"> 205 <!--カード本文--> 206 <div class="card-body d-flex justify-between"> 207 <h4 class="card-title">キッズドリンク</h4> 208 <button type="button" class="btn btn-secondary">詳しく見る 209 </button> 210 </div> 211 </div> 212 </div> 213 </div> 214 </section> 215 </div> 216 </div> 217 <!--コンテンツ03--> 218 <div class="py-4"> 219 220 </div> 221 <!--コンテンツ04--> 222 <div class="py-4"> 223 224 </div> 225 <!--コンテンツ05--> 226 <div class="py-4"> 227 228 </div> 229 </main> 230 <!--フッター--> 231 <footer class="py-4"> 232 233 </footer> 234 235 </body> 236</html> 237 238

表示される画面はこちらです。
イメージ説明

参考にした書籍のコードはこちらです。
イメージ説明
イメージ説明
イメージ説明

よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

意図通りに動くかどうかは別としてHTML構文がかなり崩れているので、
そこをきちんとしないことには問題の切り分けにならないと思います。

  1. 開始がないolタグが何の前触れも無く</ol>とある
  2. 隙間がなく、ダブルクォーテーションではなくright double quotation markになっている

role="button”data-slide="prev">
↑まで直したときにまだたくさん
0. <main>の手前の閉じ</div> 開始のペアがない
0. main_visual内のolが閉じられていなく、なぜか急に閉じ</div>閉じ</header>
0. 閉じ</section> たぶんそこでは閉じれない
0. ↑の下の閉じ</div> ペアがなさそう
0. 閉じ</main> たぶんそこでは閉じれない
0. 開始と閉じの数や位置、組み合わせ方がめちゃくちゃなので</body></html>も正しく閉じれない

まず、上記全てきちんとなおしましょう。
HTMLが正しく組めていないと折角のCSSフレームワーク(BootStrap)も正しく動作しませんし、
今回のように複数組み合わせようとした場合、元々できていた機能すらも動作しなくなります。


このあたりは、構文チェック機能のあるエディタ使いましょう。
文字色がかわるなどして実行前に教えてくれます。

※下記は私がHTML、CSS、JavaScriptのみの場合はよく使っているBrackets!
赤丸は私が画面キャプチャに対してペイントツールで別途つけたものです
2.まで
イメージ説明

3.以降
イメージ説明
イメージ説明

Web上で構文チェックサービスもありますのでご活用ください。

投稿2019/03/11 04:40

m.ts10806

総合スコア80765

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

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

srmm1025

2019/03/11 13:01

ご回答とご指摘ありがとうございます! コードの整理ができておらずぐちゃぐちゃになってしまってます。 これからは整理しながら書いていこうと思います! 本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問