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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1117閲覧

HTML,CSSコーディングの質問です

yuuun

総合スコア8

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/04/06 05:34

CSSの最後の部分のbackground-colorとcolorだけがどうしても反映されません。
どこかのコードがおかしいのでしょうか?
詳しい方回答お願いします。

HTML

1<header class="header"> 2 <h1 class="logo"> 3 <a href="/">SANPLE SITE</a> 4 </h1> 5 <nav class="global-nav"> 6 <ul> 7 <li class="nav-item active"><a href="#">HOME</a></li> 8 <li class="nav-item"><a href="#">ABOUT</a></li> 9 <li class="nav-item"><a href="#">NEWS</a></li> 10 <li class="nav-item"><a href="#">TOPICS</a></li> 11 <li class="nav-item"><a href="#">DOCS</a></li> 12 <li class="nav-item"><a href="#">BLOG</a></li> 13 </ul> 14 </nav> 15 </header> 16``````CSS 17.global-nav{ 18 margin-top: 15px; 19 text-align:center; 20} 21.global-nav .nav-item{ 22 display:inline-block; 23 margin: 0 10px; 24} 25.global-nav .nav-item a{ 26 display: inline-block; 27 width: 100px; 28 height: 30px; 29 line-height: 30px; 30 text-align: center; 31 border-radius: 8px; 32 color: #666; 33 font-size: 13px; 34 letter-spacing: 1px; 35 transition: 0.15s; 36} 37.global-nav .nav-item.active a 38.global-nav .nav-item a:hover{ 39 background-color: #d03c56; 40 color: #fff; 41}

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

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

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

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

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

guest

回答3

0

ベストアンサー

css

1.global-nav .nav-item.active a 2.global-nav .nav-item a:hover{ 3 background-color: #d03c56; 4 color: #fff; 5}

このセレクタは2行になっていますが、ひとつながりのセレクタとなっているので、「.global-nav .nav-item.active a .global-nav .nav-item a:hover」という深い階層にあるものを意味することになってしまいます。

複数のセレクタを並列に指定したい場合は、コンマで区切りましょう。

投稿2018/04/06 05:38

編集2018/04/06 05:39
maisumakun

総合スコア145121

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

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

yuuun

2018/04/06 07:00

解決できました!ありがとうございます!
guest

0

カンマが抜けています。

.global-nav .nav-item.active a,
.global-nav .nav-item a:hover{
background-color: #d03c56;
color: #fff;
}

投稿2018/04/06 05:39

TSUTAYA

総合スコア16

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

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

yuuun

2018/04/06 07:01

解決できました!ありがとうございました!
guest

0

.global-nav .nav-item.active a

の後ろに「,」が必要なのでは?

投稿2018/04/06 05:39

yambejp

総合スコア114572

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

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

yuuun

2018/04/06 07:01

解決できました!ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問