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;を試してみましたが効きません。解決方法を探しています
回答3件
あなたの回答
tips
プレビュー