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

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

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

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

Q&A

解決済

1回答

4573閲覧

ヘッダーの背景色が変わらない

Pin2

総合スコア14

CSS

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

0グッド

0クリップ

投稿2019/03/30 23:48

編集2019/03/31 01:31

ヘッダーの背景色が変わりません。

目標はこの形にしたいです。
目標

現在はこのような形になっています(わかりやすするためにボーダーライン付き)
現在

ヘッダー全ての背景色をグレーに変えたいです。

<!doctype html> <html lang="jp"> <meta charset="utf-8" name="description"> <meta name="keywords" content="Sushi,osaka"> <style> header{ background-color: black; } .header-logo{ float: left; font-size: 20px; padding: 20px; background-color: gray; } </style> <title>Sushi Japan</title> </head> <body> <header> <div class="header"> <div class="header-logo">Sushi Japan</div> <div class="header-list"> <ul> <li><a href="" target="_blank">TOP</a></li> <li><a href="" target="_blank">FIRST VISIT</a></li> <li><a href="" target="_blank">PRICE</a></li> <li><a href="" target="_blank">LOCATION</a></li> <li><a href="" target="_blank">APPONTMENTS</a></li> </ul> </div> </div> </header> </body> </head>

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

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

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

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

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

s8_chu

2019/03/31 00:01 編集

`header`要素に`background`プロパティを設定したものでは質問者さんの実現したいことは行えない、ということでしょうか? もしそうであれば、もう少し詳しく質問者さんの実現したいことを教えていただけませんか?
Pin2

2019/03/31 00:09

コメントありがとうございます。 はい。header要素にしてbackgroudにしても色が変わりません。
m.ts10806

2019/03/31 00:44

コードはマークダウンのcode機能を利用してください。 また色やフォントなどは明らかに分かりやすい色やサイズで適用確認された方が良いです。
Pin2

2019/03/31 00:44

見えます。同じ方法で試しましたが、自分のページではリストの上部の背景色が変わりました。 質問内容に参考画像を添付しました。このような状態になっています。
m.ts10806

2019/03/31 00:44

※質問は編集できますので適宜ご対応ください
Pin2

2019/03/31 00:46

問題のスクショを投稿しました。参照願えませんか。
s8_chu

2019/03/31 00:52

> 見えます。同じ方法で試しましたが、自分のページではリストの上部の背景色が変わりました。 jsFiddle 上でも`header`要素の背景色が変わっていないように見えるのであれば、 jsFiddle 上では`header`要素がどのように見えますか? また、質問者さんが実現したいことをもう少し詳しく教えていただけませんか?
yoshinavi

2019/03/31 08:49

今の提示コードは、CSSが不足しており、提示の画像のようなレイアウトになってません。 関連するコードの追加と、問題となる部分が、分かりやすい画像を提示されると良いかと思います。
guest

回答1

0

ベストアンサー

見た目に問題は発生していません。

下記は質問者さんのコードのそのまま。
イメージ説明

ただ、<head>がないのに</head>がある、</html>がなくてそこにあるべき場所に</head>がある、インデントが滅茶苦茶、ど構文的にちょっとおかしいところがあるのでざっと整理しました。

html

1<!doctype html> 2<html lang="jp"> 3 <head> 4 <meta charset="utf-8" name="description"> 5 <meta name="keywords" content="Sushi,osaka"> 6 <style> 7 8header{ 9 background-color: black; 10} 11 12.header-logo{ 13 float: left; 14 font-size: 20px; 15 padding: 20px; 16 background-color: gray; 17} 18 19</style> 20 <title>Sushi Japan</title> 21 </head> 22 <body> 23 <header> 24 <div class="header"> 25 <div class="header-logo">Sushi Japan</div> 26 <div class="header-list"> 27 <ul> 28 <li> 29 <a href="" target="_blank">TOP</a> 30 </li> 31 <li> 32 <a href="" target="_blank">FIRST VISIT</a> 33 </li> 34 <li> 35 <a href="" target="_blank">PRICE</a> 36 </li> 37 <li> 38 <a href="" target="_blank">LOCATION</a> 39 </li> 40 <li> 41 <a href="" target="_blank">APPONTMENTS</a> 42 </li> 43 </ul> 44 </div> 45 </div> 46 </header> 47 </body> 48</html>

※画面表示は同じ

色変えてみました。

css

1header{ 2 background-color: #f00; 3} 4 5.header-logo{ 6 float: left; 7 font-size: 20px; 8 padding: 20px; 9 background-color: #ccff; 10}

イメージ説明

css

1header{ 2 background-color: #FFFF00; 3} 4 5.header-logo{ 6 float: left; 7 font-size: 20px; 8 padding: 20px; 9 background-color: #8181F7; 10}

イメージ説明

いずれも効いているように見えますね。

黒や灰など他と混じりやすい色を適用するよりも、もっと分かりやすい色を適用してみて確認できてから色を入れられた方がいいかもしれません。
※あと影響は関係ないですが、カラーネームよりカラーコードの方がいいかも

投稿2019/03/31 01:07

m.ts10806

総合スコア80765

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

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

Pin2

2019/03/31 01:37

ありがとうございます。自分が目標としている画像を添付しました。これと同じにしたいです。
m.ts10806

2019/03/31 01:51

それはいいんですが表題の「ヘッダーの背景色が変わらない」はどうなったんですか? それとこれとは別問題ですよ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問