質問編集履歴

6

修正しました。

2021/09/18 08:41

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -70,6 +70,194 @@
70
70
 
71
71
  ```CSS
72
72
 
73
+ 【general.css】
74
+
75
+ html {
76
+
77
+ font-size: 62.5%;
78
+
79
+ }
80
+
81
+
82
+
83
+ body {
84
+
85
+ max-width: 1365px;
86
+
87
+ height: 768px;
88
+
89
+ background-color: #fff;
90
+
91
+ font-size: 1.6rem;
92
+
93
+ font-family: 'Noto Sans JP' sans-serif;
94
+
95
+ color: #333333;
96
+
97
+ }
98
+
99
+
100
+
101
+ img {
102
+
103
+ width: 100%;
104
+
105
+ height: auto;
106
+
107
+ vertical-align: bottom;
108
+
109
+ }
110
+
111
+
112
+
113
+ a {
114
+
115
+ text-decoration: none;
116
+
117
+ }
118
+
119
+
120
+
121
+ li {
122
+
123
+ list-style: none;
124
+
125
+ }
126
+
127
+
128
+
129
+ /*共通タイトル*/
130
+
131
+ .jp-ttl {
132
+
133
+ margin-bottom: 20px;
134
+
135
+ text-align: center;
136
+
137
+ font-size: 3.2rem;
138
+
139
+ font-weight: bold;
140
+
141
+ margin: 0 auto;
142
+
143
+ padding-top: 55px;
144
+
145
+ margin-bottom: 11px;
146
+
147
+ }
148
+
149
+
150
+
151
+ @media print, screen and (max-width: 1024px) {
152
+
153
+ .jp-ttl {
154
+
155
+ margin-bottom: 40px;
156
+
157
+ font-size: 2.8rem;
158
+
159
+ }
160
+
161
+ }
162
+
163
+
164
+
165
+ .en-ttl {
166
+
167
+ margin-bottom: 67px;
168
+
169
+ text-align: center;
170
+
171
+ font-size: 1.6rem;
172
+
173
+ color: #3BA6C9;
174
+
175
+ text-transform: uppercase;
176
+
177
+ }
178
+
179
+
180
+
181
+ @media print, screen and (max-width: 1024px) {
182
+
183
+ .en-ttl {
184
+
185
+ font-size: 0.5rem;
186
+
187
+ }
188
+
189
+ }
190
+
191
+
192
+
193
+ .inner {
194
+
195
+ width: 1024px;
196
+
197
+ margin-left: auto;
198
+
199
+ margin-right: auto;
200
+
201
+ }
202
+
203
+
204
+
205
+ @media print, screen and (max-width: 1024px) {
206
+
207
+ .inner {
208
+
209
+ width: 100%;
210
+
211
+ margin: 0 auto;
212
+
213
+ }
214
+
215
+ }
216
+
217
+
218
+
219
+ /*ボタン*/
220
+
221
+ .cmn-link {
222
+
223
+ width: 155px;
224
+
225
+ height: 37px;
226
+
227
+ background: -webkit-gradient(linear, left top, right top, from(#FA41CC), to(#6020B0));
228
+
229
+ background: linear-gradient(to right, #FA41CC, #6020B0);
230
+
231
+ border-radius: 10px;
232
+
233
+ -webkit-box-shadow: 0px 3px 6px #00000029;
234
+
235
+ box-shadow: 0px 3px 6px #00000029;
236
+
237
+ }
238
+
239
+
240
+
241
+ .cmn-link > a {
242
+
243
+ display: block;
244
+
245
+ color: #fff;
246
+
247
+ font-size: 1.4rem;
248
+
249
+ font-weight: bold;
250
+
251
+ text-align: center;
252
+
253
+ padding-top: 7px;
254
+
255
+ }
256
+
257
+ 【///】
258
+
259
+
260
+
73
261
  .header {
74
262
 
75
263
  background-color: #FFFFFF;

5

修正いたしました

2021/09/18 08:41

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ```### 前提・実現したいこと
1
+ ### 前提・実現したいこと
2
2
 
3
3
  2点質問です。
4
4
 
@@ -10,570 +10,562 @@
10
10
 
11
11
 
12
12
 
13
+
14
+
15
+
16
+
13
- ### 発生している問題・エラメッセ
17
+ ### 該当のソスコ
18
+
19
+
20
+
14
-
21
+ ```HTML
22
+
15
-
23
+ <header class="header">
24
+
25
+ <div class="inner header-inner">
26
+
27
+ <h1 class="header-ttl">
28
+
29
+ <img class="img-logo" src="./image/Logo.png" alt="">
30
+
31
+ <p class="logo-text">ユアコーディング</p>
32
+
33
+ </h1><!-- /.header-ttl -->
34
+
35
+ <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
36
+
37
+ <span class="humburger__line"></span>
38
+
39
+
40
+
41
+ </button>
42
+
43
+ <nav class="nav">
44
+
45
+ <ul class="header-list">
46
+
47
+ <li class="header-item"><a href="#">特徴</a></li><!-- /.header-item -->
48
+
49
+ <li class="header-item"><a href="#">価格</a></li><!-- /.header-item -->
50
+
51
+ <li class="header-item"><a href="#contact-link">問い合わせ</a></li><!-- /.header-item -->
52
+
53
+ </ul><!-- /.header-list -->
54
+
55
+ </nav><!-- /.nav -->
56
+
57
+ <div class="cmn-link header-link">
58
+
59
+ <a href="#contact-link">お問い合わせ</a>
60
+
61
+ </div><!-- /.cmn-link -->
62
+
63
+ </div><!-- /.inner -->
64
+
65
+ </header><!-- /.header -->
16
66
 
17
67
  ```
18
68
 
69
+
70
+
71
+ ```CSS
72
+
73
+ .header {
74
+
75
+ background-color: #FFFFFF;
76
+
77
+ height: 94px;
78
+
79
+ position: fixed;
80
+
81
+ top: 0;
82
+
83
+ z-index: 9999;
84
+
85
+ width: 100%;
86
+
87
+ -webkit-box-shadow: 0px 3px 6px #00000029;
88
+
89
+ box-shadow: 0px 3px 6px #00000029;
90
+
91
+ }
92
+
93
+
94
+
95
+ .header .header-inner {
96
+
97
+ width: 1022px;
98
+
99
+ margin: 0 auto;
100
+
101
+ padding: 0 20px;
102
+
103
+ display: -webkit-box;
104
+
105
+ display: -ms-flexbox;
106
+
107
+ display: flex;
108
+
109
+ -webkit-box-align: center;
110
+
111
+ -ms-flex-align: center;
112
+
113
+ align-items: center;
114
+
115
+ -webkit-box-pack: justify;
116
+
117
+ -ms-flex-pack: justify;
118
+
119
+ justify-content: space-between;
120
+
121
+ height: 100%;
122
+
123
+ }
124
+
125
+
126
+
127
+ .header .header-inner .header-ttl {
128
+
129
+ display: -webkit-box;
130
+
131
+ display: -ms-flexbox;
132
+
133
+ display: flex;
134
+
135
+ -webkit-box-align: center;
136
+
137
+ -ms-flex-align: center;
138
+
139
+ align-items: center;
140
+
141
+ }
142
+
143
+
144
+
145
+ .header .header-inner .header-ttl .img-logo {
146
+
147
+ width: 55px;
148
+
149
+ height: 55px;
150
+
151
+ }
152
+
153
+
154
+
155
+ .header .header-inner .header-ttl .logo-text {
156
+
157
+ display: block;
158
+
159
+ font-size: 2.4rem;
160
+
161
+ font-weight: bold;
162
+
163
+ margin-left: 16px;
164
+
165
+ }
166
+
167
+
168
+
169
+ .header .header-inner .humburger__line {
170
+
171
+ display: none;
172
+
173
+ }
174
+
175
+
176
+
177
+ @media print, screen and (max-width: 1024px) {
178
+
179
+ .header .header-inner .humburger__line {
180
+
181
+ position: absolute;
182
+
183
+ top: 0;
184
+
185
+ right: 0;
186
+
187
+ bottom: 0;
188
+
19
- エラーメッセージ
189
+ left: 0;
190
+
191
+ margin: auto;
192
+
193
+ width: 18px;
194
+
195
+ height: 2px;
196
+
197
+ background-color: #333;
198
+
199
+ -webkit-transition: inherit;
200
+
201
+ transition: inherit;
202
+
203
+ }
204
+
205
+ .header .header-inner .humburger__line ::before {
206
+
207
+ top: -5px;
208
+
209
+ }
210
+
211
+ .header .header-inner .humburger__line ::after {
212
+
213
+ top: 5px;
214
+
215
+ }
216
+
217
+ }
218
+
219
+
220
+
221
+ .header .header-inner .nav .header-list {
222
+
223
+ display: -webkit-box;
224
+
225
+ display: -ms-flexbox;
226
+
227
+ display: flex;
228
+
229
+ -webkit-box-pack: justify;
230
+
231
+ -ms-flex-pack: justify;
232
+
233
+ justify-content: space-between;
234
+
235
+ -webkit-box-align: center;
236
+
237
+ -ms-flex-align: center;
238
+
239
+ align-items: center;
240
+
241
+ }
242
+
243
+
244
+
245
+ .header .header-inner .nav .header-list .header-item > a {
246
+
247
+ font-weight: bold;
248
+
249
+ }
250
+
251
+
252
+
253
+ .header .header-inner .nav .header-list .header-item + .header-item {
254
+
255
+ padding-left: 46px;
256
+
257
+ }
258
+
259
+
260
+
261
+ .header .header-inner .nav .header-link {
262
+
263
+ width: 155px;
264
+
265
+ height: 37px;
266
+
267
+ }
268
+
269
+
270
+
271
+ .header .header-inner .nav .header-link > a {
272
+
273
+ color: #fff;
274
+
275
+ font-size: 1.4rem;
276
+
277
+ text-align: center;
278
+
279
+ }
280
+
281
+
20
282
 
21
283
  ```
22
284
 
23
285
 
24
286
 
25
- ### 該当のソースコード
26
-
27
-
28
-
29
- ```HTML
30
-
31
- <header class="header">
32
-
33
- <div class="inner header-inner">
34
-
35
- <h1 class="header-ttl">
36
-
37
- <img class="img-logo" src="./image/Logo.png" alt="">
38
-
39
- <p class="logo-text">ユアコーディング</p>
40
-
41
- </h1><!-- /.header-ttl -->
42
-
43
- <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
44
-
45
- <span class="humburger__line"></span>
46
-
47
-
48
-
49
- </button>
50
-
51
- <nav class="nav">
52
-
53
- <ul class="header-list">
54
-
55
- <li class="header-item"><a href="#">特徴</a></li><!-- /.header-item -->
56
-
57
- <li class="header-item"><a href="#">価格</a></li><!-- /.header-item -->
58
-
59
- <li class="header-item"><a href="#contact-link">問い合わせ</a></li><!-- /.header-item -->
60
-
61
- </ul><!-- /.header-list -->
62
-
63
- </nav><!-- /.nav -->
64
-
65
- <div class="cmn-link header-link">
66
-
67
- <a href="#contact-link">お問い合わせ</a>
68
-
69
- </div><!-- /.cmn-link -->
70
-
71
- </div><!-- /.inner -->
72
-
73
- </header><!-- /.header -->
287
+ 【追記】です。
288
+
289
+ ```header.scss
290
+
291
+
292
+
293
+ .header{
294
+
295
+ background-color: #FFFFFF;
296
+
297
+ height: 94px;
298
+
299
+ position: fixed;
300
+
301
+ top: 0;
302
+
303
+ z-index: 9999;
304
+
305
+ width: 100%;
306
+
307
+ box-shadow: 0px 3px 6px #00000029;
308
+
309
+
310
+
311
+ .header-inner{
312
+
313
+ max-width: 1022px;
314
+
315
+ margin: 0 auto;
316
+
317
+ padding: 0 20px;
318
+
319
+ display: flex;
320
+
321
+ align-items: center;
322
+
323
+ justify-content: space-between;
324
+
325
+ height: 100%;
326
+
327
+
328
+
329
+ .header-ttl{
330
+
331
+ display: flex;
332
+
333
+ align-items: center;
334
+
335
+
336
+
337
+ .img-logo{
338
+
339
+ width: 55px;
340
+
341
+ height: 55px;
342
+
343
+
344
+
345
+ }
346
+
347
+
348
+
349
+
350
+
351
+ .logo-text{
352
+
353
+ display: block;
354
+
355
+ font-size: 2.4rem;
356
+
357
+ font-weight: bold;
358
+
359
+ margin-left: 16px;
360
+
361
+
362
+
363
+ }
364
+
365
+ }
366
+
367
+
368
+
369
+ .humburger{
370
+
371
+ @include mt{
372
+
373
+ position: fixed;
374
+
375
+ right: 20px;
376
+
377
+ z-index: 3;
378
+
379
+ width: 5%;
380
+
381
+ height: 5%;
382
+
383
+ border-radius: 50%;
384
+
385
+ border: 1px solid #333;
386
+
387
+ box-shadow: 0 0 2rem transparent;
388
+
389
+ }
390
+
391
+
392
+
393
+ .humburger__line{
394
+
395
+ display: none;
396
+
397
+ @include mt{
398
+
399
+ display: block;
400
+
401
+ position: absolute;
402
+
403
+ top: 0;
404
+
405
+ right: 0;
406
+
407
+ bottom: 0;
408
+
409
+ left: 0;
410
+
411
+ margin: auto;
412
+
413
+ width: 18px;
414
+
415
+ height: 2px;
416
+
417
+ background-color: #333;
418
+
419
+ -webkit-transition: inherit;
420
+
421
+ transition: inherit;
422
+
423
+ &::before{
424
+
425
+ position: absolute;
426
+
427
+ content: "";
428
+
429
+ display: inline-block;
430
+
431
+ width: 18px;
432
+
433
+ height: 2px;
434
+
435
+ background-color: #333;
436
+
437
+ -webkit-transition: inherit;
438
+
439
+ transition: inherit;
440
+
441
+ top: -5px;
442
+
443
+ }
444
+
445
+ &::after{
446
+
447
+ position: absolute;
448
+
449
+ content: "";
450
+
451
+ display: inline-block;
452
+
453
+ width: 18px;
454
+
455
+ height: 2px;
456
+
457
+ background-color: #333;
458
+
459
+ -webkit-transition: inherit;
460
+
461
+ transition: inherit;
462
+
463
+ top: 5px;
464
+
465
+ }
466
+
467
+ }
468
+
469
+
470
+
471
+
472
+
473
+
474
+
475
+
476
+
477
+ }
478
+
479
+
480
+
481
+ }
482
+
483
+
484
+
485
+ .nav{
486
+
487
+ @include mt {
488
+
489
+ display: none;
490
+
491
+ }
492
+
493
+ .header-list{
494
+
495
+ display: flex;
496
+
497
+ justify-content: space-between;
498
+
499
+ align-items: center;
500
+
501
+ .header-item{
502
+
503
+ >a{
504
+
505
+ font-weight: bold;
506
+
507
+ }
508
+
509
+ + .header-item{
510
+
511
+ padding-left: 46px;
512
+
513
+ }
514
+
515
+ }
516
+
517
+ }
518
+
519
+ .header-link{
520
+
521
+ width: 155px;
522
+
523
+ height: 37px;
524
+
525
+ >a{
526
+
527
+ color: #fff;
528
+
529
+ font-size: 1.4rem;
530
+
531
+ text-align: center;
532
+
533
+ }
534
+
535
+
536
+
537
+ @include mq {
538
+
539
+ display: none;
540
+
541
+ }
542
+
543
+ @include mt {
544
+
545
+ display: none !important;
546
+
547
+ }
548
+
549
+
550
+
551
+ }
552
+
553
+
554
+
555
+ }
556
+
557
+ }
558
+
559
+
560
+
561
+
562
+
563
+ }
74
564
 
75
565
  ```
76
566
 
77
567
 
78
568
 
79
- ```CSS
80
-
81
- .header {
82
-
83
- background-color: #FFFFFF;
84
-
85
- height: 94px;
86
-
87
- position: fixed;
88
-
89
- top: 0;
90
-
91
- z-index: 9999;
92
-
93
- width: 100%;
94
-
95
- -webkit-box-shadow: 0px 3px 6px #00000029;
96
-
97
- box-shadow: 0px 3px 6px #00000029;
98
-
99
- }
100
-
101
-
102
-
103
- .header .header-inner {
104
-
105
- width: 1022px;
106
-
107
- margin: 0 auto;
108
-
109
- padding: 0 20px;
110
-
111
- display: -webkit-box;
112
-
113
- display: -ms-flexbox;
114
-
115
- display: flex;
116
-
117
- -webkit-box-align: center;
118
-
119
- -ms-flex-align: center;
120
-
121
- align-items: center;
122
-
123
- -webkit-box-pack: justify;
124
-
125
- -ms-flex-pack: justify;
126
-
127
- justify-content: space-between;
128
-
129
- height: 100%;
130
-
131
- }
132
-
133
-
134
-
135
- .header .header-inner .header-ttl {
136
-
137
- display: -webkit-box;
138
-
139
- display: -ms-flexbox;
140
-
141
- display: flex;
142
-
143
- -webkit-box-align: center;
144
-
145
- -ms-flex-align: center;
146
-
147
- align-items: center;
148
-
149
- }
150
-
151
-
152
-
153
- .header .header-inner .header-ttl .img-logo {
154
-
155
- width: 55px;
156
-
157
- height: 55px;
158
-
159
- }
160
-
161
-
162
-
163
- .header .header-inner .header-ttl .logo-text {
164
-
165
- display: block;
166
-
167
- font-size: 2.4rem;
168
-
169
- font-weight: bold;
170
-
171
- margin-left: 16px;
172
-
173
- }
174
-
175
-
176
-
177
- .header .header-inner .humburger__line {
178
-
179
- display: none;
180
-
181
- }
182
-
183
-
184
-
185
- @media print, screen and (max-width: 1024px) {
186
-
187
- .header .header-inner .humburger__line {
188
-
189
- position: absolute;
190
-
191
- top: 0;
192
-
193
- right: 0;
194
-
195
- bottom: 0;
196
-
197
- left: 0;
198
-
199
- margin: auto;
200
-
201
- width: 18px;
202
-
203
- height: 2px;
204
-
205
- background-color: #333;
206
-
207
- -webkit-transition: inherit;
208
-
209
- transition: inherit;
210
-
211
- }
212
-
213
- .header .header-inner .humburger__line ::before {
214
-
215
- top: -5px;
216
-
217
- }
218
-
219
- .header .header-inner .humburger__line ::after {
220
-
221
- top: 5px;
222
-
223
- }
224
-
225
- }
226
-
227
-
228
-
229
- .header .header-inner .nav .header-list {
230
-
231
- display: -webkit-box;
232
-
233
- display: -ms-flexbox;
234
-
235
- display: flex;
236
-
237
- -webkit-box-pack: justify;
238
-
239
- -ms-flex-pack: justify;
240
-
241
- justify-content: space-between;
242
-
243
- -webkit-box-align: center;
244
-
245
- -ms-flex-align: center;
246
-
247
- align-items: center;
248
-
249
- }
250
-
251
-
252
-
253
- .header .header-inner .nav .header-list .header-item > a {
254
-
255
- font-weight: bold;
256
-
257
- }
258
-
259
-
260
-
261
- .header .header-inner .nav .header-list .header-item + .header-item {
262
-
263
- padding-left: 46px;
264
-
265
- }
266
-
267
-
268
-
269
- .header .header-inner .nav .header-link {
270
-
271
- width: 155px;
272
-
273
- height: 37px;
274
-
275
- }
276
-
277
-
278
-
279
- .header .header-inner .nav .header-link > a {
280
-
281
- color: #fff;
282
-
283
- font-size: 1.4rem;
284
-
285
- text-align: center;
286
-
287
- }
288
-
289
-
290
-
291
- ```
292
-
293
-
294
-
295
- 【追記】です。
296
-
297
- ```header.scss
298
-
299
-
300
-
301
- .header{
302
-
303
- background-color: #FFFFFF;
304
-
305
- height: 94px;
306
-
307
- position: fixed;
308
-
309
- top: 0;
310
-
311
- z-index: 9999;
312
-
313
- width: 100%;
314
-
315
- box-shadow: 0px 3px 6px #00000029;
316
-
317
-
318
-
319
- .header-inner{
320
-
321
- max-width: 1022px;
322
-
323
- margin: 0 auto;
324
-
325
- padding: 0 20px;
326
-
327
- display: flex;
328
-
329
- align-items: center;
330
-
331
- justify-content: space-between;
332
-
333
- height: 100%;
334
-
335
-
336
-
337
- .header-ttl{
338
-
339
- display: flex;
340
-
341
- align-items: center;
342
-
343
-
344
-
345
- .img-logo{
346
-
347
- width: 55px;
348
-
349
- height: 55px;
350
-
351
-
352
-
353
- }
354
-
355
-
356
-
357
-
358
-
359
- .logo-text{
360
-
361
- display: block;
362
-
363
- font-size: 2.4rem;
364
-
365
- font-weight: bold;
366
-
367
- margin-left: 16px;
368
-
369
-
370
-
371
- }
372
-
373
- }
374
-
375
-
376
-
377
- .humburger{
378
-
379
- @include mt{
380
-
381
- position: fixed;
382
-
383
- right: 20px;
384
-
385
- z-index: 3;
386
-
387
- width: 5%;
388
-
389
- height: 5%;
390
-
391
- border-radius: 50%;
392
-
393
- border: 1px solid #333;
394
-
395
- box-shadow: 0 0 2rem transparent;
396
-
397
- }
398
-
399
-
400
-
401
- .humburger__line{
402
-
403
- display: none;
404
-
405
- @include mt{
406
-
407
- display: block;
408
-
409
- position: absolute;
410
-
411
- top: 0;
412
-
413
- right: 0;
414
-
415
- bottom: 0;
416
-
417
- left: 0;
418
-
419
- margin: auto;
420
-
421
- width: 18px;
422
-
423
- height: 2px;
424
-
425
- background-color: #333;
426
-
427
- -webkit-transition: inherit;
428
-
429
- transition: inherit;
430
-
431
- &::before{
432
-
433
- position: absolute;
434
-
435
- content: "";
436
-
437
- display: inline-block;
438
-
439
- width: 18px;
440
-
441
- height: 2px;
442
-
443
- background-color: #333;
444
-
445
- -webkit-transition: inherit;
446
-
447
- transition: inherit;
448
-
449
- top: -5px;
450
-
451
- }
452
-
453
- &::after{
454
-
455
- position: absolute;
456
-
457
- content: "";
458
-
459
- display: inline-block;
460
-
461
- width: 18px;
462
-
463
- height: 2px;
464
-
465
- background-color: #333;
466
-
467
- -webkit-transition: inherit;
468
-
469
- transition: inherit;
470
-
471
- top: 5px;
472
-
473
- }
474
-
475
- }
476
-
477
-
478
-
479
-
480
-
481
-
482
-
483
-
484
-
485
- }
486
-
487
-
488
-
489
- }
490
-
491
-
492
-
493
- .nav{
494
-
495
- @include mt {
496
-
497
- display: none;
498
-
499
- }
500
-
501
- .header-list{
502
-
503
- display: flex;
504
-
505
- justify-content: space-between;
506
-
507
- align-items: center;
508
-
509
- .header-item{
510
-
511
- >a{
512
-
513
- font-weight: bold;
514
-
515
- }
516
-
517
- + .header-item{
518
-
519
- padding-left: 46px;
520
-
521
- }
522
-
523
- }
524
-
525
- }
526
-
527
- .header-link{
528
-
529
- width: 155px;
530
-
531
- height: 37px;
532
-
533
- >a{
534
-
535
- color: #fff;
536
-
537
- font-size: 1.4rem;
538
-
539
- text-align: center;
540
-
541
- }
542
-
543
-
544
-
545
- @include mq {
546
-
547
- display: none;
548
-
549
- }
550
-
551
- @include mt {
552
-
553
- display: none !important;
554
-
555
- }
556
-
557
-
558
-
559
- }
560
-
561
-
562
-
563
- }
564
-
565
- }
566
-
567
-
568
-
569
-
570
-
571
- }
572
-
573
- ```
574
-
575
-
576
-
577
569
  ### 試したこと
578
570
 
579
571
  1headerのハンバーガメニューを疑似要素で書こうと思い

4

修正いたしました

2021/09/16 14:44

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  ```HTML
30
30
 
31
- <header class="header">
31
+ <header class="header">
32
32
 
33
33
  <div class="inner header-inner">
34
34
 
@@ -78,8 +78,6 @@
78
78
 
79
79
  ```CSS
80
80
 
81
-
82
-
83
81
  .header {
84
82
 
85
83
  background-color: #FFFFFF;
@@ -292,10 +290,14 @@
292
290
 
293
291
  ```
294
292
 
293
+
294
+
295
- 【追記】
295
+ 【追記】です。
296
296
 
297
297
  ```header.scss
298
298
 
299
+
300
+
299
301
  .header{
300
302
 
301
303
  background-color: #FFFFFF;

3

修正いたしました

2021/09/16 14:43

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -296,8 +296,6 @@
296
296
 
297
297
  ```header.scss
298
298
 
299
- ```header.scss
300
-
301
299
  .header{
302
300
 
303
301
  background-color: #FFFFFF;

2

修正いたしました

2021/09/16 14:40

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -1,7 +1,3 @@
1
- ```ここに言語を入力
2
-
3
- コード
4
-
5
1
  ```### 前提・実現したいこと
6
2
 
7
3
  2点質問です。
@@ -296,6 +292,286 @@
296
292
 
297
293
  ```
298
294
 
295
+ 【追記】
296
+
297
+ ```header.scss
298
+
299
+ ```header.scss
300
+
301
+ .header{
302
+
303
+ background-color: #FFFFFF;
304
+
305
+ height: 94px;
306
+
307
+ position: fixed;
308
+
309
+ top: 0;
310
+
311
+ z-index: 9999;
312
+
313
+ width: 100%;
314
+
315
+ box-shadow: 0px 3px 6px #00000029;
316
+
317
+
318
+
319
+ .header-inner{
320
+
321
+ max-width: 1022px;
322
+
323
+ margin: 0 auto;
324
+
325
+ padding: 0 20px;
326
+
327
+ display: flex;
328
+
329
+ align-items: center;
330
+
331
+ justify-content: space-between;
332
+
333
+ height: 100%;
334
+
335
+
336
+
337
+ .header-ttl{
338
+
339
+ display: flex;
340
+
341
+ align-items: center;
342
+
343
+
344
+
345
+ .img-logo{
346
+
347
+ width: 55px;
348
+
349
+ height: 55px;
350
+
351
+
352
+
353
+ }
354
+
355
+
356
+
357
+
358
+
359
+ .logo-text{
360
+
361
+ display: block;
362
+
363
+ font-size: 2.4rem;
364
+
365
+ font-weight: bold;
366
+
367
+ margin-left: 16px;
368
+
369
+
370
+
371
+ }
372
+
373
+ }
374
+
375
+
376
+
377
+ .humburger{
378
+
379
+ @include mt{
380
+
381
+ position: fixed;
382
+
383
+ right: 20px;
384
+
385
+ z-index: 3;
386
+
387
+ width: 5%;
388
+
389
+ height: 5%;
390
+
391
+ border-radius: 50%;
392
+
393
+ border: 1px solid #333;
394
+
395
+ box-shadow: 0 0 2rem transparent;
396
+
397
+ }
398
+
399
+
400
+
401
+ .humburger__line{
402
+
403
+ display: none;
404
+
405
+ @include mt{
406
+
407
+ display: block;
408
+
409
+ position: absolute;
410
+
411
+ top: 0;
412
+
413
+ right: 0;
414
+
415
+ bottom: 0;
416
+
417
+ left: 0;
418
+
419
+ margin: auto;
420
+
421
+ width: 18px;
422
+
423
+ height: 2px;
424
+
425
+ background-color: #333;
426
+
427
+ -webkit-transition: inherit;
428
+
429
+ transition: inherit;
430
+
431
+ &::before{
432
+
433
+ position: absolute;
434
+
435
+ content: "";
436
+
437
+ display: inline-block;
438
+
439
+ width: 18px;
440
+
441
+ height: 2px;
442
+
443
+ background-color: #333;
444
+
445
+ -webkit-transition: inherit;
446
+
447
+ transition: inherit;
448
+
449
+ top: -5px;
450
+
451
+ }
452
+
453
+ &::after{
454
+
455
+ position: absolute;
456
+
457
+ content: "";
458
+
459
+ display: inline-block;
460
+
461
+ width: 18px;
462
+
463
+ height: 2px;
464
+
465
+ background-color: #333;
466
+
467
+ -webkit-transition: inherit;
468
+
469
+ transition: inherit;
470
+
471
+ top: 5px;
472
+
473
+ }
474
+
475
+ }
476
+
477
+
478
+
479
+
480
+
481
+
482
+
483
+
484
+
485
+ }
486
+
487
+
488
+
489
+ }
490
+
491
+
492
+
493
+ .nav{
494
+
495
+ @include mt {
496
+
497
+ display: none;
498
+
499
+ }
500
+
501
+ .header-list{
502
+
503
+ display: flex;
504
+
505
+ justify-content: space-between;
506
+
507
+ align-items: center;
508
+
509
+ .header-item{
510
+
511
+ >a{
512
+
513
+ font-weight: bold;
514
+
515
+ }
516
+
517
+ + .header-item{
518
+
519
+ padding-left: 46px;
520
+
521
+ }
522
+
523
+ }
524
+
525
+ }
526
+
527
+ .header-link{
528
+
529
+ width: 155px;
530
+
531
+ height: 37px;
532
+
533
+ >a{
534
+
535
+ color: #fff;
536
+
537
+ font-size: 1.4rem;
538
+
539
+ text-align: center;
540
+
541
+ }
542
+
543
+
544
+
545
+ @include mq {
546
+
547
+ display: none;
548
+
549
+ }
550
+
551
+ @include mt {
552
+
553
+ display: none !important;
554
+
555
+ }
556
+
557
+
558
+
559
+ }
560
+
561
+
562
+
563
+ }
564
+
565
+ }
566
+
567
+
568
+
569
+
570
+
571
+ }
572
+
573
+ ```
574
+
299
575
 
300
576
 
301
577
  ### 試したこと

1

修正いたしました

2021/09/16 01:00

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,8 @@
1
+ ```ここに言語を入力
2
+
3
+ コード
4
+
1
- ### 前提・実現したいこと
5
+ ```### 前提・実現したいこと
2
6
 
3
7
  2点質問です。
4
8