teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップSassに関する質問ヘッダーの下にある余白が消えません。

編集履歴

回答編集履歴

4

コードの修正　説明の修正

2021/02/03 09:37

投稿

nekora
nekora

スコア501

test CHANGED
@@ -110,171 +110,197 @@
110
110
 
111
111
 
112
112
 
113
+
114
+
115
+ **ヘッダーの上の余白を取り除くようにSCSSを修正しました。**
116
+
117
+
118
+
113
119
  ```SCSS
114
120
 
115
121
  @charset "UTF-8";
116
122
 
117
-
118
-
119
- body{
120
-
121
- margin: 0;/*auto*/ /*CSSのコメントの書き方が間違ってました*/
122
-
123
- width: 1920px;
124
-
125
- }
126
-
127
-
128
-
129
- h1 { /*user agent(ブラウザのこと)が規定値で持ってるmarginを打ち消してpaddingで実現する*/
130
-
131
- margin-block-start: 0;
132
-
133
- margin-block-end: 0;
134
-
135
- padding-top: 0.67em;
136
-
137
- padding-bottom: 0.67em;
138
-
139
- }
140
-
141
-
142
-
143
- .clear{
144
-
145
- clear: both;
146
-
147
- }
148
-
149
-
150
-
151
- ul,li{
152
-
153
- margin: 0;
154
-
155
- padding: 0;
156
-
157
- list-style: none;
158
-
159
- }
160
-
161
-
162
-
163
- a{
164
-
165
- text-decoration: none;
166
-
167
- }
168
-
169
-
170
-
171
- nav{
172
-
173
- height: 182px;
174
-
175
- }
176
-
177
-
178
-
179
- header{
180
-
181
- width: 100%;
182
-
183
- height: 182px;
184
-
185
- background-color:rgb(189, 187, 187);
186
-
187
-
188
-
189
- ul,li,img{
190
-
191
- display: block;
192
-
193
- float: left;
194
-
195
- }
196
-
197
- .left li{
198
-
199
- margin: 111px 0 0 116px;/*bottom marginを0に*/
200
-
201
- font-size: 23px;
202
-
203
- }
204
-
205
- li:first-child{
206
-
207
- font-size: 25px;
208
-
209
- padding-bottom: 25px;
210
-
211
- margin: 109px 0 0 207px;
212
-
213
- }
214
-
215
- .logo img{
216
-
217
- width: 534px;
218
-
219
- height: 112px;
220
-
221
- background-color: black;
222
-
223
- /*↑質問にあたりロゴ非表示のため*/
224
-
225
- margin: 39px 0 31px;
226
-
227
- }
228
-
229
- .right{
230
-
231
- li{
232
-
233
- font-size: 23px;
234
-
235
- margin: 111px 0 0 87px;/*bottom marginを0に*/
236
-
237
- }
238
-
239
- li:first-child{
240
-
241
- margin: 111px 0 0 -5px;
242
-
243
- }
244
-
245
- }
246
-
247
-
248
-
249
- .map{
250
-
251
- /*display: inline-block;*/ /*displayを指定しない*/
252
-
253
- margin: 52px 120px 110px 78px;
254
-
255
-
256
-
257
- a{
258
-
259
- background-color: red;
260
-
261
- font-size: 15px;
262
-
263
- }
264
-
265
- }
266
-
267
- }
268
-
269
-
270
-
271
- .main{
272
-
273
- background-color:#8BC4A7;
274
-
275
- height: 500px;
276
-
277
- width: 1920px;
123
+ body {
124
+
125
+ margin: 0;
126
+
127
+ /*auto*/
128
+
129
+ width: 1920px;
130
+
131
+ }
132
+
133
+
134
+
135
+ h1 {
136
+
137
+ /*user agent(ブラウザのこと)が規定値で持ってるmarginを打ち消してpaddingで実現する*/
138
+
139
+ -webkit-margin-before: 0;
140
+
141
+ margin-block-start: 0;
142
+
143
+ -webkit-margin-after: 0;
144
+
145
+ margin-block-end: 0;
146
+
147
+ padding-top: 0.67em;
148
+
149
+ padding-bottom: 0.67em;
150
+
151
+ }
152
+
153
+
154
+
155
+ .clear {
156
+
157
+ clear: both;
158
+
159
+ }
160
+
161
+
162
+
163
+ ul, li {
164
+
165
+ margin: 0;
166
+
167
+ padding: 0;
168
+
169
+ list-style: none;
170
+
171
+ }
172
+
173
+
174
+
175
+ a {
176
+
177
+ text-decoration: none;
178
+
179
+ }
180
+
181
+
182
+
183
+ nav {
184
+
185
+ height: 182px;
186
+
187
+ }
188
+
189
+
190
+
191
+ header {
192
+
193
+ width: 100%;
194
+
195
+ height: 182px;
196
+
197
+ background-color: #bdbbbb;
198
+
199
+ }
200
+
201
+
202
+
203
+ header ul, header li, header img {
204
+
205
+ display: block;
206
+
207
+ float: left;
208
+
209
+ }
210
+
211
+
212
+
213
+ header .left li {
214
+
215
+ margin: 111px 0 0 116px;
216
+
217
+ /*bottom marginを0に*/
218
+
219
+ font-size: 23px;
220
+
221
+ }
222
+
223
+
224
+
225
+ header li:first-child {
226
+
227
+ font-size: 25px;
228
+
229
+ padding-bottom: 25px;
230
+
231
+ margin: 109px 0 0 207px;
232
+
233
+ }
234
+
235
+
236
+
237
+ header .logo img {
238
+
239
+ width: 534px;
240
+
241
+ height: 112px;
242
+
243
+ background-color: black;
244
+
245
+ /*↑質問にあたりロゴ非表示のため*/
246
+
247
+ margin: 39px 0 31px;
248
+
249
+ }
250
+
251
+
252
+
253
+ header .right li {
254
+
255
+ font-size: 23px;
256
+
257
+ margin: 111px 0 0 87px;
258
+
259
+ /*bottom marginを0に*/
260
+
261
+ }
262
+
263
+
264
+
265
+ header .right li:first-child {
266
+
267
+ margin: 111px 0 0 -5px;
268
+
269
+ }
270
+
271
+
272
+
273
+ header .map {
274
+
275
+ /*display: inline-block;*/
276
+
277
+ /*displayを指定しない*/
278
+
279
+ margin: 0 120px 110px 78px;
280
+
281
+ /*↑TOP MARGINの指定をやめる*/
282
+
283
+ }
284
+
285
+
286
+
287
+ header .map a {
288
+
289
+ background-color: red;
290
+
291
+ font-size: 15px;
292
+
293
+ }
294
+
295
+
296
+
297
+ .main {
298
+
299
+ background-color: #8BC4A7;
300
+
301
+ height: 500px;
302
+
303
+ width: 1920px;
278
304
 
279
305
  }
280
306
 

3

コードの修正

2021/02/03 09:37

投稿

nekora
nekora

スコア501

test CHANGED
@@ -130,8 +130,12 @@
130
130
 
131
131
  margin-block-start: 0;
132
132
 
133
+ margin-block-end: 0;
134
+
133
135
  padding-top: 0.67em;
134
136
 
137
+ padding-bottom: 0.67em;
138
+
135
139
  }
136
140
 
137
141
 

2

説明を修整

2021/02/02 19:07

投稿

nekora
nekora

スコア501

test CHANGED
@@ -1,3 +1,7 @@
1
+ フレックスレイアウトかグリッドレイアウトを使わずに直してみました。
2
+
3
+
4
+
1
5
  HTMLのH1タグなどは、ろくに知らない素人がHTMLを組んだとしてもOKなように、
2
6
 
3
7
  **ブラウザに組み込みのスタイルが設定されてて、それが悪さする**場合があり、上書きしてやらないといけません。

1

コードの修正

2021/02/02 18:41

投稿

nekora
nekora

スコア501

test CHANGED
@@ -122,26 +122,28 @@
122
122
 
123
123
 
124
124
 
125
- h1 { /*user agent(ブラウザのこと)が規定値で持ってるスタイルを打ち消す*/
125
+ h1 { /*user agent(ブラウザのこと)が規定値で持ってるmarginを打ち消してpaddingで実現する*/
126
+
127
+ margin-block-start: 0;
128
+
129
+ padding-top: 0.67em;
130
+
131
+ }
132
+
133
+
134
+
135
+ .clear{
136
+
137
+ clear: both;
138
+
139
+ }
140
+
141
+
142
+
143
+ ul,li{
126
144
 
127
145
  margin: 0;
128
146
 
129
- }
130
-
131
-
132
-
133
- .clear{
134
-
135
- clear: both;
136
-
137
- }
138
-
139
-
140
-
141
- ul,li{
142
-
143
- margin: 0;
144
-
145
147
  padding: 0;
146
148
 
147
149
  list-style: none;