質問編集履歴

2

css追加しました。

2019/05/24 09:12

投稿

panda
panda

スコア20

test CHANGED
File without changes
test CHANGED
@@ -386,6 +386,196 @@
386
386
 
387
387
 
388
388
 
389
+ ```css
390
+
391
+ /*====================================
392
+
393
+
394
+
395
+ 1. Sidebar
396
+
397
+
398
+
399
+ ====================================*/
400
+
401
+ .sidebar {
402
+
403
+ position: fixed;
404
+
405
+ top: 0;
406
+
407
+ bottom: 0;
408
+
409
+ left: 0;
410
+
411
+ z-index: 100; /* ナビゲーションバーの背面 */
412
+
413
+ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
414
+
415
+ text-align: center;
416
+
417
+ }
418
+
419
+ .logo {
420
+
421
+ font-weight: 700;
422
+
423
+ margin-bottom: 2em;
424
+
425
+ text-transform: uppercase;
426
+
427
+ font-size: 32px;
428
+
429
+ }
430
+
431
+
432
+
433
+ .sidebar-sticky {
434
+
435
+ position: relative;
436
+
437
+ top: 0;
438
+
439
+ height: calc(100vh - 48px);
440
+
441
+ overflow: hidden;
442
+
443
+ }
444
+
445
+ .nav-item {
446
+
447
+ margin-bottom: 10px;
448
+
449
+ list-style: none;
450
+
451
+ }
452
+
453
+
454
+
455
+ .nav-link {
456
+
457
+ color: #3C474E;
458
+
459
+ display: inline-block;
460
+
461
+ font-size: 13px;
462
+
463
+ font-weight: 600;
464
+
465
+ letter-spacing: .2em;
466
+
467
+ position: relative;
468
+
469
+ padding: 10px 10px;
470
+
471
+ }
472
+
473
+ .nav-link::after {
474
+
475
+ content: "";
476
+
477
+ position: absolute;
478
+
479
+ height: 2px;
480
+
481
+ bottom: 7px;
482
+
483
+ left: 10px;
484
+
485
+ right: 12px;
486
+
487
+ background-color: #885988;
488
+
489
+ visibility: hidden;
490
+
491
+
492
+
493
+ -webkit-transform: scaleX(0);
494
+
495
+ -moz-transform: scaleX(0);
496
+
497
+ -ms-transform: scaleX(0);
498
+
499
+ -o-transform: scaleX(0);
500
+
501
+ transform: scaleX(0);
502
+
503
+
504
+
505
+ -webkit-transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
506
+
507
+ -moz-transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
508
+
509
+ -ms-transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
510
+
511
+ -o-transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
512
+
513
+ transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
514
+
515
+ }
516
+
517
+ .nav-link:hover {
518
+
519
+ color: #000;
520
+
521
+ }
522
+
523
+ .nav-link.active::after,
524
+
525
+ .nav-link:hover::after {
526
+
527
+ visibility: visible;
528
+
529
+
530
+
531
+ -webkit-transform: scaleX(1);
532
+
533
+ -moz-transform: scaleX(1);
534
+
535
+ -ms-transform: scaleX(1);
536
+
537
+ -o-transform: scaleX(1);
538
+
539
+ transform: scaleX(1);
540
+
541
+ }
542
+
543
+
544
+
545
+ .footer {
546
+
547
+ position: absolute;
548
+
549
+ bottom: 130px;
550
+
551
+ font-size: 14px;
552
+
553
+ text-align: center;
554
+
555
+ width: 100%;
556
+
557
+ font-weight: 400;
558
+
559
+ color: rgba(0, 0, 0, 0.6);
560
+
561
+ padding: 0 10px;
562
+
563
+ }
564
+
565
+
566
+
567
+ .sns-icon li a {
568
+
569
+ color: rgba(0, 0, 0, 0.6);
570
+
571
+ }
572
+
573
+
574
+
575
+ ```
576
+
577
+
578
+
389
579
 
390
580
 
391
581
  ### 試したこと

1

タグ追加

2019/05/24 09:12

投稿

panda
panda

スコア20

test CHANGED
File without changes
test CHANGED
File without changes