Q&A
下記変更してみてはいかがでしょうか、、
ul {
width: 100%; /*←セミコロンが抜けています。*/
height: 80px;
display: flex;
justify-content: flex-end;
align-items: center;
}
以下の様に設計中、CSSに関する問題が発生しました。
ページfooter部分に縦並びリストを括ったブロックを４つ作って、並べようとしているのですが、最初の縦並びリストを作っている段階で、
横並びになったり太字表示になってしまいます。
headerの方で使用したCSSが適用されているためですが、セレクタを新たに指定しても（footer li｛｝など)優先されません。
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>今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。</h2><!--<h2>～<h6>のヘッディングコンテンツを使う際は、<article>、<aside>、<section>のいずれかが親であり、親の最初の子である必要があります。--> 40 <p id="del"><span></span><span></span></p> 41 <script> 42 //#delをクリックでメッセージ削除 43 const del = document.getElementById('del'); 44 const hidden = document.getElementById('message'); 45 del.addEventListener('click', function() { 46 hidden.style.display = 'none'; 47 }); 48 </script> 49 </section> 50 </div> 51 52 <div class="middle"> 53 <h1>旅を贈ろう。</h1> 54 <h3>Air bnbギフトカードで、世界をぐんと身近に</h3> 55 <input type="submit" value="ギフトカードを登録"> 56 </div> 57 58 </main> 59 60 <div class="message-container"> 61 <h2>いつも完璧な贈り物</h2> 62 <div class="iconwraper"> 63 <div class="inner1"> 64 <i class="far fa-envelope fa-3x mailicon"></i> 65 <p>簡単に使える</p> 66 <p class="explain">ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p> 67 </div> 68 69 70 <div class="inner2"> 71 <i class="fas fa-stopwatch fa-3x mailicon"></i> 72 <p>有効期限なし</p> 73 <p class="explain">Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p> 74 </div> 75 76 <div class="inner3"> 77 <i class="fas fa-globe-europe fa-3x mailicon"></i> 78 <p>忘れられない旅</p> 79 <p class="explain">お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p> 80 </div> 81 </div> 82 83 <div class="present"> 84 <img src="https://a0.muscache.com/airbnb/gift_credit_v2/Home Page/Present Icon/Present Icon.png" alt=""> 85 <h2>ギフトカードを貰ったら...</h2> 86 <h3>ログインあるいは、利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</h3> 87 <input type="submit" value="ギフトカードを登録する"> 88 <p>Air bnbギフトカードの仕組みは？</p> 89 </div> 90 91 <footer> 92 <div class="list info1">Air bnb 93 <ul> 94 <li><a>採用情報</a></li> 95 <li><a>プレス</a></li> 96 <li><a>ポリシー</a></li> 97 <li><a>ヘルプ</a></li> 98 <li><a>ダイバーシティ＆ビロンギング</a></li> 99 <li><a>企業情報</a></li> 100 </ul> 101 </div> 102 103 <div class="list info2">スタッフのおすすめ 104 <ul> 105 <li><a></a></li> 106 <li><a></a></li> 107 <li><a></a></li> 108 <li><a></a></li> 109 </ul> 110 </div> 111 112 <div class="list info3">ホスティング 113 <ul> 114 <li><a></a></li> 115 <li><a></a></li> 116 <li><a></a></li> 117 <li><a></a></li> 118 </ul> 119 </div> 120 121 <div class="list info4"> 122 <ul> 123 <li><a></a></li> 124 <li><a></a></li> 125 <li><a></a></li> 126 <li><a></a></li> 127 </ul> 128 </div> 129 130 131 132 </footer> 133 134 135 136 137 <!-- Optional JavaScript --> 138 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 139 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 140 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 141 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 142</body> 143</html> 144 145
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 height: 80px; 39 display: flex; 40 justify-content: flex-end; 41 align-items: center; 42} 43 44ul li { 45 padding-left: 5px; 46 padding-right: 30px; 47 font-weight: bold; 48} 49 50a { 51 color: black; 52 text-decoration: none; 53} 54 55 56a:hover { 57 color: black; 58 text-decoration: none; 59 border-bottom: 2px solid black; 60 padding-bottom: 32px; 61} 62 63main { 64 background-image : url("../pic.jpg"); 65 background-size: cover; 66 height : 600px; 67 width: 100%; 68 color: white; 69 position: relative; 70} 71 72main div:nth-child(1) { 73 width: 100%; 74 height: 40px; 75 background: #C2E4E7; 76} 77 78main div:nth-child(1) h2 { 79 color : black; 80 text-align: center; 81 padding-top: 10px; 82 font-size : 15px; 83} 84 85 86 87main .middle { 88 position: absolute; 89 padding-left: 20%; 90 padding-top: 15%; 91} 92 93 94main .middle h1 { 95 font-size: 60px; 96} 97 98main .middle h3 { 99 padding-top: 10px; 100 padding-bottom: 30px; 101} 102 103main .middle input { 104 padding: 10px 22px; 105 border-radius: 5px; 106 background-color: white; 107 font-weight: bold; 108} 109 110.message-container { 111 height : 350px; 112 width : 100%; 113} 114 115 116.message-container h2 { 117 font-size: 30px; 118 text-align: center; 119 padding: 30px; 120 font-weight: bold; 121} 122 123.iconwraper { 124 position: relative; 125 padding-left: 200px; 126 padding-right: 200px; 127 padding-bottom: 30px; 128} 129 130.mailicon { 131 color : green; 132 padding-bottom: 20px; 133} 134 135.mailicon2 { 136 color : grey; 137 padding-bottom: 20px; 138} 139 140.inner1,.inner2,.inner3 { 141 height : auto; 142 text-align: center; 143 width : 33%; 144 display: inline-block; 145} 146 147.message-container p { 148 font-size :18px; 149 font-weight: bold; 150 padding-right: 15px; 151 padding-left: 15px; 152} 153 154.message-container .explain { 155 font-size: 18px; 156 font-weight: none; 157 opacity: 0.5; 158 padding-top: 5%; 159} 160 161.present { 162 background-color: #007a87; 163 height: 420px; 164 padding-top : 40px; 165 text-align: center; 166} 167 168.present h2{ 169 color: white; 170 padding-bottom: 15px; 171} 172 173.present h3{ 174 color: white; 175 font-size: 20px; 176 opacity: 0.8; 177} 178 179.present input { 180 background-color: red; 181 padding : 10px 28px; 182 border-radius: 5px; 183 color : white; 184 font-weight: bold; 185 margin-top : 30px; 186} 187 188.present p { 189 color : white; 190 opacity :0.7; 191 font-weight: normal; 192 font-size: 15px; 193 margin-top: 10px; 194} 195 196 197footer .list ul { 198 width: 100% 199 height: 80px; 200 align-items: center; 201} 202 203footer .list ul li { 204 padding-left: 5px; 205 padding-right: 30px; 206} 207 208footer .list a { 209 color: black; 210 text-decoration: none; 211} 212 213
回答2件
0
詳細度
CSSは下部のものを優先するはずですが、何が間違っているのでしょうか？
いいえ。
制作者スタイルシートにおいては、詳細度の高いセレクタが優先されます。
後から書いたセレクタが優先されるのは「詳細度が同値の場合」に限定されます。
詳細度の計算
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.cssより引用(詳細度 = 0-4-1)。
CSS
1a:not([href]):not([tabindex]) { 2 color: inherit; 3 text-decoration: none; 4}
css/index.cssより引用(詳細度 = 0-1-2)。
CSS
1footer .list a { 2 color: black; 3 text-decoration: none; 4}
詳細度がより高い、前者のセレクタが優先されます。
Re: ShinYam さん
投稿2019/05/05 09:40
総合スコア18162
詳細度の指摘は2回目でした。
https://teratail.com/questions/181055#reply-269487
回答ありがとうございます。
大変失礼しました。
もう一度、いただいたリンクをしっかり見て理解したいと思います。
お手数おかけして申し訳ございません。
0
ベストアンサー
ul {display: flex} で全てのリスト要素を横並びにしてしまっており、
それを上書きで縦並びに変更していないのでヘッダーだろうがフッターだろうが
全てのリスト要素は横並びになる状態です。
縦並びにしたければulのdisplay:flexを解除するか、
flex-direction:columnで縦並びに変更するなど、何らかの上書き処理が必要です。
（ul要素で横並びにしているので、liに何かしても無駄です）
そもそも論として、一般的な要素（ul等）に直接特定のパーツ用のスタイルを設定するのは
このような問題が頻発するのでやめた方が良いです。
対象となる要素に直接classをつけるか、せめて親要素にclassをつけて子孫セレクタにするか
どちらかにすることをおすすめします。
投稿2019/05/05 09:12
総合スコア3763
わかりやすい回答ありがとうございました。
CSSの下の方に、ul {display: block}を記述し解除を試みましたが、そうすると結局上のヘッダーに記述したulも解除されてしまうのですね。
おっしゃるとおり、ulに直接指定したのがまずかったようです...
あなたの回答
tips
プレビュー
