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

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

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

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Bootstrap

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

CSS

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

Q&A

解決済

3回答

11695閲覧

【Bootstrap css】ドロップダウンボタンの背景色cssで指定してもが変わらない【アイコン】

nekomura

総合スコア132

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Bootstrap

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

CSS

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

0グッド

0クリップ

投稿2016/09/14 09:39

編集2016/09/15 01:54

よろしくお願いいたします。
レスポンシブデザイン対応のwebページを作っています。
開発環境はEclipseの動的webプロジェクトです。

現在、ナビゲーションウィンドウは以下の画面のような見た目になっています。
少し細かい事なのですが、うまくcssが反映してくれず、検索したても方法が見つけられなかったので
こちらで質問させて頂く事にしました。
赤丸で囲んであるドロップダウン部分について、表題の件の質問です。

![navbar
アイコンだけを置いてただのリンクボタンに設定していたときは良かったのですが(ナビバーと同じ背景色でした)、ドロップダウンボタンにした際に該当部分の背景が回りと違う色になってしまいます。

背景の色を周りと同じにして、アイコンを白く表示させたいのですが、背景色がCSSを書いても変わりません。
※ドロップダウン部分にはFont Awesomemeからbarsのアイコンを使用して、
ボタンのように見せています。

該当部分のソースは以下です。
htmlクラス

<!-- top nav --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <!-- logo img --> <a class="navbar-brand" href=""> <img src="images/html.png" id="logo-img"> </a> <!-- toggle --> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- top menu --> <div class="collapse navbar-collapse" id="top-nav"> <!-- main navbar --> <ul class="nav navbar-nav"> <li><a href="inquiry.html">お問い合わせ</a></li> </ul> <!-- right navbar --> <ul class="nav navbar-nav navbar-right"> <li><a href=""><i class="fa fa-sign-in"></i> ログイン</a></li> <li><a href="">製品情報</a></li> <li><a href="">デバイス情報</a></li> <li><a href="">サポート</a></li> <li class="dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"><span class="fa fa-bars fa-large" aria-hidden="true"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">menu</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> </ul> </li> </ul> </div> </div> <!-- end container --> </nav> <!-- end nav -->

** cssクラス **(コメント部分もお読みください)

/*NAVメニュー*/ .navbar{ border-radius: 0; border: none; background-color: #003355; <--! ここで背景色を設定しており、該当箇所をドロップダウンにする前は3本線のアイコン部分の背景色もこの色でした --> } #logo-img{ height: 20px; } .navbar-default .navbar-nav >li > a{ color: #fff; } .navbar-default .navbar-nav >li > a:hover{ color: #aaa; } .google-icon{ max-width: 180px; height: auto; } .dropdown-toggle{ <--! ←出来ない --> background-color: #003355; } /*.fa{ <--! ←アイコンは白くなるのですが、現在は背景が白となってしまっているの為、可視性の為に実際はコメントアウトしています。 --> color:white; }*/

何か指定するクラスが違っているのかなど、ご指摘やご教示をいただきたく存じます。
有職者の皆様、どうぞよろしくお願いいたします。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2016/09/14 09:59

当方の環境で、提示頂いたソースを試したところ、.dropdown-toggleのbackground-colorは#003355に変わりました。ブラウザのデベロッパーツールで別のスタイルが上書きしてしまっていないか、確認してみてはどうでしょうか?
popobot

2016/09/14 10:06 編集

現状のナビバーの紺色などは自前のCSSですか? 全体的なHTMLやCSSがわからないと回答難しいですね。自分もブラウザのデベロッパーツールで調べるのが一番いいと思います。
nekomura

2016/09/15 01:56

miz様 icchii様 早々の修正依頼に対し、追記がおそくなり申し訳ありません。 ドロップダウンの部分以外のソースを追記したので、ご確認のうえ再度アドバイスを頂ければ幸いです。 icchii様 >現状のナビバーの紺色などは自前のCSSですか? 自前のcssといいますと、自分で記述したものかという意味でよろしいでしょうか?(理解が悪く申し訳ありません)。 ドロップダウンの部分以外のソースを追記したので、ご確認のうえ再度アドバイスを頂ければ幸いです
guest

回答3

0

もしかして、クリックしたときの背景色が変わらないということでしたか?
であれば、ちょっと乱暴ですけど、以下の様な感じにBootstrapのスタイルを上書きですかね。

CSS

1.nav .open>a.dropdown-toggle, 2.nav .open>a.dropdown-toggle:focus, 3.nav .open>a.dropdown-toggle:hover, 4.nav>li>a.dropdown-toggle:focus, 5.nav>li>a.dropdown-toggle:hover { 6 background-color: #003355; 7}

投稿2016/09/14 10:04

編集2016/09/14 10:11
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2016/09/14 10:13

コード例を少し修正しました。デベロッパーツールで見て、乱暴に上書きしただけなので、質問者様もツールで確認してみてください。
nekomura

2016/09/15 01:41

miz様 >クリックしたときの背景色が変わらないということでしたか? いいえ、デフォルトでの背景色をバーと同じ #003355にしたいという意味です。 ちなみに、頂いたサンプルコードも試したところ、きちんとmiz様の意図された動作となりました。 修正依頼の内容についてですが、デベロッパーツールの使い方にまだ慣れていないせいもありまだ追記をどのように書けばよいか分からない状態です。 頂いたアドバイスをもとに試行錯誤中ですので、また追記後には何かしらご教示を頂ければ幸甚です。 早々のご回答に対し返答が遅くなり申し訳ございません。 どうぞよろしくお願いいたします。
popobot

2016/09/15 02:15

デベロッパーツールをある程度使えるようになるのが一番の近道のような気がします。 詳しく使い方が書いてあるサイトがたくさんあるので参考にして、問題の要素にどのCSSの設定が適用されているかを調べてみてはどうでしょうか。 http://www.buildinsider.net/web/chromedevtools/01
nekomura

2016/09/15 04:46

icchii様 urlありがとうございます。
nekomura

2016/09/16 02:04

miz様 一旦解決いたしました。 為になるご回答、いつもありがとうございます。 ネットでは気づけなかった知識やテクニックをご教示いただけるのでとても助かっております。
guest

0

ベストアンサー

軽く試してみたのですが、こんな感じでうまくいかないでしょうか

css

1.navbar-default .navbar-nav>.active>a, 2.navbar-default .navbar-nav>.active>a:focus, 3.navbar-default .navbar-nav>.active>a:hover { 4 background-color: #003355; 5}

投稿2016/09/15 09:47

popobot

総合スコア6586

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

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

nekomura

2016/09/16 02:01

icchii様 頂いたサンプルコードを試したところ、希望通りの結果となりました。 ありがとうございます。 まだ、>の使い方等慣れていない為、このご回答を元に何が良くなかったのかを考えてきちんと習得していきたいと思います。 どうもありがとうございました。
popobot

2016/09/16 02:27

うまくいってよかったです! 自分がやったことを、以下のサイトの用語を元に軽く解説しておきます。 http://www.buildinsider.net/web/chromedevtools/01 1. 虫眼鏡アイコンで色がおかしい要素を選択します。 2. 要素の属性/スタイルの確認でStyleグループをみたところ、bootstrap.cssが背景色を設定しているのを確認しました。 3. そのbootstrap.cssの要素指定をコピーして、自前のCSSに貼り付けて、背景色を#003355と指定し直しました。 ※自分もCSSとかそんなに詳しくはない方ですが、BootstrapのCSSを修正するぐらいだったら、こんな感じでいつもやっています。
nekomura

2016/09/16 02:50

icchii様 参考サイト初め、修正のテクニックのご教示ありがとうございます! 一人で調べていてもまだ迷走する事が多いので、とても助かります。
guest

0

.dropdown-togglebackground-image: none;を追加してみてください。
background-colorの上にbackground-imageを敷くのでbackground-imageで何か(グラデとか)していたらbackground-colorは効かないです。

投稿2016/09/15 02:06

gin

総合スコア2722

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

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

nekomura

2016/09/16 02:02

gin様 無事に解決いたしました。 ご回答に感謝いたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問