実現したいこと
navの背景色を白くしたい。
前提
webの勉強のためにサイトを作成しています。
navの背景色を変えようとしたところ、変わらず困っています。
発生している問題・エラーメッセージ
デベロッパーツールなどにエラーは出ていません。
該当のソースコード
index.html(一部)
1<section class="hero relative"> 2 <nav class="fixed top-[0.5rem] left-[0.5rem] h-[4rem] z-10 bg-white"> 3 <div class="flex justify-between"> 4 <img 5 class="fixed top-[0.5rem] left-[0.5rem] h-[4rem] w-auto" 6 src="./images/logo.png" 7 alt="logo" 8 /> 9 <div> 10 <ul class="fixed flex top-[1rem] right-[0.5rem] z-10"> 11 <a href="#"><li class="text-2xl me-[1.5rem]">Policy</li></a> 12 <a href="#"><li class="text-2xl me-[1.5rem]">Services</li></a> 13 <a href="#"><li class="text-2xl me-[1.5rem]">Contact</li></a> 14 <a href="#"><li class="text-2xl me-[1.5rem]">Reserve</li></a> 15 </ul> 16 </div> 17 </div> 18 </nav> 19 <div class="swiper-container z-0"> 20 <div class="swiper-wrapper"> 21 <div class="swiper-slide"> 22 <div class="slide-img"> 23 <img 24 class="w-[100vw] h-[100vh] object-cover" 25 src="./images/hero1.jpg" 26 alt="diving" 27 /> 28 </div> 29 </div> 30 <div class="swiper-slide"> 31 <div class="slide-img"> 32 <img 33 class="w-[100vw] h-[100vh] object-cover" 34 src="./images/hero2.jpg" 35 alt="diving" 36 /> 37 </div> 38 </div> 39 <div class="swiper-slide"> 40 <div class="slide-img"> 41 <img 42 class="w-[100vw] h-[100vh] object-cover" 43 src="./images/hero3.jpg" 44 alt="diving" 45 /> 46 </div> 47 </div> 48 <div class="swiper-slide"> 49 <div class="slide-img"> 50 <img 51 class="w-[100vw] h-[100vh] object-cover" 52 src="./images/hero4.jpg" 53 alt="diving" 54 /> 55 </div> 56 </div> 57 </div> 58 </div> 59</section>
試したこと
・CSSファイルにbackground: white;を指定してもダメでした。
・text-red-500にすると、文字の色は変わります。
・ulにbg-whiteにすると、ul部分だけは白くなります。
・npm run devは再起動してみました。
・キャッシュの削除してもダメでした。
補足情報(FW/ツールのバージョンなど)
ブラウザはchromeです。

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/06/06 06:35
2023/06/07 16:15