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

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

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

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

Q&A

1回答

360閲覧

Bootstrapでのスライドについて

_volatile

総合スコア13

Bootstrap

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

0グッド

1クリップ

投稿2018/01/10 17:36

###前提・実現したいこと
スライドするための<と>のボタンを表示

###発生している問題・エラーメッセージ
イメージ説明
(ブラウザはFirefoxです)
Bootstrapで画像のスライドを実装させると画像の赤く囲った部分のように「<」ボタンが「E079」、
「>」ボタンが「E080」となってしまいます。
また、左右の黒いグラデーションが画像からはみ出ている(画像の青く囲った部分)のがすごい気になるのですが、どうしても直せません。

分かる方がいたらよろしくお願いします。

###該当のソースコード

HTML

1<!DOCUMENT html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <title>--TITLE--</title> 7 <link href="css/bootstrap.css" rel="stylesheet"> 8 <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script> 9 <script src="js/bootstrap.min.js" type="text/javascript"></script> 10</head> 11 12<body> 13 <div id="Carousel" class="container center-block carousel slide" data-ride="carousel" data-interval="5000"> 14 <ol class="carousel-indicators"> 15 <li data-target="#Carousel" data-slide-to="0" class="active"></li> 16 <li data-target="#Carousel" data-slide-to="1"></li> 17 <li data-target="#Carousel" data-slide-to="2"></li> 18 </ol> 19 <div class="center-block carousel-inner" role="listbox"> 20 <div class="item active"> 21 <img src="images/0.jpg" alt="0"> 22 <div class="carousel-caption"></div> 23 </div> 24 <div class="item"> 25 <img src="images/1.jpg" alt="1"> 26 <div class="carousel-caption"></div> 27 </div> 28 <div class="item"> 29 <img src="images/2.jpg" alt="2"> 30 <div class="carousel-caption"></div> 31 </div> 32 </div> 33 <a class="left carousel-control" href="#Carousel" role="button" data-slide="prev"> 34 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 35 <span class="sr-only">Previous</span> 36 </a> 37 <a class="right carousel-control" href="#Carousel" role="button" data-slide="next"> 38 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 39 <span class="sr-only">Next</span> 40 </a> 41 </div> 42</body> 43 44</html>

###試したこと
classとかの書き換え

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

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

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

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

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

guest

回答1

0

私の環境でBootstrapCDNを使用し確認してみましたが、現象が再現できませんでした。現在の質問文からの情報では、幾つか原因が考えられるので確かなことはいえませんが、以下のような対処をすることで問題が解消するかもしれません。

  • フォントファイルが破損している可能性があるため、フォントを手動で再ダウンロードする。
  • CDNを使用しても良いならば、CDNを使う。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>--TITLE--</title> 6 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 7 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 8 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 9</head> 10<body> 11<div id="Carousel" class="container center-block carousel slide" data-ride="carousel" data-interval="5000"> 12 <ol class="carousel-indicators"> 13 <li data-target="#Carousel" data-slide-to="0" class="active"></li> 14 <li data-target="#Carousel" data-slide-to="1"></li> 15 <li data-target="#Carousel" data-slide-to="2"></li> 16 </ol> 17 <div class="center-block carousel-inner" role="listbox"> 18 <div class="item active"> 19 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/0.jpg" alt="0"> 20 <div class="carousel-caption"></div> 21 </div> 22 <div class="item"> 23 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/1.jpg" alt="1"> 24 <div class="carousel-caption"></div> 25 </div> 26 <div class="item"> 27 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/2.jpg" alt="2"> 28 <div class="carousel-caption"></div> 29 </div> 30 </div> 31 <a class="left carousel-control" href="#Carousel" role="button" data-slide="prev"> 32 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 33 <span class="sr-only">Previous</span> 34 </a> 35 <a class="right carousel-control" href="#Carousel" role="button" data-slide="next"> 36 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 37 <span class="sr-only">Next</span> 38 </a> 39</div> 40</body> 41</html>

投稿2018/01/13 19:46

s8_chu

総合スコア14731

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問