navbarの背景色が変わりません。

CSSで背景色を指定しても、htmlで直接styleで指定しても変わらないです

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <title>fremeekousikihp</title>
8    <!-- fontawesomeの読み込み -->
9    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
10    <!-- cssの読み込み  -->
11     <link rel="stylesheet" href="stylesheet.css">
12    <!-- jsの読み込み -->
13     <script type="text/javascript" src="sample.js"></script>
14    <!-- BootstrapのCSS読み込み -->
15    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
16    <!-- jQuery読み込み -->
17    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
18    <!-- BootstrapのJS読み込み -->
19   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
20  </head>
21  <body>
22   <nav class="navbar navbar-light navbar-expand-md bg-light">
23  <a class="navbar-brand" href="./index.html">
24      <img src="" class="logo-img">
25  </a>
26  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#responsiveMenu" aria-controls="responsiveMenu" aria-expanded="false" aria-label="Toggle navigation">
27      <span class="navbar-toggler-icon"></span>
28  </button>
29  <div class="collapse navbar-collapse" id="responsiveMenu">
30      <ul class="navbar-nav mr-auto">
31          <li class="nav-item">
32              <a class="nav-link" href="">Home</a>
33          </li>
34          <li class="nav-item">
35              <a class="nav-link" href="">企業概要</a> 
36          </li>
37          <li class="nav-item">
38              <a class="nav-link" href="">プロダクト</a> 
39          </li>
40          <li class="nav-item">
41              <a class="nav-link" href="">お問い合わせ</a> 
42          </li>
43      </ul>
44  </div>
45</nav>
46
47  <footer style="background-color:#7BC5AE">
48      <div class="copyright">
49  <p>© 2019 fremee公式</p>
50</div>
51<div class="">
52  <a href="" class="contact">Note</a>
53  <a href="" class="fb"><i class="fab fa-facebook-square"></i></a>
54  <a href="" class="tw"><i class="fab fa-twitter"></i></a>
55  <a href="" class="insta"><i class="fab fa-instagram"></i></a>
56</div>
57     </footer>
58
59  </body>
60</html>

css
1@charset "utf-8";
2.navbar .navbar-nav .nav-link {
3    color: #fff;
4}
5.navbar {
6    background-color:#7BC5AE; 
7}

yoshinavi

2019/08/31 08:49

デベロッパーツールで、どのCSSが適用されているか確認はされましたか？

kyoya0819

2019/09/15 03:46

> 質問者が1日前に「まだ回答を求めています」と言っています。 x_xさんが回答していますが解決してないのですか？

sasakihina

2019/09/16 11:23

ありがとうございます！拝見しておりませんでしたm(_ _)m 解決いたしました！

行動規範の内容に同意します

回答1件

ベストアンサー

必要がないなら bg-light を外しましょう。ここには !important がついているので順番を変えても上書きできません。
https://getbootstrap.com/docs/4.1/utilities/colors/#background-color

CSS
1.bg-light {
2  background-color: #f8f9fa !important;
3}

投稿2019/09/02 04:28

編集2019/09/02 05:48

x_x

総合スコア13749

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

navbarの背景色が変わりません。

関連した質問