Q&A
エディターはSublime Txtを使っています！なるほど！エディター変えてみます。ありがとうございました。
前提
HTMLとCSSでWebサイトを作っています。
発生している問題・エラーメッセージ
h2タグで書いた「オプション検索」の部分だけCSSが効かず困っています。原因はなんでしょうか？よろしくお願いいたします。
該当のソースコード
searchFromMakers.html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 6 7<title>searchFromMakers</title> 8<style> 9#searchFromMakers{ 10 display: flow-root;/*prevent margin offset*/ 11 box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.5); 12 width: 415px; 13} 14#searchFromMakers h1{ 15 margin: 0; 16 margin-left: 15px; 17 color: rgb(121, 121, 121, 0.5); 18} 19.options{ 20 display: flex; 21 padding-left: 10px; 22 margin-top: 10px; 23} 24.options p{ 25 margin: 0; 26 padding-left: 10px; 27} 28.options select{ 29 margin-left: 5px; 30 color: rgb(121, 121, 121, 0.5);/*https://note.spiqa.design/select-color/#option%E3%81%ABCSS%E3%81%AF%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84*/ 31} 32#showLine{ 33 display: flex; 34 background-color: rgb(121, 121, 121, 0.1); 35 padding-left: 10px; 36 margin-top: 20px; 37} 38.carType_mini{ 39 width: 122px; 40 margin: 5px; 41} 42.carType_mini img{ 43 border: 1px solid #797979; 44} 45.lower_mini{ 46 display: flex; 47 justify-content: space-between; 48 height: 20px; 49} 50.lower_mini p{ 51 width: 100%; 52 margin: 0; 53 font-size: 12px; 54} 55input[type=checkbox] { 56display: none; 57} 58.checkbox{ 59 box-sizing: border-box; 60 display: inline-block; 61 margin-right: 10px; 62 position: relative; 63 width: 15px; 64 cursor: pointer; 65} 66.checkbox::before { 67 border: 1px solid #797979; 68 content: ''; 69 display: block; 70 height: 16px; 71 left: 5px; 72 margin-top: -8px; 73 position: absolute; 74 top: 50%; 75 width: 16px; 76} 77.checkbox::after { 78 border-right: 3px solid #ed7a9c; 79 border-bottom: 3px solid #ed7a9c; 80 content: ''; 81 display: block; 82 height: 9px; 83 left: 10px; 84 margin-top: -7px; 85 opacity: 0; 86 position: absolute; 87 top: 50%; 88 transform: rotate(45deg); 89 width: 5px; 90} 91input[type=checkbox]:checked + .checkbox::after { 92 opacity: 1; 93} 94} 95 96#optionSearch h2{/*0723 ここが効いていない*/ 97margin: 0; 98border-left: 5px solid red; 99padding-left: 10px; 100color: red; 101} 102select{ 103cursor: pointer; 104} 105.options, .mission{/*同じだから消せる*/ 106 display: flex; 107 padding-left: 10px; 108 margin-top: 10px; 109} 110.options p{/*同じだから消せる*/ 111 margin: 0; 112 padding-left: 10px; 113} 114.options select{/*同じだから消せる*/ 115 margin-left: 5px; 116 color: rgb(121, 121, 121, 0.5);/*https://note.spiqa.design/select-color/#option%E3%81%ABCSS%E3%81%AF%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84*/ 117} 118.mission p{/*同じだから消せる*/ 119 padding-left: 10px; 120} 121 122/*toggle switch*/ 123.toggle { 124 position: relative; 125 width: 90px; 126 height: 24px; 127 margin-top: 15px; 128 margin-left: 15px; 129 user-select: none; 130 cursor: pointer; 131} 132.toggle input[type=checkbox] { 133 display: none; 134} 135.toggle span { 136 position: absolute; 137 top: 7px; 138 font-size: 12px; 139 font-weight: bold; 140 line-height: 1; 141 -webkit-transition: 0.2s ease-out; 142 transition: 0.2s ease-out; 143} 144.toggle span:nth-of-type(1) { 145 right: 16px; 146 color: rgba(0, 0, 0, 0.175); 147} 148.toggle span:nth-of-type(2) { 149 left: 16px; 150 color: white; 151 z-index: 2; 152} 153.toggle.checked span:nth-of-type(1) { 154 right: 15px; 155 color: white; 156 z-index: 2; 157} 158.toggle.checked span:nth-of-type(2) { 159 left: 15px; 160 color: rgba(0, 0, 0, 0.175); 161} 162.toggle:before { 163 content: ""; 164 position: absolute; 165 top: 0; 166 left: 0; 167 width: 100%; 168 height: 100%; 169 border-radius: 50px; 170 display: block; 171 background: #FFF; 172 -webkit-transition: 0.2s ease-out; 173 transition: 0.2s ease-out; 174 border: 1px solid rgb(121, 121, 121, 0.5); 175} 176.toggle:after { 177 content: ""; 178 position: absolute; 179 width: 45px; 180 height: 24px; 181 display: block; 182 border-radius: 50px; 183 background: #336666; 184 box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.3); 185 -webkit-transition: 0.2s ease-out; 186 transition: 0.2s ease-out; 187 margin-top: 1px;/*prevent the effect of border*/ 188} 189.toggle.checked:before { 190 background: #FFF; 191} 192.toggle.checked:after { 193 left: 46px;/*moving*/ 194 box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.5); 195} 196.searchButton{/*同じから消す*/ 197margin: 0 auto;/*center the box*/ 198margin-bottom: 20px; 199text-align: center;/*center the a elements a*/ 200background: #336666; 201padding-top: 10px; 202width: 50%; 203height: 35px; 204} 205.searchButton a{/*同じから消す*/ 206text-decoration: none; 207color: #FFF; 208} 209.searchButton img{/*同じから消す*/ 210width: 15px; 211height: 15px; 212margin-left: 10px; 213} 214 215@media (min-width: 1025px) {/*PC版*/ 216} 217 218 219@media screen and (max-width:1024px) {/*スマホ・タブレット版*/ 220} 221 222</style> 223 224</head> 225<body> 226<div id="searchFromMakers"> 227 <h1>メーカから探す</h1> 228 229 <div class="options"> 230 <p>メーカー</p> 231 232 <select name="maker" onchange="changeColor(this)"> 233 <option class="example1" value="">日産</option> 234 <option id="nissan">日産</option> 235 <option id="toyota">トヨタ</option> 236 <option id="matsuda">マツダ</option> 237 <option id="daihatu">ダイハツ</option> 238 <option id="suzuki">スズキ</option> 239 </select> 240 <p>車種</p> 241 <select name="model" onchange="changeColor(this)"> 242 <option id="example3" value="">軽自動車</option> 243 <option id="1500">軽自動車</option> 244 <option id="2000">コンパクトカー</option> 245 <option id="3000">ミニバン</option> 246 <option id="1500">セダン</option> 247 <option id="2000">クーペ</option> 248 <option id="3000">ステーションワゴン</option> 249 <option id="1500">SUV・クロカン</option> 250 <option id="2000">オープンカー</option> 251 <option id="3000">ワンボックス</option> 252 </select> 253 </div> 254 255 <div id="showLine"> 256 <div class="carType_mini"> 257 <img src="assets/img/nissan_dayz_roox.png"> 258 <div class="lower_mini"> 259 <p>デイズ ルークス</p> 260 <input type="checkbox" id="days_roox_check" name="check"><label for="days_roox_check" class="checkbox"></label> 261 </div> 262 </div> 263 <div class="carType_mini"> 264 <img src="assets/img/nissan_dayz.png"> 265 <div class="lower_mini"> 266 <p>デイズ</p> 267 <input type="checkbox" id="dayz_check" name="check"><label for="dayz_check" class="checkbox"></label> 268 </div> 269 </div> 270 <div class="carType_mini"> 271 <img src="assets/img/nissan_clipper.png"> 272 <div class="lower_mini"> 273 <p>クリッパー</p> 274 <input type="checkbox" id="clipper_check" name="check"><label for="clipper_check" class="checkbox"></label> 275 </div> 276 </div> 277 </div> 278 279 <div id="optionSearch"> 280 <h2>オプション検索</h2> 281 <div class="options"> 282 <p>排気量 </p> 283 <select name="displacement" onchange="changeColor(this)"> 284 <option id="example2" value="">660CC</option> 285 <option id="1500">1500CC</option> 286 <option id="2000">2000CC</option> 287 <option id="3000">3000CC</option> 288 </select> 289 </div> 290 <div class="mission"> 291 <p>AT/MT</p> 292 <div class="toggle"> 293 <input type="checkbox" name="check" /> 294 <span>MT</span> 295 <span>AT</span> 296 </div> 297 </div> 298 </div> 299 300 <div class="searchButton"> 301 <a href="history.html"><span>この条件で探す</span><img src="assets/img/basicArrow_#cccccc.png" alt=">"/></a> 302 </div> 303</div> 304 305<script type="text/javascript"> 306'use strict'; 307 308//options 309function changeColor(hoge){ 310 if( hoge.value == 0 ){ 311 hoge.style.color = ''; 312 }else{ 313 hoge.style.color = 'black'; 314 } 315} 316 317//toggle switch 318$(".toggle").on("click", function() { 319 $(".toggle").toggleClass("checked"); 320 if(!$('input[name="check"]').prop("checked")) { 321 $(".toggle input").prop("checked", true); 322 } else { 323 $(".toggle input").prop("checked", false); 324 } 325}); 326 327</script> 328</body> 329 330</html>
試したこと
h2タグをpタグに変更してみましたが、やはりCSSが効かないようです。
回答2件
0
ベストアンサー
css
1input[type=checkbox]:checked + .checkbox::after { 2 opacity: 1; 3} 4} /* ←これのせいでは */
投稿2022/07/23 08:21
総合スコア36115
0
直前の } が余分。
css
1input[type=checkbox]:checked + .checkbox::after { 2 opacity: 1; 3} 4} /* これが余分 これを削除すれば効くようになります */ 5 6#optionSearch h2{/*0723 ここが効いていない*/
エディターは何を使ってますか。プログラミング用のエディターを使うと間違いを指摘してくれますので、このような間違いはすぐに気づきます。
私は、VSCode を使ってますが、これだと下図のように表示されます。
投稿2022/07/23 08:20
編集2022/07/23 08:27
総合スコア33715
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。