HTMLのヘッダー部分の背景カラーが変わらない

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

html
1 <body>
2    <header>
3      <div class="container">
4        <div class="header-left">
5          <img class="logo" src="ああああ.png">
6        </div>
7        <div class="header-right">
8          <a href="#" class="login">ログイン</a>
9        </div>
10      </div>
11    </header>
12  </body>

CSS
1header{
2height: 65px;
3width: 100%;
4background-color: rgba(34, 49, 52, 0.9);
5}
6.container{
7width: 1170px;
8padding: 0 15px;
9margin: 0 auto;
10}
11.header-left{
12float:left;
13}
14.header-right{ 
15float:right;
16}

退会済みユーザー

2017/11/22 02:26

HTMLのコードや、他に当たっているCSSがあればそれも提示してください。

dit.

2017/11/22 02:41

コードはHTML、CSSをそれぞれ```で囲ってください。質問編集画面でコード部分を選択し、<code>ボタンを押せば簡単に囲えます。

m.ts10806

2017/11/22 02:52

スクリーンショットがあれば今どのような状態になっているか分かるのですが。。header-leftに置いている画像は影響ないですか？

m.ts10806

2017/11/22 02:54

あとは透明度かけずに分かりやすい色（赤#f00）にしてみるとか、試してみてください。

m.ts10806

2017/11/22 02:58

html下部「<body>」となっていて閉じタグになっていますが、問題ないでしょうか。ご提示のソースでおそらく指定であろう背景色（ほぼ真っ黒）で表示されたので、指定自体は間違っていないように思います。

tyapapa

2017/11/22 03:10 編集

bodyは問題なかったです。

date

2017/11/22 05:12

もうコンソール見て確認するしかないのでは

defghi1977

2017/11/22 06:01

WEBブラウザの種類, OS, ユーザーCSSの有無, 他のブラウザでの再現性について追記して下さい

m.ts10806

2017/11/22 07:56

あまり関係ないとは思いますがDOCTYPE宣言前の半角スペースとか気になります。正しくHTMLを打たないと何が起きるか分からないので、表示が想定通りにいかない場合は、まず疑うべきは文法とスペルミスです。次に環境。どこまで問題ないか、どこまで分かっていて分かっていないか、範囲を明確にしていきましょう。ソース更新されたので試しましたが、やはり再現しません。色を変えてもきちんと反映されます。スクリーンショット・環境情報ご提示ください。

s8_chu

2017/12/03 06:04 編集

teratailでは、解決後に編集機能を用いて質問内容を改変し、関係のない内容にしたり、内容を削除する行為が禁止されています( https://teratail.com/help/avoid-asking/ )。どうせ編集履歴を辿れば見れてしまいますし、もともとの質問の内容は残しておきましょう。

行動規範の内容に同意します

回答4件

以下の状態のみ記載したコードでは濃い緑系の背景が表示されました。

html
1<!-- /head削除 -->
2  <body>
3    <header>
4      <div class="container">
5        <div class="header-left">
6          <img class="logo" src="http://placehold.jp/60x60.png"><!-- ダミー画像 -->
7        </div>
8        <div class="header-right">
9          <a href="#" class="login">ログイン</a>
10        </div>
11      </div>
12    </header>
13  </body><!-- "/"を追加 -->

css
1header{
2height: 65px;
3width: 100%;
4background-color: rgba(34, 49, 52, 0.9);
5}
6.container{
7width: 1170px;
8padding: 0 15px;
9margin: 0 auto;
10}
11.header-left{
12float:left;
13}
14.header-right{ /* haeder-right を　header-rightに修正 */
15float:right;
16}

キャッシュを削除するなどして再読み込みし、確認してみてください。
それでも変わらない場合は提示以外の部分が影響しているかもしれません。

追記
デベロッパーツールを使って状況を判断してください。
デベロッパーツールの使い方 http://www.buildinsider.net/web/chromedevtools/01

ブラウザーのフルリロード、スーパーリロードもお試しください。

投稿2017/11/22 02:57

編集2017/11/22 05:34

dit.

総合スコア3235

dit.

2017/11/22 05:40

あと、この状況だと1170px以下のウィンドウサイズで表示させたときに背景はウィンドウサイズに100%、.containerは1170pxあるので飛び出たところに「ログイン」が表示されるのですがそれは構わないのでしょうか。ちょっと気になりました

行動規範の内容に同意します

ベストアンサー

たとえば、試しに以下のように header タグに直接 style 属性を指定した場合、反映されますか？

html
1<header style="background:yellow;">

■もしこれが反映されない場合、
「子要素の .container や .header-left などに背景色が指定されていて header の背景色が見えていない」
という可能性があると思います。
（ここでは背景色を指定していないけど、別の場所で指定している等）
（外部ファイルとかに指定がある可能性もあります）

■これが反映される場合は、
「別の場所で header に対して背景色が指定されている」
という可能性があるかなと思います。

投稿2017/11/22 04:42

sk_3122

総合スコア1126

tyapapa

2017/11/22 05:01

直接指定したのでですがやはり変わりませんフォルダ内もここに掲載しているHTMLファイルとCSSファイルしかないのですが・・・

sk_3122

2017/11/22 06:12 編集

直接指定しても変わらず、外部ファイルも読み込んでいないとなると根本的に何かが違うような気がしますが… たまにやるのが、修正したファイルを見ているつもりが違うファイルを見ていたとかですが… css だけでなく、たとえば <header> の前に試しに ★★★ とか打って保存して見た場合、★★★ が画面に表示されますか？表示されないようなら違う所を見ているかもしれません。とりあえず、不具合が出ているファイルではなく、新しく html ファイルを 1 つ作成し、そこに質問にある HTML と CSS をべろっとコピペしてみてみると、背景色は反映されますよね？ (CSS は <style></style> で囲んで <link rel= ...> の後にでも入れてください)

tyapapa

2017/11/23 06:22

HTMLファイルに直接CSSを書いた場合は背景色がちゃんと反映されました。

sk_3122

2017/11/24 03:10

HTMLファイルに直接CSSを書いた場合は反映された、というのであればCSSの書き方が問題なわけではないですね。考えられる原因としては... 【１】CSSファイルが正しく読み込めていない → CSSファイルに body { background:yellow !important; border:5px solid red !important; } を追加して、保存して確認すると、body が黄色背景＋赤枠線になりますか？なるようであれば、ファイルは正しく読み込めています。【２】CSSファイルを修正した後、保存しないで画面確認してしまっている → テキストエディタで修正して、保存するのを忘れた状態でブラウザを更新してしまうのは私がローカルで作業している場合にたまにやる凡ミスです。【３】修正した場所と、見ている場所が違う → これもたまにやります。 test_20171124/hoge.html を修正しているのに、test_20171101/hoge.html を見ていた、とか気付いた瞬間膝から崩れ落ちます。【４】キャッシュされてしまっている → CSSファイルを読み込んでいる部分で、ファイル名の後ろに <link rel="stylesheet" href="yousheet.css?v=001"> のように ?key=value の形でパラメータを付けてあげると、外部ファイルがキャッシュされません。 CSSファイルを修正して、確認するたびに 002, 003... と違う値に書き換えてやると毎回キャッシュされずに確認できます。 ----- 繰り返しになりますが、HTMLファイルに直接CSSを書いた場合は反映されるのであれば、CSSの書き方の問題ではないと思います。 CSSファイルがうまく読み込めていないか、正しく認識されていないか等ではないかと思いますが… ちなみに、質問に提示されているCSSや HTMLファイルに直接CSSを書いた際のものはコピペしたものでしょうか。 CSSファイルに全角スペース等が混ざっているだけでうまく効かなかったりするので、手打ちしていた場合はコピペで試してみてください。

tyapapa

2017/11/25 03:52

【１】のコードを打ったらなぜか私が質問していたことが成功しました。その後にそのコードを消しても成功してしまいました。不思議なことですがとても助かりました。ありがとうございます。

行動規範の内容に同意します

https://jsfiddle.net/4b5f2L1g/
問題が再現できません。ソースコードはこれで全てですか？
.haeder-right{と誤字があるようなので、その他にも誤字やセミコロン忘れがないかしっかり確認してみてください。
また、ブラウザのキャッシュが残っているだけの場合がありますのでキャッシュを削除するか、シークレットモードなどで確認してください。

投稿2017/11/22 02:55

退会済みユーザー

総合スコア0

tyapapa

2017/11/22 04:26

キャッシュを削除したりもしましたがやはりできないです

退会済みユーザー

2017/11/22 04:34

提示のコードでは問題が再現できないので、これ以上の助言ができません。質問への追記・修正依頼でmts10806さんが仰っているようにスクリーンショットなど、問題が再現できる環境を提示することが解決への一番の近道です

行動規範の内容に同意します

CSSの.logo,.login,そして<img src="../../Pictures/ki.png">のサイズも提示して見てください。原因の一端かも知れません。

投稿2017/11/23 05:01

yoshinavi

総合スコア3523

yoshinavi

2017/11/24 17:03 編集

HTMLに直接書いたCSSが効いて、外部CSSが効かない場合は位置指定ミスにより、認識されていない場合が考えられます。しかし、外部CSSが1つしかなく、他の部分が効いているのであれば、色指定の位置を確認してみてください。変更後の指定が、変更前より、前部分（上部）になってませんか？CSSの優先順が考えられます。

行動規範の内容に同意します

あなたの回答