Q&A
下記、HTML,CSSのfooter部分にあるlistにおいて、hover時に文字数ぴったりのアンダーラインが出るようにしたいのですが、
自分のやり方ではカーソルを合わせると文字がピクリと動いてしまいます。
解決方法を教えていただけないでしょうか？
また、併せてアラートメッセージを×ボタンを押すことで非表示に出来る機能を実装したいのですが、現在の記述を活かして作るにはどの様な方法が良いでしょうか？
JqueryかCSSで実装出来るのかなとは想像していますが、どうなのでしょうか。
よろしくお願いいたします。
HTML
1コード 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="utf-8";> 6 <title>Airbnbcopy</title> 7 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 8 <!-- Required meta tags --> 9 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 10 11 <!-- Bootstrap CSS --> 12 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 13 <link rel="stylesheet" href="css/index.css" /> 14 15 </head> 16 17 <body> 18 <header> 19 <div class="header-container"> 20 <div class="menu-box"> 21 <div class="logo"></div> 22 <div class="search"></div> 23 </div> 24 25 <nav> 26 <ul> 27 <li><a href="#">ホストをはじめる</a></li> 28 <li><a href="#">ヘルプ</a></li> 29 <li><a href="#">登録する</a></li> 30 <li><a href="#">ログイン</a></li> 31 </ul> 32 </nav> 33 </div> 34 </header> 35 36 <main> 37 <div><!-- nth-child(1) --> 38 <section id="message"> 39 <h2><i class="fab fa-speakap fa-2x"></i>今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。<button class="close" aria-hidden="true" type="button" data-dismiss="alert">×</button></h2><!--<h2>～<h6>のヘッディングコンテンツを使う際は、<article>、<aside>、<section>のいずれかが親であり、親の最初の子である必要があります。--> 40 <script> 41 //#delをクリックでメッセージ削除 42 const del = document.getElementById('del'); 43 const hidden = document.getElementById('message'); 44 del.addEventListener('click', function() { 45 hidden.style.display = 'none'; 46 }); 47 </script> 48 </section> 49 </div> 50 51 <div class="middle"> 52 <h1>旅を贈ろう。</h1> 53 <h3>Air bnbギフトカードで、世界をぐんと身近に</h3> 54 <input type="submit" value="ギフトカードを登録"> 55 </div> 56 57 </main> 58 59 <div class="message-container"> 60 <h2>いつも完璧な贈り物</h2> 61 <div class="iconwraper"> 62 <div class="inner1"> 63 <i class="far fa-envelope fa-3x mailicon"></i> 64 <p>簡単に使える</p> 65 <p class="explain">ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p> 66 </div> 67 68 69 <div class="inner2"> 70 <i class="fas fa-stopwatch fa-3x mailicon"></i> 71 <p>有効期限なし</p> 72 <p class="explain">Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p> 73 </div> 74 75 <div class="inner3"> 76 <i class="fas fa-globe-europe fa-3x mailicon"></i> 77 <p>忘れられない旅</p> 78 <p class="explain">お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p> 79 </div> 80 </div> 81 82 <div class="present"> 83 <img src="https://a0.muscache.com/airbnb/gift_credit_v2/Home Page/Present Icon/Present Icon.png" alt=""> 84 <h2>ギフトカードを貰ったら...</h2> 85 <h3>ログインあるいは、利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</h3> 86 <input type="submit" value="ギフトカードを登録する"> 87 <p>Air bnbギフトカードの仕組みは？</p> 88 </div> 89 90 <footer> 91 <div class="listwrapper"> 92 <div class="list"> 93 <ul> 94 <li class="title">Air bnb</li> 95 <li class="empty"></li> 96 <li class="lists"><a>採用情報</a></li> 97 <li class="lists"><a>プレス</a></li> 98 <li class="lists"><a>ポリシー</a></li> 99 <li class="lists"><a>ヘルプ</a></li> 100 <li class="lists"><a>ダイバーシティ＆ビロンギング</a></li> 101 <li class="lists"><a>企業情報</a></li> 102 </ul> 103 </div> 104 105 <div class="list"> 106 <ul> 107 <li class="title">スタッフのおすすめ</li> 108 <li class="empty"></li> 109 <li class="lists"><a>信頼＆安全</a></li> 110 <li class="lists"><a>お友達紹介クーポン</a></li> 111 <li class="lists"><a>Airbnb Citizen</a></li> 112 <li class="lists"><a>出張</a></li> 113 <li class="lists"><a>ガイドブック</a></li> 114 <li class="lists"><a>Airbnbmag</a></li> 115 </ul> 116 </div> 117 118 <div class="list"> 119 <ul> 120 <li class="title">ホスティング</li> 121 <li class="empty"></li> 122 <li class="lists"><a>ホストになる理由</a></li> 123 <li class="lists"><a>おもてなしの心</a></li> 124 <li class="lists"><a>ホストの責任</a></li> 125 <li class="lists"><a>コミュニティセンター</a></li> 126 <li class="lists"><a>体験を掲載</a></li> 127 <li class="lists"><a>オープンホーム</a></li> 128 </ul> 129 </div> 130 131 <div class="lists"> 132 <ul> 133 <li class="lists"><i class="fab fa-facebook-f fa-lg"></i><i class="fab fa-twitter fa-lg"></i><i class="fab fa-instagram fa-lg"></i></li> 134 <li class="empty"></li> 135 <li class="lists"><a>利用規約</a></li> 136 <li class="lists"><a>プライバシー</a></li> 137 <li class="lists"><a>サイトマップ</a></li> 138 </ul> 139 </div> 140 </div> 141 142 143 </footer> 144 145 146 147 148 <!-- Optional JavaScript --> 149 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 150 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 151 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 152 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 153</body> 154</html> 155
CSS
1コード 2 3@charset "UTF-8"; 4 5/* RESET CSS */ 6html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, small, ul, li, article, aside, section, footer, header, nav , input { 7 margin: 0; 8 padding: 0; 9 border: 0; 10 font: inherit; 11 vertical-align: baseline; 12 list-style-type: none; 13} 14 15header .header-container { 16 height : 80px; 17 width : 100%; 18 background-color: white; 19 position : relative; 20} 21 22header .menu-box { 23 height : 80px; 24 width : 40%; 25 background-color: white; 26} 27 28nav { 29 width: 60%; 30 position: absolute; 31 top: 0; 32 right: 0; 33 padding-top: 25px; 34} 35 36ul { 37 width: 100%; 38 display: flex; 39 justify-content: flex-end; 40 align-items: center; 41} 42 43ul li { 44 padding-left: 5px; 45 padding-right: 30px; 46 font-weight: bold; 47} 48 49a { 50 color: black; 51 text-decoration: none; 52} 53 54 55a:hover { 56 color: black; 57 text-decoration: none; 58 border-bottom: 2px solid black; 59 padding-bottom: 32px; 60} 61 62main { 63 background-image : url("../pic.jpg"); 64 background-size: cover; 65 height : 650px; 66 width: 100%; 67 color: white; 68 position: relative; 69} 70 71.close { 72 margin-top: 10px; 73 margin-right: 10px; 74} 75 76main div:nth-child(1) { 77 width: 100%; 78 height: 50px; 79 background: #C2E4E7; 80} 81 82main div:nth-child(1) h2 { 83 color : black; 84 text-align: center; 85 padding-top: 5px; 86 font-size : 15px; 87 font-weight: normal; 88} 89 90.fa-speakap { 91 padding: 0 10px; 92} 93 94main .middle { 95 position: absolute; 96 padding-left: 20%; 97 padding-top: 20%; 98} 99 100 101main .middle h1 { 102 font-size: 46px; 103 font-weight: bold; 104} 105 106main .middle h3 { 107 padding-top: 10px; 108 padding-bottom: 30px; 109 font-size: 18px; 110} 111 112main .middle input { 113 padding: 13px 22px; 114 border-radius: 5px; 115 background-color: white; 116 font-weight: bold; 117} 118 119.message-container { 120 height : 500px; 121 width : 100%; 122} 123 124 125.message-container h2 { 126 font-size: 30px; 127 text-align: center; 128 padding: 40px; 129 font-weight: bold; 130} 131 132.iconwraper { 133 position: relative; 134 padding-left: 200px; 135 padding-right: 200px; 136 padding-bottom: 75px; 137} 138 139.mailicon { 140 color : green; 141 padding-bottom: 20px; 142} 143 144.mailicon2 { 145 color : grey; 146 padding-bottom: 20px; 147} 148 149.inner1,.inner2,.inner3 { 150 height : auto; 151 text-align: center; 152 width : 33%; 153 display: inline-block; 154 vertical-align: top; 155} 156 157.message-container p { 158 font-size :16px; 159 font-weight: bold; 160 padding-right: 15px; 161 padding-left: 15px; 162} 163 164.message-container .explain { 165 font-size: 16px; 166 opacity: 0.5; 167 padding-top: 5%; 168} 169 170.present { 171 background-color: #007a87; 172 height: 440px; 173 padding-top : 45px; 174 text-align: center; 175} 176 177.present h2{ 178 color: white; 179 padding-top: 10px; 180 padding-bottom: 15px; 181} 182 183.present h3{ 184 color: white; 185 font-size: 20px; 186 187} 188 189.present input { 190 background-color: red; 191 padding : 10px 28px; 192 border-radius: 5px; 193 color : white; 194 font-weight: bold; 195 margin-top : 60px; 196} 197 198.present input:hover { 199 color: #fff; 200 opacity :0.7; 201} 202 203.present p { 204 color : white; 205 opacity :0.7; 206 font-weight: normal; 207 font-size: 15px; 208 margin-top: 20px; 209} 210 211footer { 212 margin-top: 60px; 213} 214 215.listwrapper { 216 display : flex; 217 justify-content: center; 218} 219 220.empty { 221 height: 15px; 222 223} 224 225footer ul { 226 display: inline-block; 227} 228 229footer ul li { 230 font-size: 14px; 231 font-weight: normal; 232} 233 234.title { 235 font-weight: bold; 236} 237 238.fa-facebook-f,.fa-twitter,.fa-instagram { 239 padding-right: 20px; 240} 241 242.list { 243 margin: 0 55px; 244 color: black; 245} 246 247.lists a:hover { 248 text-decoration: none; 249 border-bottom: 1px solid grey; 250 display: inline-block; 251 padding: 0px; 252} 253 254.lists { 255 color: grey; 256 font-weight: bold; 257} 258
回答1件
0
ベストアンサー
CSS
1.lists a { 2 border-bottom: 1px solid rgba(0,0,0,0); 3}
投稿2019/05/06 14:11
総合スコア69400
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/07 12:09
2019/05/07 12:59
2019/05/07 14:55