質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

tailwindcss

tailwindcssとは、Webサイト・Webアプリケーションを作成するためのCSSフレームワークの一つ。ユーティリティファーストな点が特徴です。汎用的なクラスが多数用意されており、独自のデザインを自由に組み立てることができます。

Q&A

解決済

1回答

269閲覧

navの背景色が変化しない

ratezou

総合スコア64

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

tailwindcss

tailwindcssとは、Webサイト・Webアプリケーションを作成するためのCSSフレームワークの一つ。ユーティリティファーストな点が特徴です。汎用的なクラスが多数用意されており、独自のデザインを自由に組み立てることができます。

0グッド

0クリップ

投稿2023/06/06 05:07

実現したいこと

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です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

navの中身がないため、width0になっているのでは。
right-0などとして幅を持たせればいいかもしれませんが、そもそも中身がない要素が必要なのかどうかを考えて直してみてもいいかもしれないですね。

投稿2023/06/06 06:33

編集2023/06/06 06:42
Lhankor_Mhy

総合スコア36254

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2023/06/06 06:35

なお、tailwindはほとんど触ったことがないので、この書き方がお作法にかなうのかどうかはわからないです。
ratezou

2023/06/07 16:15

w-[100vw]を追加したところ、背景が白くなりました。 勉強になりました。 感謝です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問