質問編集履歴

2

一部変更

2020/12/15 13:03

投稿

mitrasi
mitrasi

スコア49

test CHANGED
File without changes
test CHANGED
@@ -112,7 +112,9 @@
112
112
 
113
113
  ```
114
114
 
115
+
116
+
115
- ```css
117
+ ```CSS
116
118
 
117
119
  /* CSSのリセット(消さないでください) */
118
120
 
@@ -170,176 +172,174 @@
170
172
 
171
173
  padding: 180px 0 100px 0;
172
174
 
175
+
176
+
177
+ }
178
+
179
+
180
+
181
+ .container {
182
+
183
+ width:1170px;
184
+
185
+ margin: 0 auto;
186
+
187
+
188
+
189
+ }
190
+
191
+
192
+
193
+
194
+
195
+ .top-wrapper h1 {
196
+
197
+ font-size:45px;
198
+
199
+ letter-spacing:5px;
200
+
201
+ opacity:0.7;
202
+
203
+ }
204
+
205
+
206
+
207
+ .top-wrapper p {
208
+
209
+ opacity:0.7;
210
+
211
+ margin-bottom: 15px;
212
+
213
+ }
214
+
215
+
216
+
217
+ .btn {
218
+
219
+ color:white;
220
+
221
+ opacity:0.8;
222
+
223
+ padding:8px 24px;
224
+
225
+ display:inline-block;
226
+
227
+ opacity:0.8;
228
+
229
+ border-radius: 4px;
230
+
231
+ }
232
+
233
+
234
+
235
+ .signup {
236
+
237
+ background-color: #239b76;
238
+
239
+ margin:15px 0 15px 0;
240
+
173
241
 
174
242
 
175
-
176
-
177
- }
178
-
179
-
180
-
181
- .container {
182
-
183
- width:1170px;
184
-
185
- margin: 0 auto;
186
-
187
-
188
-
189
- }
190
-
191
-
192
-
193
-
194
-
195
- .top-wrapper h1 {
196
-
197
- font-size:45px;
198
-
199
- letter-spacing:5px;
200
-
201
- opacity:0.7;
202
-
203
- }
204
-
205
-
206
-
207
- .top-wrapper p {
208
-
209
- opacity:0.7;
210
-
211
- margin-bottom: 15px;
212
-
213
- }
214
-
215
-
216
-
217
- .btn {
243
+ }
244
+
245
+
246
+
247
+ .facebook {
248
+
249
+ background-color:#3b5998;
250
+
251
+ margin-right:10px;
252
+
253
+ }
254
+
255
+
256
+
257
+ .twitter {
258
+
259
+ background-color: #55acee;
260
+
261
+ }
262
+
263
+
264
+
265
+ .btn:hover {
266
+
267
+ opacity:1;
268
+
269
+ }
270
+
271
+
272
+
273
+ .fa {
274
+
275
+ margin-right: 5px;
276
+
277
+ }
278
+
279
+
280
+
281
+ /*ここからheader*/
282
+
283
+ header {
284
+
285
+ height:65px;
286
+
287
+ background-color:rgba(34,49,52,0.9);
288
+
289
+ width:100%;
290
+
291
+ position:fixed;
292
+
293
+ top: 0;
294
+
295
+ z-index: 10;
296
+
297
+ }
298
+
299
+
300
+
301
+ .logo {
302
+
303
+ width:124px;
304
+
305
+ margin-top:20px;
306
+
307
+ }
308
+
309
+
310
+
311
+ .header-right {
312
+
313
+ float:right;
314
+
315
+ background-color:rgba(225,225,225,0.3);
316
+
317
+ padding:25px;
318
+
319
+ transition:all 0.5s;
320
+
321
+ }
322
+
323
+
324
+
325
+
326
+
327
+ .header--left {
328
+
329
+ float:left;
330
+
331
+ }
332
+
333
+ .header-right:hover{
334
+
335
+ background-color:rgba(225,225,225,0.5);
336
+
337
+ }
338
+
339
+ .header-right a {
218
340
 
219
341
  color:white;
220
342
 
221
- opacity:0.8;
222
-
223
- padding:8px 24px;
224
-
225
- display:inline-block;
226
-
227
- opacity:0.8;
228
-
229
- border-radius: 4px;
230
-
231
- }
232
-
233
-
234
-
235
- .signup {
236
-
237
- background-color: #239b76;
238
-
239
- margin:15px 0 15px 0;
240
-
241
-
242
-
243
- }
244
-
245
-
246
-
247
- .facebook {
248
-
249
- background-color:#3b5998;
250
-
251
- margin-right:10px;
252
-
253
- }
254
-
255
-
256
-
257
- .twitter {
258
-
259
- background-color: #55acee;
260
-
261
- }
262
-
263
-
264
-
265
- .btn:hover {
266
-
267
- opacity:1;
268
-
269
- }
270
-
271
-
272
-
273
- .fa {
274
-
275
- margin-right: 5px;
276
-
277
- }
278
-
279
-
280
-
281
- /*ここからheader*/
282
-
283
- header {
284
-
285
- height:65px;
286
-
287
- background-color:rgba(34,49,52,0.9);
288
-
289
- width:100%;
290
-
291
- position:fixed;
292
-
293
- top: 0;
294
-
295
- z-index: 10;
296
-
297
- }
298
-
299
-
300
-
301
- .logo {
302
-
303
- width:124px;
304
-
305
- margin-top:20px;
306
-
307
- }
308
-
309
-
310
-
311
- .header-right {
312
-
313
- float:right;
314
-
315
- background-color:rgba(225,225,225,0.3);
316
-
317
- padding:25px;
318
-
319
- transition:all 0.5s;
320
-
321
- }
322
-
323
-
324
-
325
- .header-left {
326
-
327
- float:left;
328
-
329
- }
330
-
331
-
332
-
333
- .header-right:hover{
334
-
335
- background-color:rgba(225,225,225,0.5);
336
-
337
- }
338
-
339
- .header-right a {
340
-
341
- color:white;
342
-
343
343
  line-height:65px;
344
344
 
345
345
  padding: 0 25px;
@@ -356,7 +356,13 @@
356
356
 
357
357
  一通り自分がわかる範囲まで解いた後、解答を見ながら解答にあわせて修正していくという流れでやっています。
358
358
 
359
- だから、基本的には現在解答に限りなく近いと思いますが、
359
+ だから、基本的には現在解答に限りなく近いと思いますが、どこか間違えているのか把握できていない現状です。
360
+
361
+
362
+
363
+ ##参考写真(上部が私の作成、下部が見本です)
364
+
365
+ ![イメージ説明](0c97b4fd152524170236eba29fe7d50a.png)
360
366
 
361
367
 
362
368
 
@@ -366,368 +372,6 @@
366
372
 
367
373
 
368
374
 
369
- 一応、念のためリセットしてもう一回やるつもりですが、リセットすると今回のものを消さざるを得ないため、次リセットしてやり直した時と違いを見比べるという意味でもあえてこの段階で質問として投稿させて頂きます。
370
-
371
-
372
-
373
- ### 前提・実現したいこと
374
-
375
-
376
-
377
- ここに質問の内容を詳しく書いてください。
378
-
379
- Progate:中級:道場より。
380
-
381
-
382
-
383
-
384
-
385
- ### 発生している問題・エラーメッセージ
386
-
387
-
388
-
389
- ```
390
-
391
- 赤く囲まれた部分を見直してみよう
392
-
393
- ```
394
-
395
-
396
-
397
- ### 該当のソースコード
398
-
399
-
400
-
401
- ```HTML
402
-
403
- <!DOCTYPE html>
404
-
405
- <html>
406
-
407
- <head>
408
-
409
- <meta charset="utf-8">
410
-
411
- <title>Progate</title>
412
-
413
- <link rel="stylesheet" href="stylesheet.css">
414
-
415
- <!-- ここでFont Awesomeを読み込んでください -->
416
-
417
- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
418
-
419
- </head>
420
-
421
- <body>
422
-
423
- <!-- ここにコードを書いていきましょう -->
424
-
425
-
426
-
427
- <!--ここからtop-->
428
-
429
- <!--ここからheader-->
430
-
431
- <header>
432
-
433
- <div class="container">
434
-
435
- <div class="header-left">
436
-
437
- <img src="https://prog-8.com/images/html/advanced/main_logo.png" calss="logo">
438
-
439
- </div>
440
-
441
- <div class="header-right">
442
-
443
- <a href="#" class="login">ログイン</a>
444
-
445
- </div></div>
446
-
447
- </header>
448
-
449
- <!--ここまでheader-->
450
-
451
-
452
-
453
- <div class="top-wrapper">
454
-
455
- <div class="container">
456
-
457
- <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
458
-
459
- <p>Progateはオンラインプログラミング学習サービスです。<br>
460
-
461
- 初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
462
-
463
- <a href="#" class="btn signup">新規登録はこちら</a>
464
-
465
- <p>or</p>
466
-
467
- <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
468
-
469
- <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
470
-
471
- </div>
472
-
473
- </div>
474
-
475
- <!--ここまでtop-->
476
-
477
-
478
-
479
- </body>
480
-
481
- </html>
482
-
483
- ```
484
-
485
- ```css
486
-
487
- /* CSSのリセット(消さないでください) */
488
-
489
- html, body,
490
-
491
- ul, ol, li,
492
-
493
- h1, h2, h3, h4, h5, h6, p, div {
494
-
495
- margin: 0;
496
-
497
- padding: 0;
498
-
499
- }
500
-
501
-
502
-
503
- body {
504
-
505
- font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
506
-
507
- }
508
-
509
-
510
-
511
- li {
512
-
513
- list-style: none;
514
-
515
- }
516
-
517
-
518
-
519
- a {
520
-
521
- text-decoration: none;
522
-
523
- }
524
-
525
-
526
-
527
- /* ここからCSSを書いていきましょう */
528
-
529
- /*ここからtop-wrapper*/
530
-
531
- .top-wrapper {
532
-
533
- background-image:url(https://prog-8.com/images/html/advanced/top.png);
534
-
535
- background-size:cover;
536
-
537
- color:white;
538
-
539
- text-align:center;
540
-
541
- padding: 180px 0 100px 0;
542
-
543
-
544
-
545
-
546
-
547
- }
548
-
549
-
550
-
551
- .container {
552
-
553
- width:1170px;
554
-
555
- margin: 0 auto;
556
-
557
-
558
-
559
- }
560
-
561
-
562
-
563
-
564
-
565
- .top-wrapper h1 {
566
-
567
- font-size:45px;
568
-
569
- letter-spacing:5px;
570
-
571
- opacity:0.7;
572
-
573
- }
574
-
575
-
576
-
577
- .top-wrapper p {
578
-
579
- opacity:0.7;
580
-
581
- margin-bottom: 15px;
582
-
583
- }
584
-
585
-
586
-
587
- .btn {
588
-
589
- color:white;
590
-
591
- opacity:0.8;
592
-
593
- padding:8px 24px;
594
-
595
- display:inline-block;
596
-
597
- opacity:0.8;
598
-
599
- border-radius: 4px;
600
-
601
- }
602
-
603
-
604
-
605
- .signup {
606
-
607
- background-color: #239b76;
608
-
609
- margin:15px 0 15px 0;
610
-
611
-
612
-
613
- }
614
-
615
-
616
-
617
- .facebook {
618
-
619
- background-color:#3b5998;
620
-
621
- margin-right:10px;
622
-
623
- }
624
-
625
-
626
-
627
- .twitter {
628
-
629
- background-color: #55acee;
630
-
631
- }
632
-
633
-
634
-
635
- .btn:hover {
636
-
637
- opacity:1;
638
-
639
- }
640
-
641
-
642
-
643
- .fa {
644
-
645
- margin-right: 5px;
646
-
647
- }
648
-
649
-
650
-
651
- /*ここからheader*/
652
-
653
- header {
654
-
655
- height:65px;
656
-
657
- background-color:rgba(34,49,52,0.9);
658
-
659
- width:100%;
660
-
661
- position:fixed;
662
-
663
- top: 0;
664
-
665
- z-index: 10;
666
-
667
- }
668
-
669
-
670
-
671
- .logo {
672
-
673
- width:124px;
674
-
675
- margin-top:20px;
676
-
677
- }
678
-
679
-
680
-
681
- .header-right {
682
-
683
- float:right;
684
-
685
- background-color:rgba(225,225,225,0.3);
686
-
687
- padding:25px;
688
-
689
- transition:all 5s;
690
-
691
- }
692
-
693
-
694
-
695
- .header-right:hover{
696
-
697
- background-color:rgba(225,225,225,0.5);
698
-
699
- }
700
-
701
- .header-right a {
702
-
703
- color:white;
704
-
705
- line-height:65px;
706
-
707
- padding: 0 25px;
708
-
709
- display:block;
710
-
711
- }
712
-
713
- ```
714
-
715
- ### 試したこと
716
-
717
-
718
-
719
- 一通り自分がわかる範囲まで解いた後、解答を見ながら解答にあわせて修正していくという流れでやっています。
720
-
721
- ですから、基本的には現在解答に限りなく近いと思いますがなぜか上手くいきません????
722
-
723
-
724
-
725
- ### 補足情報(FW/ツールのバージョンなど)
726
-
727
- Windows
728
-
729
-
730
-
731
375
  一応、なるべく自力でできるようリセットしてもう一回やるつもりですが、リセットすると今回のものを消さざるを得ないため、次リセットしてやり直した時と違いを見比べ、また上手くいかなかった場合のために、あえてこの段階で質問として投稿させて頂きます。
732
376
 
733
377
  回答を見に来る前にうまくできたら自己解決にしますが、自己解決になっていなければ純粋に質問としてご回答を待ち望んでいる状況になりますので、どうぞお力添えをよろしくお願いいたします。

1

コード CSS  一部訂正

2020/12/15 13:03

投稿

mitrasi
mitrasi

スコア49

test CHANGED
File without changes
test CHANGED
@@ -316,6 +316,376 @@
316
316
 
317
317
  padding:25px;
318
318
 
319
+ transition:all 0.5s;
320
+
321
+ }
322
+
323
+
324
+
325
+ .header-left {
326
+
327
+ float:left;
328
+
329
+ }
330
+
331
+
332
+
333
+ .header-right:hover{
334
+
335
+ background-color:rgba(225,225,225,0.5);
336
+
337
+ }
338
+
339
+ .header-right a {
340
+
341
+ color:white;
342
+
343
+ line-height:65px;
344
+
345
+ padding: 0 25px;
346
+
347
+ display:block;
348
+
349
+ }
350
+
351
+ ```
352
+
353
+ ### 試したこと
354
+
355
+
356
+
357
+ 一通り自分がわかる範囲まで解いた後、解答を見ながら解答にあわせて修正していくという流れでやっています。
358
+
359
+ だから、基本的には現在解答に限りなく近いと思いますが、
360
+
361
+
362
+
363
+ ### 補足情報(FW/ツールのバージョンなど)
364
+
365
+ Windows
366
+
367
+
368
+
369
+ 一応、念のためリセットしてもう一回やるつもりですが、リセットすると今回のものを消さざるを得ないため、次リセットしてやり直した時と違いを見比べるという意味でもあえてこの段階で質問として投稿させて頂きます。
370
+
371
+
372
+
373
+ ### 前提・実現したいこと
374
+
375
+
376
+
377
+ ここに質問の内容を詳しく書いてください。
378
+
379
+ Progate:中級:道場より。
380
+
381
+
382
+
383
+
384
+
385
+ ### 発生している問題・エラーメッセージ
386
+
387
+
388
+
389
+ ```
390
+
391
+ 赤く囲まれた部分を見直してみよう
392
+
393
+ ```
394
+
395
+
396
+
397
+ ### 該当のソースコード
398
+
399
+
400
+
401
+ ```HTML
402
+
403
+ <!DOCTYPE html>
404
+
405
+ <html>
406
+
407
+ <head>
408
+
409
+ <meta charset="utf-8">
410
+
411
+ <title>Progate</title>
412
+
413
+ <link rel="stylesheet" href="stylesheet.css">
414
+
415
+ <!-- ここでFont Awesomeを読み込んでください -->
416
+
417
+ <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
418
+
419
+ </head>
420
+
421
+ <body>
422
+
423
+ <!-- ここにコードを書いていきましょう -->
424
+
425
+
426
+
427
+ <!--ここからtop-->
428
+
429
+ <!--ここからheader-->
430
+
431
+ <header>
432
+
433
+ <div class="container">
434
+
435
+ <div class="header-left">
436
+
437
+ <img src="https://prog-8.com/images/html/advanced/main_logo.png" calss="logo">
438
+
439
+ </div>
440
+
441
+ <div class="header-right">
442
+
443
+ <a href="#" class="login">ログイン</a>
444
+
445
+ </div></div>
446
+
447
+ </header>
448
+
449
+ <!--ここまでheader-->
450
+
451
+
452
+
453
+ <div class="top-wrapper">
454
+
455
+ <div class="container">
456
+
457
+ <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
458
+
459
+ <p>Progateはオンラインプログラミング学習サービスです。<br>
460
+
461
+ 初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
462
+
463
+ <a href="#" class="btn signup">新規登録はこちら</a>
464
+
465
+ <p>or</p>
466
+
467
+ <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
468
+
469
+ <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
470
+
471
+ </div>
472
+
473
+ </div>
474
+
475
+ <!--ここまでtop-->
476
+
477
+
478
+
479
+ </body>
480
+
481
+ </html>
482
+
483
+ ```
484
+
485
+ ```css
486
+
487
+ /* CSSのリセット(消さないでください) */
488
+
489
+ html, body,
490
+
491
+ ul, ol, li,
492
+
493
+ h1, h2, h3, h4, h5, h6, p, div {
494
+
495
+ margin: 0;
496
+
497
+ padding: 0;
498
+
499
+ }
500
+
501
+
502
+
503
+ body {
504
+
505
+ font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
506
+
507
+ }
508
+
509
+
510
+
511
+ li {
512
+
513
+ list-style: none;
514
+
515
+ }
516
+
517
+
518
+
519
+ a {
520
+
521
+ text-decoration: none;
522
+
523
+ }
524
+
525
+
526
+
527
+ /* ここからCSSを書いていきましょう */
528
+
529
+ /*ここからtop-wrapper*/
530
+
531
+ .top-wrapper {
532
+
533
+ background-image:url(https://prog-8.com/images/html/advanced/top.png);
534
+
535
+ background-size:cover;
536
+
537
+ color:white;
538
+
539
+ text-align:center;
540
+
541
+ padding: 180px 0 100px 0;
542
+
543
+
544
+
545
+
546
+
547
+ }
548
+
549
+
550
+
551
+ .container {
552
+
553
+ width:1170px;
554
+
555
+ margin: 0 auto;
556
+
557
+
558
+
559
+ }
560
+
561
+
562
+
563
+
564
+
565
+ .top-wrapper h1 {
566
+
567
+ font-size:45px;
568
+
569
+ letter-spacing:5px;
570
+
571
+ opacity:0.7;
572
+
573
+ }
574
+
575
+
576
+
577
+ .top-wrapper p {
578
+
579
+ opacity:0.7;
580
+
581
+ margin-bottom: 15px;
582
+
583
+ }
584
+
585
+
586
+
587
+ .btn {
588
+
589
+ color:white;
590
+
591
+ opacity:0.8;
592
+
593
+ padding:8px 24px;
594
+
595
+ display:inline-block;
596
+
597
+ opacity:0.8;
598
+
599
+ border-radius: 4px;
600
+
601
+ }
602
+
603
+
604
+
605
+ .signup {
606
+
607
+ background-color: #239b76;
608
+
609
+ margin:15px 0 15px 0;
610
+
611
+
612
+
613
+ }
614
+
615
+
616
+
617
+ .facebook {
618
+
619
+ background-color:#3b5998;
620
+
621
+ margin-right:10px;
622
+
623
+ }
624
+
625
+
626
+
627
+ .twitter {
628
+
629
+ background-color: #55acee;
630
+
631
+ }
632
+
633
+
634
+
635
+ .btn:hover {
636
+
637
+ opacity:1;
638
+
639
+ }
640
+
641
+
642
+
643
+ .fa {
644
+
645
+ margin-right: 5px;
646
+
647
+ }
648
+
649
+
650
+
651
+ /*ここからheader*/
652
+
653
+ header {
654
+
655
+ height:65px;
656
+
657
+ background-color:rgba(34,49,52,0.9);
658
+
659
+ width:100%;
660
+
661
+ position:fixed;
662
+
663
+ top: 0;
664
+
665
+ z-index: 10;
666
+
667
+ }
668
+
669
+
670
+
671
+ .logo {
672
+
673
+ width:124px;
674
+
675
+ margin-top:20px;
676
+
677
+ }
678
+
679
+
680
+
681
+ .header-right {
682
+
683
+ float:right;
684
+
685
+ background-color:rgba(225,225,225,0.3);
686
+
687
+ padding:25px;
688
+
319
689
  transition:all 5s;
320
690
 
321
691
  }
@@ -348,7 +718,7 @@
348
718
 
349
719
  一通り自分がわかる範囲まで解いた後、解答を見ながら解答にあわせて修正していくという流れでやっています。
350
720
 
351
- から、基本的には現在解答に限りなく近いと思いますが
721
+ ですから、基本的には現在解答に限りなく近いと思いますがなぜか上手くいきません????
352
722
 
353
723
 
354
724
 
@@ -358,368 +728,6 @@
358
728
 
359
729
 
360
730
 
361
- 一応、念のためリセットしてもう一回やるつもりですが、リセットすると今回のものを消さざるを得ないため、次リセットしてやり直した時と違いを見比べるという意味でもあえてこの段階で質問として投稿させて頂きます。
362
-
363
-
364
-
365
- ### 前提・実現したいこと
366
-
367
-
368
-
369
- ここに質問の内容を詳しく書いてください。
370
-
371
- Progate:中級:道場より。
372
-
373
-
374
-
375
-
376
-
377
- ### 発生している問題・エラーメッセージ
378
-
379
-
380
-
381
- ```
382
-
383
- 赤く囲まれた部分を見直してみよう
384
-
385
- ```
386
-
387
-
388
-
389
- ### 該当のソースコード
390
-
391
-
392
-
393
- ```HTML
394
-
395
- <!DOCTYPE html>
396
-
397
- <html>
398
-
399
- <head>
400
-
401
- <meta charset="utf-8">
402
-
403
- <title>Progate</title>
404
-
405
- <link rel="stylesheet" href="stylesheet.css">
406
-
407
- <!-- ここでFont Awesomeを読み込んでください -->
408
-
409
- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
410
-
411
- </head>
412
-
413
- <body>
414
-
415
- <!-- ここにコードを書いていきましょう -->
416
-
417
-
418
-
419
- <!--ここからtop-->
420
-
421
- <!--ここからheader-->
422
-
423
- <header>
424
-
425
- <div class="container">
426
-
427
- <div class="header-left">
428
-
429
- <img src="https://prog-8.com/images/html/advanced/main_logo.png" calss="logo">
430
-
431
- </div>
432
-
433
- <div class="header-right">
434
-
435
- <a href="#" class="login">ログイン</a>
436
-
437
- </div></div>
438
-
439
- </header>
440
-
441
- <!--ここまでheader-->
442
-
443
-
444
-
445
- <div class="top-wrapper">
446
-
447
- <div class="container">
448
-
449
- <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
450
-
451
- <p>Progateはオンラインプログラミング学習サービスです。<br>
452
-
453
- 初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
454
-
455
- <a href="#" class="btn signup">新規登録はこちら</a>
456
-
457
- <p>or</p>
458
-
459
- <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
460
-
461
- <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
462
-
463
- </div>
464
-
465
- </div>
466
-
467
- <!--ここまでtop-->
468
-
469
-
470
-
471
- </body>
472
-
473
- </html>
474
-
475
- ```
476
-
477
- ```css
478
-
479
- /* CSSのリセット(消さないでください) */
480
-
481
- html, body,
482
-
483
- ul, ol, li,
484
-
485
- h1, h2, h3, h4, h5, h6, p, div {
486
-
487
- margin: 0;
488
-
489
- padding: 0;
490
-
491
- }
492
-
493
-
494
-
495
- body {
496
-
497
- font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
498
-
499
- }
500
-
501
-
502
-
503
- li {
504
-
505
- list-style: none;
506
-
507
- }
508
-
509
-
510
-
511
- a {
512
-
513
- text-decoration: none;
514
-
515
- }
516
-
517
-
518
-
519
- /* ここからCSSを書いていきましょう */
520
-
521
- /*ここからtop-wrapper*/
522
-
523
- .top-wrapper {
524
-
525
- background-image:url(https://prog-8.com/images/html/advanced/top.png);
526
-
527
- background-size:cover;
528
-
529
- color:white;
530
-
531
- text-align:center;
532
-
533
- padding: 180px 0 100px 0;
534
-
535
-
536
-
537
-
538
-
539
- }
540
-
541
-
542
-
543
- .container {
544
-
545
- width:1170px;
546
-
547
- margin: 0 auto;
548
-
549
-
550
-
551
- }
552
-
553
-
554
-
555
-
556
-
557
- .top-wrapper h1 {
558
-
559
- font-size:45px;
560
-
561
- letter-spacing:5px;
562
-
563
- opacity:0.7;
564
-
565
- }
566
-
567
-
568
-
569
- .top-wrapper p {
570
-
571
- opacity:0.7;
572
-
573
- margin-bottom: 15px;
574
-
575
- }
576
-
577
-
578
-
579
- .btn {
580
-
581
- color:white;
582
-
583
- opacity:0.8;
584
-
585
- padding:8px 24px;
586
-
587
- display:inline-block;
588
-
589
- opacity:0.8;
590
-
591
- border-radius: 4px;
592
-
593
- }
594
-
595
-
596
-
597
- .signup {
598
-
599
- background-color: #239b76;
600
-
601
- margin:15px 0 15px 0;
602
-
603
-
604
-
605
- }
606
-
607
-
608
-
609
- .facebook {
610
-
611
- background-color:#3b5998;
612
-
613
- margin-right:10px;
614
-
615
- }
616
-
617
-
618
-
619
- .twitter {
620
-
621
- background-color: #55acee;
622
-
623
- }
624
-
625
-
626
-
627
- .btn:hover {
628
-
629
- opacity:1;
630
-
631
- }
632
-
633
-
634
-
635
- .fa {
636
-
637
- margin-right: 5px;
638
-
639
- }
640
-
641
-
642
-
643
- /*ここからheader*/
644
-
645
- header {
646
-
647
- height:65px;
648
-
649
- background-color:rgba(34,49,52,0.9);
650
-
651
- width:100%;
652
-
653
- position:fixed;
654
-
655
- top: 0;
656
-
657
- z-index: 10;
658
-
659
- }
660
-
661
-
662
-
663
- .logo {
664
-
665
- width:124px;
666
-
667
- margin-top:20px;
668
-
669
- }
670
-
671
-
672
-
673
- .header-right {
674
-
675
- float:right;
676
-
677
- background-color:rgba(225,225,225,0.3);
678
-
679
- padding:25px;
680
-
681
- transition:all 5s;
682
-
683
- }
684
-
685
-
686
-
687
- .header-right:hover{
688
-
689
- background-color:rgba(225,225,225,0.5);
690
-
691
- }
692
-
693
- .header-right a {
694
-
695
- color:white;
696
-
697
- line-height:65px;
698
-
699
- padding: 0 25px;
700
-
701
- display:block;
702
-
703
- }
704
-
705
- ```
706
-
707
- ### 試したこと
708
-
709
-
710
-
711
- 一通り自分がわかる範囲まで解いた後、解答を見ながら解答にあわせて修正していくという流れでやっています。
712
-
713
- ですから、基本的には現在解答に限りなく近いと思いますがなぜか上手くいきません????
714
-
715
-
716
-
717
- ### 補足情報(FW/ツールのバージョンなど)
718
-
719
- Windows
720
-
721
-
722
-
723
731
  一応、なるべく自力でできるようリセットしてもう一回やるつもりですが、リセットすると今回のものを消さざるを得ないため、次リセットしてやり直した時と違いを見比べ、また上手くいかなかった場合のために、あえてこの段階で質問として投稿させて頂きます。
724
732
 
725
733
  回答を見に来る前にうまくできたら自己解決にしますが、自己解決になっていなければ純粋に質問としてご回答を待ち望んでいる状況になりますので、どうぞお力添えをよろしくお願いいたします。