質問するログイン新規登録

質問編集履歴

4

文章の追加

2021/02/02 12:55

投稿

music
music

スコア13

title CHANGED
File without changes
body CHANGED
@@ -5,6 +5,8 @@
5
5
  ヘッダーの下にある余白が消えません。
6
6
  加えて、赤塗りしている<a>が<main>に降りてきてしまいます。
7
7
 
8
+ ABOUTがlogoにかかっているのはデザインなので大丈夫です。
9
+
8
10
  始めたばかりで質問するのも申し訳ありませんが、
9
11
  調べつくし試しましたが一向に解決しません。
10
12
 

3

誤字の修正

2021/02/02 12:55

投稿

music
music

スコア13

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,5 @@
1
- ![イメージ説明](02c35e7fdd3d9baa812b864374a32c0d.png)### 前提・実現したいこと
1
+ ![イメージ説明](02c35e7fdd3d9baa812b864374a32c0d.png)
2
- **ヘッダーの下にある余白を消したいのと、赤塗りのものヘッダーに収めたいです。**
2
+ **ヘッダーの下にある余白を消したいのと、赤塗りのものヘッダーに収めたいです。**
3
3
 
4
4
  ### 発生している問題・エラーメッセージ
5
5
  ヘッダーの下にある余白が消えません。

2

画像追加

2021/02/02 10:04

投稿

music
music

スコア13

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,5 @@
1
- ### 前提・実現したいこと
2
- **ヘッダーの下にある余白を消したいです。**![![![イメージ説明](742ed0ec6d8a2259ef24dada6e895b21.png)](8057b90971c9173cd3aa60df53ef2241.png)](9ea356bea93626090030f1f119102d5d.png)
1
+ ![イメージ説明](02c35e7fdd3d9baa812b864374a32c0d.png)### 前提・実現したいこと
2
+ **ヘッダーの下にある余白を消したいのと、赤塗りのものがヘッダーに収めたいです。**
3
3
 
4
4
  ### 発生している問題・エラーメッセージ
5
5
  ヘッダーの下にある余白が消えません。

1

ソースコードの追加

2021/02/02 10:02

投稿

music
music

スコア13

title CHANGED
File without changes
body CHANGED
@@ -17,7 +17,137 @@
17
17
  ### 該当のソースコード
18
18
 
19
19
  ```ここに言語名を入力
20
+ <!DOCTYPE html>
21
+ <html lang="ja">
22
+ <head>
23
+ <meta charset="UTF-8">
24
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
25
+ <link rel="stylesheet" href="first.css">
26
+ <link rel="stylesheet" href="query-first.css">
27
+ <title>test_First</title>
28
+
29
+ </head>
30
+ <body>
31
+ <header id=page-top>
32
+ <nav>
33
+ <ul class="left">
34
+ <li><a href="#">FIRST</a></li>
35
+ <li><a href="#">PLAN</a></li>
36
+ <li><a href="#">SERVICE</a></li>
37
+ </ul>
38
+
39
+ <div class="logo">
40
+ <a href="arrivo.html"><img src="#" alt="サイトロゴ"></a>
41
+ </div>
42
+
43
+ <ul class="right">
44
+ <li><a href="#">ABOUT</a></li>
45
+ <li><a href="#">POINT</a></li>
46
+ <li><a href="#">CONTACT</a></li>
47
+ </ul>
48
+
49
+ <div class="map">
50
+ <a href="#">サイトマップ</a>
51
+ </div>
52
+ </nav>
53
+ <div class="clear"></div>
54
+ </header>
55
+
56
+ <div class="main">
57
+
58
+ <div class="title">
59
+ <h1>FIRST</h1>
60
+ </div>
61
+ </div>
62
+ </body>
63
+ </html>
64
+
65
+
66
+
67
+
68
+
69
+ body{
70
+ margin: 0;//auto
71
+ width: 1920px;
72
+ }
73
+
74
+ .clear{
75
+ clear: both;
76
+ }
77
+
20
- ソースコード
78
+ ul,li{
79
+ margin: 0;
80
+ padding: 0;
81
+ list-style: none;
82
+ }
83
+
84
+ a{
85
+ text-decoration: none;
86
+ }
87
+
88
+ nav{
89
+ height: 182px;
90
+ }
91
+
92
+ header{
93
+ width: 100%;
94
+ height: 182px;
95
+ background-color:rgb(189, 187, 187);
96
+
97
+ ul,li,img{
98
+ display: block;
99
+ float: left;
100
+ }
101
+
102
+ .left li{
103
+ margin: 111px 0 48px 116px;
104
+ font-size: 23px;
105
+ }
106
+ li:first-child{
107
+ font-size: 25px;
108
+ padding-bottom: 25px;
109
+ margin: 109px 0 0 207px;
110
+
111
+
112
+ }
113
+
114
+ .logo img{
115
+ width: 534px;
116
+ height: 112px;
117
+ background-color: black;
118
+ //↑質問にあたりロゴ非表示のため
119
+ margin: 39px 0 31px;
120
+ }
121
+
122
+ .right{
123
+
124
+ li{
125
+ font-size: 23px;
126
+ margin: 111px 0 48px 87px;
127
+ }
128
+ li:first-child{
129
+ margin: 111px 0 0 -5px;
130
+ }
131
+ }
132
+
133
+
134
+ .map{
135
+ display: inline-block;
136
+ margin: 52px 120px 110px 78px;
137
+
138
+ a{
139
+ background-color: red;
140
+ font-size: 15px;
141
+ }
142
+ }
143
+ }
144
+
145
+ .main{
146
+ background-color:#8BC4A7;
147
+ height: 500px;
148
+ width: 1920px;
149
+ }
150
+
21
151
  ```
22
152
 
23
153
  ### 試したこと