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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

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

Q&A

解決済

1回答

1829閲覧

bootstrap4のcarouselを入れるとリンク、hover、サイドバーが機能しなくなる

japan_japan

総合スコア7

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

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

0グッド

2クリップ

投稿2019/11/20 08:20

編集2019/12/12 05:11

問題

アマゾンのLP(https://www.amazon.co.jp/)の模写で大きなスライダーにbootstrap4のカルーセルを使用すると、①ハンバーガーボタン、②アマゾンロゴ、③お届け先に付けたhover機能(白い枠線の出現)、リンク機能、①のサイドバーの左からの出現が出来なくなります。

また、①②③を押すと、カルーセルが動いてしまいます。何が原因でしょうか。

ソースコード(文字数の関係で一部省略。

HTML <div class="first-nav-bar">   <!①ハンバーガーボタン> <div class="hamburger-menu"> <input type="checkbox" id="hamburger-menu-button"> <label for="hamburger-menu-button" class="open-button"></label> <label for="hamburger-menu-button" id="close-button"></label> <!①をクリックで左から出現するサイドバー> <div class="side-menu-bar"> <div class="hello-login"> <h4> <a> <span class="human-icon"></span> <span class="hello-login-bar"></span> </a> </h4> <ul class="sidebar-menu-item"> <li class="nav-item hover-grey">Prime Video<i class="fas fa-chevron-right"></i></li> <li class="nav-item hover-grey">Amazon Music<i class="fas fa-chevron-right"></i></li> </ul> </div> </div> </div>   <!②アマゾンロゴ> <div class="amazon-logo-area"> <a> <div class="amazon-sprite amazon-smile-logo"></div> <div class="amazon-sprite amazon-co-jp"></div> </a> <a class="start-prime-video">プライムを始める</a> </div> <div class="search-box"> <div class="input-group"> <div class="input-group-prepend"> <button type="button" class="category-button"> <span class="all-category">すべて<i class="fas fa-caret-down"></i></span> </button> </div> <input type="text" class="form-control" id="search-box"> <div class="input-group-append"> <button type="submit" class="amazon-sprite search-icon"></button> </div> </div> </div> <div class="top-menu-bar"> <nav class="nav"> <a class="nav-link-a global-icon"> <i class="fas fa-globe"></i><i class="fas fa-caret-down grey"></i> </a> <a class="nav-link-a hello-log-in"> <span class="grey">こんにちは、ログイン</span><br><span class="white bold">アカウント&リスト<i class="fas fa-caret-down grey"></i></span> </a> <a class="nav-link-a order-list"><br><span class="white bold">注文履歴</span></a> <a class="nav-link-a register-now"><span class="grey">今すぐ登録</span><br><span class="white bold">プライム<i class="fas fa-caret-down grey"></i></span></a> <a class="nav-link-a shopping-cart"><span class="white bold">カート</span></a> </nav> </div> </div> <div class="second-nav-bar"> <div class="second-meun-bar-left"> <div class="delivery-address-link"> <div class="delivery-address-link-border"> <!③お届け先に付けたリンク機能> <a href="#"> <div class="map-pointer-icon"></div> <span class="address1">お届け先</span><br> <span class="address2">伊丹市 664-0006</span> </a> </div> </div> </div> <div class="second-menu-bar-middle"> <div class="second-menu-bar-upper-bar"> <nav class="nav"> <a class="nav-link-b amazon-point" href="#">Amazonポイント</a> <span class="double-collon">:</span> <a class="nav-link-b" href="#">残高を確認</a> </nav> </div> <div class="second-menu-bar-lower-bar"> <nav class="nav"> <a class="nav-link-b">タイムセール</a> <a class="nav-link-b">クーポン</a> <a class="nav-link-b">AmazonBasics</a> <a class="nav-link-b">ランキング</a> <a class="nav-link-b">ギフトランキング</a> <a class="nav-link-b">新着商品</a> <a class="nav-link-b">ギフト券</a> <a class="nav-link-b">カスタマーサービス</a> </nav> </div> </div> <div class="second-menu-bar-right"> <a> <img src="https://images-fe.ssl-images-amazon.com/images/G/09/Digital_Video/svod/2019H2/CrossSite/Gateway/PrimeVideo_GW_DesktopSWM_400x39_T2_A._CB451520023_.jpg"> </a> </div> </div> <div class="headline-carousel"> <div id="headline-carousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://images-fe.ssl-images-amazon.com/images/G/09/2018/prime/gw/1139778_new_gw_hero_prime2_3000x1200._CB483219146_.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://images-fe.ssl-images-amazon.com/images/G/09/JP-hq/2019/img/Amazon_Pantry/XCM_Manual_1163066_FreeShip_201903_Max9unitsxE2x91xA1_3000x1200_Amazon_Pantry_XCM_Manual_gw_hero_3000x1200_1552959950_jpg._CB467804150_.jpg" class="d-block w-100" alt="..."> </div> </div> </div> <a class="carousel-control-prev" href="#headline-carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#headline-carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> CSS * { padding: 0; margin: 0; } .first-nav-bar { height: 60px; width: 100%; background-color: #131821; display: inline-block; } #hamburger-menu-button { display: none; } <!左からサイドバーが出現するためのボタン> .open-button { width: 40px; height: 40px; background-position: -132px -253px; border: 1px solid #666666; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; position: relative; top:9px; left: 8px; } <!左から出現するサイドバー> .side-menu-bar { width:365px; height:100%; background-color: white; z-index: 50; position:fixed; top:0; left: 0; transform:translateX(-365px); transition: all 1s ease-in-out; overflow-y: scroll; } <!左から出現するサイドバー> #hamburger-menu-button:checked ~ .side-menu-bar { transform: translateX(0); } <!サイドバーを左へしまうボタン> #close-button { display: none; position: fixed; top:0; left:0; width: 100%; height: 100%; background-color: black; transition: all 1s ease-in-out; } <!サイドバーが現れた時の余白の影> #hamburger-menu-button:checked ~ #close-button{ display: block; opacity: 0.3; } .hello-login { font-family: sans-serif; } .fa-chevron-right { float:right; color: black; opacity: 0.5; border:1px soild red; } h4 { background-color: #232F3E; height: 50px; } .human-icon { width: 30px; height: 30px; background-position:-139px -348px; position: relative; top: 10px; left: 40px; } .hello-login-bar { color:white; font-size:18px; position: absolute; top:15px; left: 80px; } .hello-login .nav-item { padding-top: 10px; padding-bottom: 10px; padding-right:30px; padding-left: 30px; cursor: pointer; font-size:14px; } .amazon-logo-area { height: 53px; width: 165px; position: absolute; top:5px; left:54px; } <!③お届け先に付けたhover機能(白い枠線の出現)> .amazon-logo-area:hover { border: 1px solid white; } .amazon-smile-logo { width: 106px; height: 40px; background-position: -7px -45px; } .amazon-co-jp { width: 35px; height: 18px; background-position: -277px -73px; position: relative; top:-27px; left: 105px; } .start-prime-video { color: #48A3C6; font-size: 12px; font-weight: bold; text-decoration: underline; position: relative; top:-40px; left:72px; } .search-box { width: 704px; position: absolute; top:9px; left:225px; } .category-button { width: 65px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; background-color: #F3F3F3; } .all-category { font-size: 13px; } #search-box { height: 40px; width: 500px; } .search-icon { width: 48px; height: 40px; background-color: #FEBD69; background-position: 2px -290px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .top-menu-bar { float: right; width: 505px; height: 48px; position: absolute; top:8px; left: 935px; } .top-menu-bar a { height: 48px; line-height: 1; text-decoration: none; } .global-icon { width: 65px; } .fa-globe { font-size:20px; color: white; } .fa-caret-down { margin: 2px; } .hello-log-in { width: 159px; } .order-list { width: 75px; } .register-now { width: 85px; } .shopping-cart { width: 50px; height: 500px; background-position:0 -340px; } .grey { color:#CCCCCC; font-size: 12px; } .white { color:white; } .bold { font-weight: bold; } .second-menu-bar { height: 40px; background-color: #232F3E; display: flex; } .second-meun-bar-left { width:216px; height: 40px; } .delivery-address-link{ line-height: 15px; width: 145px; height: 40px; margin-left: 10px; } .map-pointer-icon { width: 25px; height: 25px; background-position: -70px -313px; float: left; margin-top:7px; } .address1 { font-size: 12px; color:white; } .address2 { color:white; font-size: 14px; font-weight: bold; } .second-menu-bar-upper-bar { font-size:13px; } .second-menu-bar-upper-bar .nav-link-b { padding:0px 8px; text-decoration: none; color:#CCCCCC; line-height: 14px; } .second-menu-bar-upper-bar .nav-link-b:hover { border:1px solid white; } .second-menu-bar-lower-bar { font-size:14px; } .second-menu-bar-lower-bar .nav-link-b { padding:0px 8px; text-decoration: none; color:#CCCCCC; line-height: 17px; } .second-menu-bar-lower-bar .nav-link-b:hover { border:1px solid white; } .second-menu-bar-middle { width: 821px; } .second-menu-bar-right { width: 400px; height: 39px; float: right; } .second-menu-bar-right:hover { border:1px solid white; }

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

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

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

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

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

makosankibu

2019/12/10 04:32

まずHTMLの構文としてコードで閉じタグがない、タグが閉められていない等の修正をお願いします。 そして、下記の記載は、文章より該当のコードを個所を掲載していただきたいです。 >①ハンバーガーボタン、②アマゾンロゴ、③お届け先に付けたhover機能(白い枠線の出現)、リンク機 >能、①のサイドバーの左からの出現が出来なくなります。
japan_japan

2019/12/12 05:12

HTMLタグの修正、①②③の掲載を行いました。ご確認をお願いいたします。
guest

回答1

0

ベストアンサー

①ハンバーガーボタン、②アマゾンロゴ、③お届け先に付けたhover機能(白い枠線の出現)、リンク機能、①のサイドバーの左からの出現が出来なくなります。

掲載のhtmlにアマゾンで作ったと思われるクラスが指定してありますが、掲載のhtmlにはその指定がありません。その為、私は何が原因がわかりません。
もっと回答者に配慮したHTMLにしてほしいです。(ダミーデータを用意する等。)

また、①②③を押すと、カルーセルが動いてしまいます。何が原因でしょうか。

下のインジケータはid=headline-carouselの配下にあるべきです。
それがその親要素に配置されており、親要素がposition:staticの為、そのまた親要素のbody要素に対してposition:absoluteが指定されてしまっています。
試しに親要素のclass=headline-carouselposition:relativeを指定してみてください。(※これは正しい指定ではありません。id=headline-carousel class="carousel slide"の配下にインジケータを入れてください。なぜこのような実装にしたのか理解に苦しみます。きちんと公式のリファレンスを参照して正しく理解してから実装してください。)
これは、position:absoluteを指定した際の動作を理解する必要があります。

html

1 <a class="carousel-control-prev" href="#headline-carousel" role="button" data-slide="prev"> 2 <span class="carousel-control-prev-icon" aria-hidden="true"></span> 3 <span class="sr-only">Previous</span> 4 </a> 5 <a class="carousel-control-next" href="#headline-carousel" role="button" data-slide="next"> 6 <span class="carousel-control-next-icon" aria-hidden="true"></span> 7 <span class="sr-only">Next</span> 8 </a>

最後に、公式リファレンスをきちんと読んでください

投稿2019/12/12 07:07

編集2019/12/12 07:08
makosankibu

総合スコア289

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

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

japan_japan

2019/12/18 08:33

ご回答ありがとうございます。 複雑になってしまい私もわからなくなってきてしまったので、一旦停止をさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問