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

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

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

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2457閲覧

表示位置の修正 carouselを使用

t.togashi

総合スコア22

Bootstrap

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/03/16 02:04

大変お手数ですが、お力添えを頂けますと幸いです。

前提・実現したいこと

HTML,CSS,Bootstrapを使用し、ランディングページを制作しています。
carouselを設置中に、配置が思い通りにならない問題が生じました。

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

①carouselのindicatorが、carouselの下方ではなく、nav上に配置される。
②carousel以降に配置したい内容が、carousel上に配置される。

該当のソースコード

HTML

1<!doctype html> 2<html lang="jp"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <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"> 10 <link rel="stylesheet" href="style.css"> 11 <title>ひまわり畑</title> 12 </head> 13 <body> 14 <header> 15 <!-- Navigation --> 16 <nav class="navbar navbar-expand-md navbar-light bg-light"> 17 <div class="container-fluid"> 18 <h1><a class="navbar-brand" href="#">ひまわり畑</a></h1> 19 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> 20 <span class="navbar-toggler-icon"></span> 21 </button> 22 <div class="collapse navbar-collapse" id="navbarResponsive"> 23 <ul class="navbar-nav ml-auto"> 24 <li class="nav-item"> 25 <a class="nav-link" href="#">ホーム</a> 26 </li> 27 <li class="nav-item"> 28 <a class="nav-link" href="#">ご挨拶</a> 29 </li> 30 <li class="nav-item"> 31 <a class="nav-link" href="#">開花状況</a> 32 </li> 33 <li class="nav-item"> 34 <a class="nav-link" href="#">Q&A</a> 35 </li> 36 <li class="nav-item"> 37 <a class="nav-link" href="#">アクセス</a> 38 </li> 39 </ul> 40 </div> 41 </div> 42 </nav> 43 </header> 44 45 <section> 46 <!-- Image Slider --> 47 <div id="slides" class="carousel slide" data-ride="carousel"> 48 <ul class="carousel-indicators"> 49 <li data-target="#slides" data-slide-to="0" class="active"></li> 50 <li data-target="#slides" data-slide-to="1"></li> 51 <li data-target="#slides" data-slide-to="2"></li> 52 </ul> 53 <div class="carousel-innner"> 54 <div class="carousel-item active"> 55 <img src="img/sunflower1.jpg" class="img-responsive"> 56 </div> 57 <div class="carousel-item"> 58 <img src="img/sunflower2.jpg" class="img-responsive"> 59 </div> 60 <div class="carousel-item"> 61 <img src="img/sunflower3.jpg" class="img-responsive"> 62 </div> 63 </div> 64 </div> 65 66 <!-- Greeting Section --> 67 <div class="greeting"> 68 <div class="container-fluid"> 69 <h2>ご挨拶</h2> 70 <div class="row"> 71 <div class="col-md-4"> 72 <!-- <img src="img/saito.jpg" class="img-fluid"> --> 73 </div> 74 <div class="col-md-8"> 75 <p>株式会社○○代表の○○です。</p> 76 <p>荒地となった畑を2012年に再生し、ひまわり畑を開園しました。</p> 77 </div> 78 </div> 79 </div> 80 </div> 81 </section> 82 <footer> 83 </footer> 84 85 <!-- Optional JavaScript --> 86 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 87 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 88 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 89 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 90 </body> 91</html>

CSS

1html, 2body{ 3 height: 100%; 4 width: 100%; 5 font-family: sans-serif; 6 color: #222; 7} 8.navbar{ 9 padding: .5rem .8rem; 10} 11.navbar-nav li{ 12 padding-right: 20px; 13} 14.nav-link{ 15 font-size: 1.1em; 16} 17.carousel-innner img{ 18 width: 100%; 19 height: 100%; 20}

試したこと

閉じタグに不足が無い事を確認しました。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

カルーセルに指定しているクラス名がcarousel-innnerとなっていますが、これはcarousel-innerです。この箇所を修正することで、質問者さんの実現したいことは行えると思います(動作確認用リンク)。

HTML

1<!doctype html> 2<html lang="jp"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <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"> 10 <link rel="stylesheet" href="style.css"> 11 <title>ひまわり畑</title> 12 </head> 13 <body> 14 <header> 15 <!-- Navigation --> 16 <nav class="navbar navbar-expand-md navbar-light bg-light"> 17 <div class="container-fluid"> 18 <h1><a class="navbar-brand" href="#">ひまわり畑</a></h1> 19 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> 20 <span class="navbar-toggler-icon"></span> 21 </button> 22 <div class="collapse navbar-collapse" id="navbarResponsive"> 23 <ul class="navbar-nav ml-auto"> 24 <li class="nav-item"> 25 <a class="nav-link" href="#">ホーム</a> 26 </li> 27 <li class="nav-item"> 28 <a class="nav-link" href="#">ご挨拶</a> 29 </li> 30 <li class="nav-item"> 31 <a class="nav-link" href="#">開花状況</a> 32 </li> 33 <li class="nav-item"> 34 <a class="nav-link" href="#">Q&A</a> 35 </li> 36 <li class="nav-item"> 37 <a class="nav-link" href="#">アクセス</a> 38 </li> 39 </ul> 40 </div> 41 </div> 42 </nav> 43 </header> 44 45 <section> 46 <!-- Image Slider --> 47 <div id="slides" class="carousel slide" data-ride="carousel"> 48 <ul class="carousel-indicators"> 49 <li data-target="#slides" data-slide-to="0" class="active"></li> 50 <li data-target="#slides" data-slide-to="1"></li> 51 <li data-target="#slides" data-slide-to="2"></li> 52 </ul> 53 <div class="carousel-inner"> 54 <div class="carousel-item active"> 55 <img src="img/sunflower1.jpg" class="img-responsive"> 56 </div> 57 <div class="carousel-item"> 58 <img src="img/sunflower2.jpg" class="img-responsive"> 59 </div> 60 <div class="carousel-item"> 61 <img src="img/sunflower3.jpg" class="img-responsive"> 62 </div> 63 </div> 64 </div> 65 66 <!-- Greeting Section --> 67 <div class="greeting"> 68 <div class="container-fluid"> 69 <h2>ご挨拶</h2> 70 <div class="row"> 71 <div class="col-md-4"> 72 <!-- <img src="img/saito.jpg" class="img-fluid"> --> 73 </div> 74 <div class="col-md-8"> 75 <p>株式会社○○代表の○○です。</p> 76 <p>荒地となった畑を2012年に再生し、ひまわり畑を開園しました。</p> 77 </div> 78 </div> 79 </div> 80 </div> 81 </section> 82 <footer> 83 </footer> 84 85 <!-- Optional JavaScript --> 86 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 87 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 88 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 89 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 90 </body> 91</html>

投稿2019/03/16 02:23

s8_chu

総合スコア14731

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

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

t.togashi

2019/03/16 02:36

大変助かりました。 極めて初歩的なミスでお恥ずかしいです。 この度はありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問