teratail
回答率
85.30%
質問するログイン新規登録
トップに関する質問HTMLのヘッダー部分の背景カラーが変わらない

編集履歴

質問編集履歴

11

消すのは禁止されていたみたいですので覚えている範囲で直させていただきました。お騒がせいたしました。

2017/12/03 05:52

投稿

tyapapa
tyapapa

スコア51

title CHANGED
File without changes
body CHANGED
@@ -1,1 +1,33 @@
1
- あまりにもエラーの内容が情けなったため消させていただきました。
1
+ ヘッダーの背景のカラーが変わりません。
2
+ ```html
3
+ <body>
4
+ <header>
5
+ <div class="container">
6
+ <div class="header-left">
7
+ <img class="logo" src="ああああ.png">
8
+ </div>
9
+ <div class="header-right">
10
+ <a href="#" class="login">ログイン</a>
11
+ </div>
12
+ </div>
13
+ </header>
14
+ </body>
15
+ ```
16
+ ```CSS
17
+ header{
18
+ height: 65px;
19
+ width: 100%;
20
+ background-color: rgba(34, 49, 52, 0.9);
21
+ }
22
+ .container{
23
+ width: 1170px;
24
+ padding: 0 15px;
25
+ margin: 0 auto;
26
+ }
27
+ .header-left{
28
+ float:left;
29
+ }
30
+ .header-right{
31
+ float:right;
32
+ }
33
+ ```

10

消しました

2017/12/03 05:52

投稿

tyapapa
tyapapa

スコア51

title CHANGED
File without changes
body CHANGED
@@ -1,56 +1,1 @@
1
- ――――――――――――HTML――――――――――――――
2
- ```ここに言語を入力
3
- <!DOCTYPE html>
4
- <html>
5
- <head>
6
- <meta charset="utf-8">
7
- <title>パパパパ</title>
8
- <link rel="stylesheet" href="yousheet.css">
9
- </head>
10
- <body>
11
- <header>
12
- <div class="container">
13
- <div class="header-left">
14
- <img class="logo" src="../../Pictures/ki.png">
15
- </div>
16
- <div class="header-right">
17
- <a href="#" class="login">ログイン</a>
18
- </div>
19
- </div>
20
- </header>
21
- </body>
22
- </html>
23
- ```
24
-
25
- ――――――――――――css――――――――――――
26
- ```ここに言語を入力
27
- header{
28
- height: 65px;
29
- width: 100%;
30
- background-color: rgba(34, 49, 52, 0.9);
31
- }
32
- .container{
33
- width: 1170px;
34
- padding: 0 15px;
35
- margin: 0 auto;
36
- }
37
- .header-left{
38
- float:left;
39
- }
40
- .header-right{
41
- float:right;
42
- }
43
-
44
- ```
45
-
46
- このようにコードを書いているのですがヘッダー部分の背景カラーが反映されません。
47
- お助けください。
48
- 背景以外のfloat等は反映されています。
49
- ![イメージ説明](1f50d9f2a455cf75ae81b7ce3ef88163.png)
50
- ブラウザはchrome、OSはwindowsで他のブラウザで見た場合もまったく同じ画面になっています。
51
- ユーザCSSとはよくわからないのですが、変更していないと思います。
52
-
53
- header-leftで使用している画像のサイズは50×50で
54
- loginに関してはサイズの指定はしていません。
55
-
56
- ちなみにHTMLファイルに直接CSSを書き込んだ場合はうまくいきました。
1
+ あまりにもエラーの内容が情けなったため消させていただきました。

9

現状更新

2017/12/03 04:53

投稿

tyapapa
tyapapa

スコア51

title CHANGED
File without changes
body CHANGED
@@ -51,4 +51,6 @@
51
51
  ユーザCSSとはよくわからないのですが、変更していないと思います。
52
52
 
53
53
  header-leftで使用している画像のサイズは50×50で
54
- loginに関してはサイズの指定はしていません。
54
+ loginに関してはサイズの指定はしていません。
55
+
56
+ ちなみにHTMLファイルに直接CSSを書き込んだ場合はうまくいきました。

8

いろいろ

2017/11/23 06:25

投稿

tyapapa
tyapapa

スコア51

title CHANGED
File without changes
body CHANGED
@@ -48,4 +48,7 @@
48
48
  背景以外のfloat等は反映されています。
49
49
  ![イメージ説明](1f50d9f2a455cf75ae81b7ce3ef88163.png)
50
50
  ブラウザはchrome、OSはwindowsで他のブラウザで見た場合もまったく同じ画面になっています。
51
- ユーザCSSとはよくわからないのですが、変更していないと思います。
51
+ ユーザCSSとはよくわからないのですが、変更していないと思います。
52
+
53
+ header-leftで使用している画像のサイズは50×50で
54
+ loginに関してはサイズの指定はしていません。

7

ミスがあったので更新

2017/11/23 06:09

投稿

tyapapa
tyapapa

スコア51

title CHANGED
File without changes
body CHANGED
@@ -3,6 +3,7 @@
3
3
  <!DOCTYPE html>
4
4
  <html>
5
5
  <head>
6
+ <meta charset="utf-8">
6
7
  <title>パパパパ</title>
7
8
  <link rel="stylesheet" href="yousheet.css">
8
9
  </head>

6

ミスがあったので更新

2017/11/23 06:07

投稿

tyapapa
tyapapa

スコア51

title CHANGED
File without changes
body CHANGED
@@ -3,7 +3,6 @@
3
3
  <!DOCTYPE html>
4
4
  <html>
5
5
  <head>
6
- ![イメージ説明](1f1be6005344d837ecb8927d02ce6d73.png)ta charset="utf-8">
7
6
  <title>パパパパ</title>
8
7
  <link rel="stylesheet" href="yousheet.css">
9
8
  </head>

5

環境、スクショ公開

2017/11/23 06:06

投稿

tyapapa
tyapapa

スコア51

title CHANGED
File without changes
body CHANGED
@@ -1,9 +1,9 @@
1
1
  ――――――――――――HTML――――――――――――――
2
2
  ```ここに言語を入力
3
- <!DOCTYPE html>
3
+ <!DOCTYPE html>
4
4
  <html>
5
5
  <head>
6
- <meta charset="utf-8">
6
+ ![イメージ説明](1f1be6005344d837ecb8927d02ce6d73.png)ta charset="utf-8">
7
7
  <title>パパパパ</title>
8
8
  <link rel="stylesheet" href="yousheet.css">
9
9
  </head>
@@ -45,4 +45,7 @@
45
45
 
46
46
  このようにコードを書いているのですがヘッダー部分の背景カラーが反映されません。
47
47
  お助けください。
48
- 背景以外のfloat等は反映されています。
48
+ 背景以外のfloat等は反映されています。
49
+ ![イメージ説明](1f50d9f2a455cf75ae81b7ce3ef88163.png)
50
+ ブラウザはchrome、OSはwindowsで他のブラウザで見た場合もまったく同じ画面になっています。
51
+ ユーザCSSとはよくわからないのですが、変更していないと思います。

4

指摘されたところ直しましたがやはり背景カラーは変わりませんでした

2017/11/23 06:04

投稿

tyapapa
tyapapa

スコア51

title CHANGED
File without changes
body CHANGED
@@ -37,7 +37,7 @@
37
37
  .header-left{
38
38
  float:left;
39
39
  }
40
- .haeder-right{
40
+ .header-right{
41
41
  float:right;
42
42
  }
43
43
 

3

指摘されたところを直しましたがそれでもできないです。

2017/11/22 04:24

投稿

tyapapa
tyapapa

スコア51

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,12 @@
1
1
  ――――――――――――HTML――――――――――――――
2
2
  ```ここに言語を入力
3
+ <!DOCTYPE html>
4
+ <html>
5
+ <head>
6
+ <meta charset="utf-8">
7
+ <title>パパパパ</title>
8
+ <link rel="stylesheet" href="yousheet.css">
3
- </head>
9
+ </head>
4
10
  <body>
5
11
  <header>
6
12
  <div class="container">
@@ -12,7 +18,8 @@
12
18
  </div>
13
19
  </div>
14
20
  </header>
15
- <body>
21
+ </body>
22
+ </html>
16
23
  ```
17
24
 
18
25
  ――――――――――――css――――――――――――

2

コード囲みました

2017/11/22 04:23

投稿

tyapapa
tyapapa

スコア51

title CHANGED
File without changes
body CHANGED
@@ -1,19 +1,22 @@
1
1
  ――――――――――――HTML――――――――――――――
2
+ ```ここに言語を入力
2
- </head>
3
+ </head>
3
4
  <body>
4
5
  <header>
5
6
  <div class="container">
6
7
  <div class="header-left">
7
- <img class="logo" src="../../Pictures/ki.png"> <!--ロゴ画像-->
8
+ <img class="logo" src="../../Pictures/ki.png">
8
9
  </div>
9
- <div class="header-right"> <!--ログイン-->
10
+ <div class="header-right">
10
11
  <a href="#" class="login">ログイン</a>
11
12
  </div>
12
13
  </div>
13
14
  </header>
14
15
  <body>
16
+ ```
15
17
 
16
18
  ――――――――――――css――――――――――――
19
+ ```ここに言語を入力
17
20
  header{
18
21
  height: 65px;
19
22
  width: 100%;
@@ -31,6 +34,7 @@
31
34
  float:right;
32
35
  }
33
36
 
37
+ ```
34
38
 
35
39
  このようにコードを書いているのですがヘッダー部分の背景カラーが反映されません。
36
40
  お助けください。

1

コードを追加しておきました。

2017/11/22 02:46

投稿

tyapapa
tyapapa

スコア51

title CHANGED
File without changes
body CHANGED
@@ -1,9 +1,37 @@
1
+ ――――――――――――HTML――――――――――――――
2
+ </head>
3
+ <body>
4
+ <header>
5
+ <div class="container">
6
+ <div class="header-left">
7
+ <img class="logo" src="../../Pictures/ki.png"> <!--ロゴ画像-->
8
+ </div>
9
+ <div class="header-right"> <!--ログイン-->
10
+ <a href="#" class="login">ログイン</a>
11
+ </div>
12
+ </div>
13
+ </header>
14
+ <body>
15
+
16
+ ――――――――――――css――――――――――――
1
17
  header{
2
18
  height: 65px;
3
19
  width: 100%;
4
20
  background-color: rgba(34, 49, 52, 0.9);
5
21
  }
22
+ .container{
23
+ width: 1170px;
24
+ padding: 0 15px;
25
+ margin: 0 auto;
26
+ }
27
+ .header-left{
28
+ float:left;
29
+ }
30
+ .haeder-right{
31
+ float:right;
32
+ }
6
33
 
7
34
 
8
35
  このようにコードを書いているのですがヘッダー部分の背景カラーが反映されません。
9
- お助けください。
36
+ お助けください。
37
+ 背景以外のfloat等は反映されています。