text-decoration: none; が効かない

bootstrap とbulmaを使ってwebページを書いています。CDNで読み込んでいます。
aリンクにしたテキストの下線が消えなくて困っています.以下該当箇所のコードです

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <!-- Bootstrap -->
7  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
8    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
9  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.2/css/bulma.css">
10  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
11    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
12
13  <!-- FontAwesome -->
14  <script src="https://kit.fontawesome.com/782b0a94e2.js" crossorigin="anonymous"></script>
15
16  <!-- Google Font -->
17  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400&display=swap&subset=japanese"
18    rel="stylesheet">
19  <!-- css -->
20  <link rel="stylesheet" href="style.css">
21</head>
22
23<body>
24  <!-- navigation -->
25  <div class="container-fruid sticky-top">
26    <nav class="navbar navbar-expand-md">
27      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
28        <i class="fas fa-bars"></i>
29      </button>
30      <a href="navbar-brand" hred="#"><img src="img/logo_demo_w.png" alt=""></a>
31      <div class="collapse navbar-collapse" id="navbarResponsive">
32        <ul class="navbar-nav ml-auto">
33          <li class="nav-item active"><a href="#" class="nav-link">コンテンツ</a></li>
34          <li class="nav-item"><a href="#" class="nav-link">コンテンツ</a></li>
35          <li class="nav-item"><a href="#" class="nav-link">コンテンツ</a></li>
36        </ul>
37      </div>
38    </nav>
39  </div>
40
41  <!-- hero -->
42  <section id="showcase">
43    <div id="myCarousel" class="carousel slide" data-ride="carousel">
44      <ol class="carousel-indicators">
45        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
46        <li data-target="#myCarousel" data-slide-to="1"></li>
47        <li data-target="#myCarousel" data-slide-to="2"></li>
48
49      </ol>
50      <div class="carousel-inner">
51        <!-- <div class="carousel-item carousel-image-1 active">
52          <div class="container">
53          </div>
54        </div> -->
55
56        <div class="carousel-item carousel-image-2 active">
57          <div class="container">
58          </div>
59        </div>
60
61        <div class="carousel-item carousel-image-3">
62          <div class="container">
63          </div>
64        </div>
65        <div class="carousel-item carousel-image-4">
66          <div class="container">
67          </div>
68        </div>
69      </div>
70      <div class="caption">
71        <h1 class="display-3">コンテンツ</h1>
72        <a href="#" class="btn btn-lg">コンテンツ</a>
73      </div>
74    </div>
75  </section>
76  <section>
77    <div class="row justify-content-center">
78      <div class="col-6 col-md-5">
79        <div class="tile is-round is-bg-white">
80          <section class="tile-content">
81            <p class="text-center"> <img src="img/icon.png" width="30px"> 常に二枚</p>
82            <p>コンテンツ<br>タイルの高さを揃えたい<br>タイルの高さを揃えたい<br>タイルの高さを揃えたい<br>タイルの高さを揃えたい<br>タイルの高さを揃えたい<br>タイルの高さを揃えたい<br>タイルの高さを揃えたい<br></p>
83          </section>
84        </div>
85      </div>
86      <div class="col-6 col-md-5">
87        <div class="tile is-round is-bg-white">
88          <section class="tile-content">
89            <p class="text-center"><img src="img/icon.png" width="30px">常に二枚</p>
90            <p>コンテンツ<br>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
91          </section>
92        </div>
93      </div>
94    </div>
95  </section>
96
97  <!-- footer -->
98  <section class="footer padding">
99      <div class="container-fluid">
100        <div class="row">
101          <div class="col-md-4 footer-left">
102              <div class="footer-img">
103                  <img src="img/logo.png" alt="">
104              </div>
105              <hr class="light">
106              <div class="">
107                  <p><a href="#"><i class="fab fa-twitter fa-lg"></i></a>コンテンツ</p>
108              </div>
109              <div class="">
110                  <p><i class="fa fa-envelope"></i>コンテンツ</p>
111              </div>
112          </div>
113          <div class="col-md-4 footer-center">
114              <hr class="light">
115              <p><a class="text-decoration-none" href="#">コンテンツ</a></p>
116              <hr class="light">
117              <p><a href="#">コンテンツ</a></p>
118              <p><a href="#">コンテンツ</a></p>
119              <p><a href="#">コンテンツ</a></p>
120              <p><a href="#">コンテンツ</a></p>
121              <p><a href="#">コンテンツ</a></p>
122              <p><a href="#">コンテンツ</a></p>
123          </div>
124          <div class="col-md-4 footer-right">
125              <hr class="light">
126              <p>コンテンツ</p>
127              <hr class="light">
128              <p><a href="#">コンテンツ</a></p>
129              <p><a href="#">コンテンツ</a></p>
130              <p><a href="#">コンテンツ</a></p>
131              <p><a href="#">コンテンツ</a></p>
132              <p><a href="#">コンテンツ</a></p>
133              <p><a href="#">コンテンツ</a></p>
134          </div>
135        </div>
136      </div>
137  </section>
138  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
139  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
140    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
141    crossorigin="anonymous"></script>
142  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
143    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
144    crossorigin="anonymous"></script>
145  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
146    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
147    crossorigin="anonymous"></script>
148</body>
149<script>
150    $('.carousel').carousel({
151    interval: 6000,
152    pause: 'hover'
153  });
154</script>
155
156</html>
157

css
1body {
2    font-family: 'Noto Sans JP', sans-serif;
3    /* font-weight: lighter; */
4    background-color: white;
5    color: #000000;
6}
7a{
8    color: white;
9}
10.footer{
11    background-color: #070707;
12    color: white;
13}
14
15.navbar {
16    background-color: #000000;
17    color: #FFFFFF;
18}
19.fa-bars{
20    color: white;
21}
22.nav-link{
23    color: #FFFFFF !important;
24}
25
26.padding {
27    padding-bottom: 2rem;
28}
29
30.carousel-item {
31    height: 600px;
32    position: relative;
33}
34
35.carousel-item h1 {
36    font-size: 500%;
37    text-shadow: 1px 1px 15px #000;
38    font-color: #000000;
39}
40
41.carousel-image-1 {
42    background-image: url('img/image1.jpg');
43    background-size: cover;
44    background-position: center center;
45    position: relative;
46}
47
48.carousel-image-2 {
49    background-image: url('img/image2.jpg');
50    background-size: cover;
51    background-position: top right;
52    position: relative;
53}
54
55.carousel-image-3 {
56    background-image: url('img/image3.jpg');
57    background-size: cover;
58    background-position: center center;
59    position: relative;
60}
61
62.carousel-image-4 {
63    background-image: url('img/image4.jpg');
64    background-size: cover;
65    background-position: center center;
66    position: relative;
67}
68
69.caption {
70    position: absolute;
71    top: 50%;
72    left: 50%;
73    -ms-transform: translate(-50%,-50%);
74    -webkit-transform: translate(-50%,-50%);
75    transform: translate(-50%,-50%);
76    text-align: center;
77    color: #000000;
78    margin:0;
79    padding:0;
80}
81.btn{
82    background-color: red;
83    color: white;
84}
85.tile{
86    margin:1em;
87    padding:1em;
88    display: flex;
89    flex-direction: column;
90    justify-content: flex-start;
91    flex-wrap: wrap;
92    align-items: center;
93    background-color: #accaa8;
94}
95
96.tile_title{
97    font-size: large;
98    text-align: center;
99}
100
101.tile_title1{
102    font-size: large;
103    text-align: center;
104}
105
106.tile_title2{
107    font-size: large;
108    text-align: center;
109}
110
111.is-round{
112    border-radius: 10px;
113}
114
115.test{
116    display: flex;
117    flex-wrap: wrap;
118    align-content: stretch;
119}
120.tile-content{
121
122}
123.footer{
124    text-align: left !important;
125    color: #ffffff;
126    padding-top: 2rem;
127    padding-left: 4rem;
128    display: inline-block;
129    vertical-align: top;
130}
131
132.footer a{
133    color: #ffffff !important;
134    display: inline-block;
135    text-decoration: none !important;
136}
137.footer-left i {
138    background-color: #33383b;
139    color: #ffffff;
140    width: 38px;
141    height: 38px;
142    border-radius: 50%;
143    text-align: center;
144    line-height: 42px;
145    margin: 10px 15px;
146    vertical-align: middle;
147    display: inline-block;
148}
149.footer-img{
150    margin-bottom: 1rem;
151}
152hr.light{
153    border-top: 1px solid #d5d5d5;
154    width: 100%;
155    margin-top: .8rem;
156    margin-bottom: 1rem;
157    display: inline-block;
158
159}
160.footer-center{
161    text-align: center !important;
162}
163.footer-right{
164    text-align: center !important;
165}
166
167@media(max-width: 768px) {
168    .caption h1 {
169        font-size: 350%;
170    }
171    .caption .btn {
172        font-size: 95%;
173        padding: 8px 14px;
174    }
175}
176@media(max-width: 544px){
177
178    .caption h1 {
179        font-size: 250%;
180    }
181    .caption .btn{
182        font-size: 90%;
183        padding: 4px 8px;
184    }
185    .carousel-indicators{
186        display: none;
187    }
188    .footer-center{
189        margin-top: 2rem;
190    }
191    .footer-right{
192        margin-top: 2rem;
193    }
194    .copyright{
195    margin-top: 2rem;
196    }
197}
198

bootstrapで提供されている.text-decoration-noneやcss側でのtext-decoration: none;を試してみましたが効きません。解決方法を探しています

miyabi_pudding

2020/01/22 01:28 編集

当該箇所以外のHTMLも記載いただけませんか？もしかしたら、.footerの外側に、閉じタグがないa要素がいたりするかも。あとは、キャッシュクリアなど（CDN上含め）もお試しください。

Azami

2020/01/22 08:36

ご検討いただきありがとうございます。自力でも試したり探したりしていますがなかなか見つかりません... 大体の構造を引っ張ってきました。

kei344

2020/01/22 08:36

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。後から見た人から見て、現在ある回答が「無いコードに対しての指摘」になり、意味がわからなくなります。

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

回答3件

動くサンプル：https://jsfiddle.net/m53q2oLk/

問題が再現しませんでした。（bootstrap4公式CDNおよびbulma公式CDN使用、閉じタグが少ないのでそれは補いました）
よくあるのが、HTMLの構造がどこかで破綻している場合、その部分以降のレンダリングに影響があるため、意図した表示にならないことがあります。

投稿2020/01/21 17:56

kei344

総合スコア69407

自己解決

すみません、追記の仕方に配慮がなくてご指摘をいただきました。今後気をつけます
元のbulmaの方に、footerのaタグにはアンダーラインを引くという記述があったようです。クラス名を変えることで解決しました。ありがとうございました

投稿2020/01/23 04:57

Azami

総合スコア6

bootstrap とbulma、CDNについての経験がないので的外れな指摘かもしれませんが・・・

html
1<p><a class=text-decoration-none href="#">トップ</a></p>

の**classは=""とダブルクオーテーションで囲まないといけない**ですよ？

ただしい書き方

html
1<p><a class="text-decoration-none" href="#">トップ</a></p>

これを試してみてダメだったら、その旨書き込んでください。
私以外の有識者がレスを付けてくれるかもしれません。

投稿2020/01/21 17:51

nekora

総合スコア501

kei344

2020/01/21 18:08

属性値は「ダブルクオーテーションで囲まないといけない」わけではありませんよ。【HTML Standard 日本語訳】 https://momdo.github.io/html/syntax.html#attributes-2

nekora

2020/01/21 18:15

kei344さんがご指摘されているように</div>がひとつ足りてませんね。 htmlが崩れてるとCSSが機能しないことがあるのもkei344さんのご指摘通りです。

nekora

2020/01/21 18:17

え！？　そうなのですか・・・　当方いままでずっとその思い込みでいました。 bootstrap とbulma、CDNではOKなのかな。レス汚しすみませんでした。

kei344

2020/01/21 18:20

To: nekoraさん > bootstrap とbulma、CDNではOKなのかなすみません、何についての疑問でしょう。

nekora

2020/01/21 18:27

to:kei344様当方の知識不足でした。投稿を消せないので、恥を残すことになりますが、当方の投稿は無視してやってください。分かる範囲で少しでもお役に立てればとレスを付けましたが完全な恥さらしになってしまいました。改めて、レス汚しすみませんでした。m(_ _)m

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

text-decoration: none; が効かない

関連した質問