bootstrap / navbar active設定がうまく反映されない

現在bootstrapにてナビバーを作成中です。ナビゲーションの４項目のうち、現在のページに当たるリンク先をactive表示にしようと、class要素にactiveを入れたのですが、うまくactive表示されません。bootstrapに明るい方がいらっしゃいましたら、ご教授お願いいたします。

HTML
1<!doctype html>
2<html lang="en">
3
4<head>
5    <!-- Required meta tags -->
6    <meta charset="utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8    <link rel="stylesheet" href="style.css">
9    <!-- Bootstrap CSS -->
10    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
11        crossorigin="anonymous">
12
13    <title>step3_1 index</title>
14</head>
15
16<body>
17    <div class="inner-section">
18<nav>
19            <ul class="nav justify-content-center">
20                <li class="active nav-item">
21                    <a class="nav-link" href="index.html">Home</a>
22                </li>
23                <li class="nav-item">
24                    <a class="nav-link" href="about.html">About</a>
25                </li>
26                <li class="nav-item">
27                    <a class="nav-link" href="gallery.html">Gallery</a>
28                </li>
29                <li class="nav-item">
30                    <a class="nav-link" href="link.html">Link</a>
31                </li>
32            </ul>
33        </nav>
34</div>
35
36
37
38    <!-- Optional JavaScript -->
39    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
40    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
41        crossorigin="anonymous"></script>
42    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
43        crossorigin="anonymous"></script>
44    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
45        crossorigin="anonymous"></script>
46</body>
47
48</html>

CSS
1body {
2  margin: 0px;
3  padding: 0px;
4  -webkit-text-size-adjust: none;
5  color: #666;
6  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
7    Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /*フォント種類*/
8  font-size: 16px !important;
9  line-height: 2;
10  background: #fff;
11}
12h1,
13h2,
14h3,
15h4,
16h5,
17p,
18ul,
19ol,
20li,
21dl,
22dt,
23dd,
24form,
25figure,
26form {
27  margin: 0px;
28  padding: 0px;
29  font-size: 100% !important;
30  font-weight: normal;
31}
32ul {
33  list-style-type: none !important;
34}
35/* navigation */
36nav {
37  font-size: 18px !important;
38  margin-bottom: 40px;
39}
40ul.nav li a {
41  text-decoration: none !important;
42  padding: 5px 30px;
43}
44ul.nav li a:hover{
45  color: #d08047;
46  border-bottom: 4px solid #d08047;
47}
48ul.nav li .active{
49    color: #d08047;
50  border-bottom: 4px solid #d08047;
51}

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

回答1件

ベストアンサー

HTMLの構造から、ul.nav li .activeではなく、ul.nav li.activeとしなければならないと思います。

HTML
1<!doctype html>
2<html lang="en">
3
4<head>
5    <!-- Required meta tags -->
6    <meta charset="utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
10          integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
11          crossorigin="anonymous">
12    <title>step3_1 index</title>
13    <style>
14        body {
15            margin: 0px;
16            padding: 0px;
17            -webkit-text-size-adjust: none;
18            color: #666;
19            font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
20            Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /*フォント種類*/
21            font-size: 16px !important;
22            line-height: 2;
23            background: #fff;
24        }
25
26        h1,
27        h2,
28        h3,
29        h4,
30        h5,
31        p,
32        ul,
33        ol,
34        li,
35        dl,
36        dt,
37        dd,
38        form,
39        figure,
40        form {
41            margin: 0px;
42            padding: 0px;
43            font-size: 100% !important;
44            font-weight: normal;
45        }
46
47        ul {
48            list-style-type: none !important;
49        }
50
51        /* navigation */
52        nav {
53            font-size: 18px !important;
54            margin-bottom: 40px;
55        }
56
57        ul.nav li a {
58            text-decoration: none !important;
59            padding: 5px 30px;
60        }
61
62        ul.nav li:not(.active) a:hover { /* 念のため追記 */
63            color: #d08047;
64            border-bottom: 4px solid #d08047;
65        }
66
67        ul.nav li.active { /* 修正 */
68            color: #d08047;
69            border-bottom: 4px solid #d08047;
70        }
71    </style>
72</head>
73
74<body>
75<div class="inner-section">
76    <nav>
77        <ul class="nav justify-content-center">
78            <li class="active nav-item">
79                <a class="nav-link" href="index.html">Home</a>
80            </li>
81            <li class="nav-item">
82                <a class="nav-link" href="about.html">About</a>
83            </li>
84            <li class="nav-item">
85                <a class="nav-link" href="gallery.html">Gallery</a>
86            </li>
87            <li class="nav-item">
88                <a class="nav-link" href="link.html">Link</a>
89            </li>
90        </ul>
91    </nav>
92</div>
93<!-- Optional JavaScript -->
94<!-- jQuery first, then Popper.js, then Bootstrap JS -->
95<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
96        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
97        crossorigin="anonymous"></script>
98<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
99        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
100        crossorigin="anonymous"></script>
101<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
102        integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
103        crossorigin="anonymous"></script>
104</body>
105</html>