質問編集履歴

3

①②③の追加

2019/12/12 05:11

投稿

japan_japan
japan_japan

スコア7

test CHANGED
File without changes
test CHANGED
@@ -18,6 +18,8 @@
18
18
 
19
19
  <div class="first-nav-bar">
20
20
 
21
+   <!①ハンバーガーボタン>
22
+
21
23
  <div class="hamburger-menu">
22
24
 
23
25
  <input type="checkbox" id="hamburger-menu-button">
@@ -26,6 +28,8 @@
26
28
 
27
29
  <label for="hamburger-menu-button" id="close-button"></label>
28
30
 
31
+ <!①をクリックで左から出現するサイドバー>
32
+
29
33
  <div class="side-menu-bar">
30
34
 
31
35
  <div class="hello-login">
@@ -58,6 +62,8 @@
58
62
 
59
63
 
60
64
 
65
+   <!②アマゾンロゴ>
66
+
61
67
  <div class="amazon-logo-area">
62
68
 
63
69
  <a>
@@ -140,7 +146,9 @@
140
146
 
141
147
  <div class="delivery-address-link-border">
142
148
 
143
- <a>
149
+ <!③お届け先に付けたリンク機能>
150
+
151
+ <a href="#">
144
152
 
145
153
  <div class="map-pointer-icon"></div>
146
154
 
@@ -294,6 +302,8 @@
294
302
 
295
303
 
296
304
 
305
+ <!左からサイドバーが出現するためのボタン>
306
+
297
307
  .open-button {
298
308
 
299
309
  width: 40px;
@@ -320,7 +330,7 @@
320
330
 
321
331
  }
322
332
 
323
-
333
+ <!左から出現するサイドバー>
324
334
 
325
335
  .side-menu-bar {
326
336
 
@@ -346,7 +356,7 @@
346
356
 
347
357
  }
348
358
 
349
-
359
+ <!左から出現するサイドバー>
350
360
 
351
361
  #hamburger-menu-button:checked ~ .side-menu-bar {
352
362
 
@@ -354,7 +364,7 @@
354
364
 
355
365
  }
356
366
 
357
-
367
+ <!サイドバーを左へしまうボタン>
358
368
 
359
369
  #close-button {
360
370
 
@@ -376,7 +386,7 @@
376
386
 
377
387
  }
378
388
 
379
-
389
+ <!サイドバーが現れた時の余白の影>
380
390
 
381
391
  #hamburger-menu-button:checked ~ #close-button{
382
392
 
@@ -488,6 +498,8 @@
488
498
 
489
499
 
490
500
 
501
+ <!③お届け先に付けたhover機能(白い枠線の出現)>
502
+
491
503
  .amazon-logo-area:hover {
492
504
 
493
505
  border: 1px solid white;

2

HTML CSSを修正

2019/12/12 05:11

投稿

japan_japan
japan_japan

スコア7

test CHANGED
File without changes
test CHANGED
@@ -14,864 +14,886 @@
14
14
 
15
15
  ```
16
16
 
17
- <body>
17
+ HTML
18
-
19
- <header>
18
+
20
-
21
- <div class="first-nav-bar">
19
+ <div class="first-nav-bar">
22
-
20
+
23
- <div class="hamburger-menu">
21
+ <div class="hamburger-menu">
24
-
22
+
25
- <input type="checkbox" id="hamburger-menu-button">
23
+ <input type="checkbox" id="hamburger-menu-button">
26
-
24
+
27
- <label for="hamburger-menu-button" class="amazon-sprite open-button"></label>
25
+ <label for="hamburger-menu-button" class="open-button"></label>
28
-
26
+
29
- <label for="hamburger-menu-button" id="close-button"></label>
27
+ <label for="hamburger-menu-button" id="close-button"></label>
30
-
28
+
31
- <div class="side-menu-bar">
29
+ <div class="side-menu-bar">
32
-
30
+
33
- <div class="hello-login">
31
+ <div class="hello-login">
32
+
34
-
33
+ <h4>
34
+
35
+ <a>
36
+
37
+ <span class="human-icon"></span>
38
+
35
- <h4> <a href=""><div class="amazon-sprite human-icon"></div><span class="hello-login-bar">こんにちは</span></a></h4>
39
+ <span class="hello-login-bar"></span>
40
+
36
-
41
+ </a>
42
+
43
+ </h4>
44
+
37
- <ul class="sidebar-menu-item">
45
+ <ul class="sidebar-menu-item">
38
-
39
- <li class="nav-item" id="buy-per-category">カテゴリ別</li>
46
+
40
-
41
- <li class="nav-item hover-grey">Prime Video<i class="fas fa-chevron-right"></i></li>
47
+ <li class="nav-item hover-grey">Prime Video<i class="fas fa-chevron-right"></i></li>
48
+
42
-
49
+ <li class="nav-item hover-grey">Amazon Music<i class="fas fa-chevron-right"></i></li>
50
+
43
- </ul>
51
+ </ul>
44
-
52
+
45
- </div>
53
+ </div>
54
+
55
+ </div>
56
+
57
+ </div>
58
+
59
+
60
+
61
+ <div class="amazon-logo-area">
62
+
63
+ <a>
64
+
65
+ <div class="amazon-sprite amazon-smile-logo"></div>
66
+
67
+ <div class="amazon-sprite amazon-co-jp"></div>
68
+
69
+ </a>
70
+
71
+ <a class="start-prime-video">プライムを始める</a>
72
+
73
+ </div>
74
+
75
+
76
+
77
+ <div class="search-box">
78
+
79
+ <div class="input-group">
80
+
81
+ <div class="input-group-prepend">
82
+
83
+ <button type="button" class="category-button">
84
+
85
+ <span class="all-category">すべて<i class="fas fa-caret-down"></i></span>
86
+
87
+ </button>
88
+
89
+ </div>
90
+
91
+ <input type="text" class="form-control" id="search-box">
92
+
93
+ <div class="input-group-append">
94
+
95
+ <button type="submit" class="amazon-sprite search-icon"></button>
46
96
 
47
97
  </div>
48
98
 
49
-
99
+ </div>
100
+
50
-
101
+ </div>
102
+
103
+
104
+
105
+ <div class="top-menu-bar">
106
+
107
+ <nav class="nav">
108
+
109
+ <a class="nav-link-a global-icon">
110
+
111
+ <i class="fas fa-globe"></i><i class="fas fa-caret-down grey"></i>
112
+
113
+ </a>
114
+
115
+ <a class="nav-link-a hello-log-in">
116
+
117
+ <span class="grey">こんにちは、ログイン</span><br><span class="white bold">アカウント&リスト<i class="fas fa-caret-down grey"></i></span>
118
+
119
+ </a>
120
+
121
+ <a class="nav-link-a order-list"><br><span class="white bold">注文履歴</span></a>
122
+
123
+ <a class="nav-link-a register-now"><span class="grey">今すぐ登録</span><br><span class="white bold">プライム<i class="fas fa-caret-down grey"></i></span></a>
124
+
125
+ <a class="nav-link-a shopping-cart"><span class="white bold">カート</span></a>
126
+
127
+ </nav>
128
+
129
+ </div>
130
+
131
+ </div>
132
+
133
+
134
+
51
- <div class="amazon-logo-area">
135
+ <div class="second-nav-bar">
136
+
52
-
137
+ <div class="second-meun-bar-left">
138
+
139
+ <div class="delivery-address-link">
140
+
53
- <a href=""><div class="amazon-sprite amazon-smile-logo"></div><div class="amazon-sprite amazon-co-jp"></div></a>
141
+ <div class="delivery-address-link-border">
142
+
54
-
143
+ <a>
144
+
55
- <a href="" title="" class="start-prime-video">プライム</a>
145
+ <div class="map-pointer-icon"></div>
146
+
147
+ <span class="address1">お届け先</span><br>
148
+
149
+ <span class="address2">伊丹市 664-0006</span>
150
+
151
+ </a>
56
152
 
57
153
  </div>
58
154
 
59
-
155
+ </div>
156
+
60
-
157
+ </div>
158
+
159
+
160
+
61
- <div class="top-menu-bar">
161
+ <div class="second-menu-bar-middle">
162
+
62
-
163
+ <div class="second-menu-bar-upper-bar">
164
+
63
- <nav class="nav">
165
+ <nav class="nav">
166
+
64
-
167
+ <a class="nav-link-b amazon-point" href="#">Amazonポイント</a>
168
+
169
+ <span class="double-collon">:</span>
170
+
171
+ <a class="nav-link-b" href="#">残高を確認</a>
172
+
173
+ </nav>
174
+
175
+ </div>
176
+
177
+
178
+
179
+ <div class="second-menu-bar-lower-bar">
180
+
181
+ <nav class="nav">
182
+
183
+ <a class="nav-link-b">タイムセール</a>
184
+
65
- <a class="nav-link-a global-icon" href="">
185
+ <a class="nav-link-b">クーポン</a>
66
-
186
+
67
- <i class="fas fa-globe"></i><i class="fas fa-caret-down grey"></i>
187
+ <a class="nav-link-b">AmazonBasics</a>
188
+
68
-
189
+ <a class="nav-link-b">ランキング</a>
190
+
191
+ <a class="nav-link-b">ギフトランキング</a>
192
+
193
+ <a class="nav-link-b">新着商品</a>
194
+
195
+ <a class="nav-link-b">ギフト券</a>
196
+
197
+ <a class="nav-link-b">カスタマーサービス</a>
198
+
199
+ </nav>
200
+
201
+ </div>
202
+
203
+ </div>
204
+
205
+
206
+
207
+ <div class="second-menu-bar-right">
208
+
209
+ <a>
210
+
211
+ <img src="https://images-fe.ssl-images-amazon.com/images/G/09/Digital_Video/svod/2019H2/CrossSite/Gateway/PrimeVideo_GW_DesktopSWM_400x39_T2_A._CB451520023_.jpg">
212
+
69
- </a>
213
+ </a>
70
-
71
- <a class="nav-link-a hello-log-in" href="">
214
+
72
-
73
- <span class="grey">こんにちは/span><br><span class="white bold">アカウント<i class="fas fa-caret-down grey"></i></span></a>
74
-
75
- <a class="nav-link-a order-list" href=""><br><span class="white bold">注文履歴</span></a>
76
-
77
- <a class="nav-link-a register-now" href=""><span class="grey">登録</span><br><span class="white bold">プライム<i class="fas fa-caret-down grey"></i></span></a>
78
-
79
- <a class="nav-link-a amazon-sprite shopping-cart" href=""><span class="white bold">カート</span></a>
80
-
81
- </nav>
82
-
83
- </div>
215
+ </div>
216
+
217
+ </div>
218
+
219
+
220
+
221
+ <div class="headline-carousel">
222
+
223
+ <div id="headline-carousel" class="carousel slide" data-ride="carousel">
224
+
225
+ <div class="carousel-inner">
226
+
227
+ <div class="carousel-item active">
228
+
229
+ <img src="https://images-fe.ssl-images-amazon.com/images/G/09/2018/prime/gw/1139778_new_gw_hero_prime2_3000x1200._CB483219146_.jpg" class="d-block w-100" alt="...">
84
230
 
85
231
  </div>
86
232
 
87
-
88
-
89
-
90
-
91
- <div class="second-menu-bar">
92
-
93
- <div class="second-meun-bar-left">
94
-
95
- <div class="delivery-address-link">
96
-
97
- <div class="delivery-address-link-border">
98
-
99
- <a href="">
100
-
101
- <div class="amazon-sprite map-pointer-icon"></div>
102
-
103
- <span class="address1">お届け先</span><br>
104
-
105
- <span class="address2">伊丹市 664-0006</span>
106
-
107
- </a>
108
-
109
- </div>
110
-
111
- </div>
112
-
113
- </div>
114
-
115
-
116
-
117
- <div class="second-menu-bar-middle">
118
-
119
- <div class="second-menu-bar-upper-bar">
120
-
121
- <nav class="nav">
122
-
123
- <a class="nav-link-b amazon-point" href="">ポイント</a><span class="double-collon">:</span><a class="nav-link-b" href="">残高を確認</a>
124
-
125
- </nav>
126
-
127
- </div>
128
-
129
-
130
-
131
- <div class="second-menu-bar-lower-bar">
132
-
133
- <nav class="nav">
134
-
135
- <a class="nav-link-b" href="">タイムセール</a>
136
-
137
- <a class="nav-link-b" href="">クーポン</a>
138
-
139
- </nav>
140
-
141
- </div>
142
-
143
- </div>
144
-
145
-
146
-
147
- <div class="second-menu-bar-right">
148
-
149
- <a href=""><img src=""></a>
150
-
151
- </div>
233
+ <div class="carousel-item">
234
+
235
+ <img src="https://images-fe.ssl-images-amazon.com/images/G/09/JP-hq/2019/img/Amazon_Pantry/XCM_Manual_1163066_FreeShip_201903_Max9unitsxE2x91xA1_3000x1200_Amazon_Pantry_XCM_Manual_gw_hero_3000x1200_1552959950_jpg._CB467804150_.jpg" class="d-block w-100" alt="...">
152
236
 
153
237
  </div>
154
238
 
155
- </header>
156
-
157
-
158
-
159
- <div class=""></div>
160
-
161
- <div class="headline-carousel">
162
-
163
- <div id="headline-carousel" class="carousel slide" data-ride="carousel">
164
-
165
- <div class="carousel-inner">
166
-
167
- <div class="carousel-item">
168
-
169
- <img src="">
170
-
171
- </div>
172
-
173
- </div>
174
-
175
- </div>
176
-
177
- <a class="carousel-control-prev" href="#headline-carousel" role="button" data-slide="prev">
178
-
179
- <span class="carousel-control-prev-icon" aria-hidden="true"></span>
180
-
181
- <span class="sr-only">Previous</span>
182
-
183
- </a>
184
-
185
- <a class="carousel-control-next" href="#headline-carousel" role="button" data-slide="next">
186
-
187
- <span class="carousel-control-next-icon" aria-hidden="true"></span>
188
-
189
- <span class="sr-only">Next</span>
190
-
191
- </a>
192
-
193
- </div>
239
+ </div>
240
+
241
+ </div>
242
+
243
+ <a class="carousel-control-prev" href="#headline-carousel" role="button" data-slide="prev">
244
+
245
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
246
+
247
+ <span class="sr-only">Previous</span>
248
+
249
+ </a>
250
+
251
+ <a class="carousel-control-next" href="#headline-carousel" role="button" data-slide="next">
252
+
253
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
254
+
255
+ <span class="sr-only">Next</span>
256
+
257
+ </a>
258
+
259
+ </div>
260
+
261
+
262
+
263
+ CSS
264
+
265
+ * {
266
+
267
+ padding: 0;
268
+
269
+ margin: 0;
270
+
271
+ }
272
+
273
+
274
+
275
+ .first-nav-bar {
276
+
277
+ height: 60px;
278
+
279
+ width: 100%;
280
+
281
+ background-color: #131821;
282
+
283
+ display: inline-block;
284
+
285
+ }
286
+
287
+
288
+
289
+ #hamburger-menu-button {
290
+
291
+ display: none;
292
+
293
+ }
294
+
295
+
296
+
297
+ .open-button {
298
+
299
+ width: 40px;
300
+
301
+ height: 40px;
302
+
303
+ background-position: -132px -253px;
304
+
305
+ border: 1px solid #666666;
306
+
307
+ border-top-left-radius: 3px;
308
+
309
+ border-top-right-radius: 3px;
310
+
311
+ border-bottom-left-radius: 3px;
312
+
313
+ border-bottom-right-radius: 3px;
314
+
315
+ position: relative;
316
+
317
+ top:9px;
318
+
319
+ left: 8px;
320
+
321
+ }
322
+
323
+
324
+
325
+ .side-menu-bar {
326
+
327
+ width:365px;
328
+
329
+ height:100%;
330
+
331
+ background-color: white;
332
+
333
+ z-index: 50;
334
+
335
+ position:fixed;
336
+
337
+ top:0;
338
+
339
+ left: 0;
340
+
341
+ transform:translateX(-365px);
342
+
343
+ transition: all 1s ease-in-out;
344
+
345
+ overflow-y: scroll;
346
+
347
+ }
348
+
349
+
350
+
351
+ #hamburger-menu-button:checked ~ .side-menu-bar {
352
+
353
+ transform: translateX(0);
354
+
355
+ }
356
+
357
+
358
+
359
+ #close-button {
360
+
361
+ display: none;
362
+
363
+ position: fixed;
364
+
365
+ top:0;
366
+
367
+ left:0;
368
+
369
+ width: 100%;
370
+
371
+ height: 100%;
372
+
373
+ background-color: black;
374
+
375
+ transition: all 1s ease-in-out;
376
+
377
+ }
378
+
379
+
380
+
381
+ #hamburger-menu-button:checked ~ #close-button{
382
+
383
+ display: block;
384
+
385
+ opacity: 0.3;
386
+
387
+ }
388
+
389
+
390
+
391
+ .hello-login {
392
+
393
+ font-family: sans-serif;
394
+
395
+ }
396
+
397
+
398
+
399
+ .fa-chevron-right {
400
+
401
+ float:right;
402
+
403
+ color: black;
404
+
405
+ opacity: 0.5;
406
+
407
+ border:1px soild red;
408
+
409
+ }
410
+
411
+
412
+
413
+ h4 {
414
+
415
+ background-color: #232F3E;
416
+
417
+ height: 50px;
418
+
419
+ }
420
+
421
+
422
+
423
+ .human-icon {
424
+
425
+ width: 30px;
426
+
427
+ height: 30px;
428
+
429
+ background-position:-139px -348px;
430
+
431
+ position: relative;
432
+
433
+ top: 10px;
434
+
435
+ left: 40px;
436
+
437
+ }
438
+
439
+
440
+
441
+ .hello-login-bar {
442
+
443
+ color:white;
444
+
445
+ font-size:18px;
446
+
447
+ position: absolute;
448
+
449
+ top:15px;
450
+
451
+ left: 80px;
452
+
453
+ }
454
+
455
+
456
+
457
+ .hello-login .nav-item {
458
+
459
+ padding-top: 10px;
460
+
461
+ padding-bottom: 10px;
462
+
463
+ padding-right:30px;
464
+
465
+ padding-left: 30px;
466
+
467
+ cursor: pointer;
468
+
469
+ font-size:14px;
470
+
471
+ }
472
+
473
+
474
+
475
+ .amazon-logo-area {
476
+
477
+ height: 53px;
478
+
479
+ width: 165px;
480
+
481
+ position: absolute;
482
+
483
+ top:5px;
484
+
485
+ left:54px;
486
+
487
+ }
488
+
489
+
490
+
491
+ .amazon-logo-area:hover {
492
+
493
+ border: 1px solid white;
494
+
495
+ }
496
+
497
+
498
+
499
+ .amazon-smile-logo {
500
+
501
+ width: 106px;
502
+
503
+ height: 40px;
504
+
505
+ background-position: -7px -45px;
506
+
507
+ }
508
+
509
+
510
+
511
+ .amazon-co-jp {
512
+
513
+ width: 35px;
514
+
515
+ height: 18px;
516
+
517
+ background-position: -277px -73px;
518
+
519
+ position: relative;
520
+
521
+ top:-27px;
522
+
523
+ left: 105px;
524
+
525
+ }
526
+
527
+
528
+
529
+ .start-prime-video {
530
+
531
+ color: #48A3C6;
532
+
533
+ font-size: 12px;
534
+
535
+ font-weight: bold;
536
+
537
+ text-decoration: underline;
538
+
539
+ position: relative;
540
+
541
+ top:-40px;
542
+
543
+ left:72px;
544
+
545
+ }
546
+
547
+
548
+
549
+ .search-box {
550
+
551
+ width: 704px;
552
+
553
+ position: absolute;
554
+
555
+ top:9px;
556
+
557
+ left:225px;
558
+
559
+ }
560
+
561
+
562
+
563
+ .category-button {
564
+
565
+ width: 65px;
566
+
567
+ border-top-left-radius: 3px;
568
+
569
+ border-bottom-left-radius: 3px;
570
+
571
+ background-color: #F3F3F3;
572
+
573
+ }
574
+
575
+
576
+
577
+ .all-category {
578
+
579
+ font-size: 13px;
580
+
581
+ }
582
+
583
+
584
+
585
+ #search-box {
586
+
587
+ height: 40px;
588
+
589
+ width: 500px;
590
+
591
+ }
592
+
593
+
594
+
595
+ .search-icon {
596
+
597
+ width: 48px;
598
+
599
+ height: 40px;
600
+
601
+ background-color: #FEBD69;
602
+
603
+ background-position: 2px -290px;
604
+
605
+ border-top-right-radius: 3px;
606
+
607
+ border-bottom-right-radius: 3px;
608
+
609
+ }
610
+
611
+
612
+
613
+ .top-menu-bar {
614
+
615
+ float: right;
616
+
617
+ width: 505px;
618
+
619
+ height: 48px;
620
+
621
+ position: absolute;
622
+
623
+ top:8px;
624
+
625
+ left: 935px;
626
+
627
+ }
628
+
629
+
630
+
631
+ .top-menu-bar a {
632
+
633
+ height: 48px;
634
+
635
+ line-height: 1;
636
+
637
+ text-decoration: none;
638
+
639
+ }
640
+
641
+
642
+
643
+ .global-icon {
644
+
645
+ width: 65px;
646
+
647
+ }
648
+
649
+
650
+
651
+ .fa-globe {
652
+
653
+ font-size:20px;
654
+
655
+ color: white;
656
+
657
+
658
+
659
+ }
660
+
661
+
662
+
663
+ .fa-caret-down {
664
+
665
+ margin: 2px;
666
+
667
+
668
+
669
+ }
670
+
671
+
672
+
673
+ .hello-log-in {
674
+
675
+ width: 159px;
676
+
677
+ }
678
+
679
+
680
+
681
+ .order-list {
682
+
683
+ width: 75px;
684
+
685
+ }
686
+
687
+
688
+
689
+ .register-now {
690
+
691
+ width: 85px;
692
+
693
+ }
694
+
695
+
696
+
697
+ .shopping-cart {
698
+
699
+ width: 50px;
700
+
701
+ height: 500px;
702
+
703
+ background-position:0 -340px;
704
+
705
+ }
706
+
707
+
708
+
709
+ .grey {
710
+
711
+ color:#CCCCCC;
712
+
713
+ font-size: 12px;
714
+
715
+ }
716
+
717
+
718
+
719
+ .white {
720
+
721
+ color:white;
722
+
723
+ }
724
+
725
+
726
+
727
+ .bold {
728
+
729
+ font-weight: bold;
730
+
731
+ }
732
+
733
+
734
+
735
+ .second-menu-bar {
736
+
737
+ height: 40px;
738
+
739
+ background-color: #232F3E;
740
+
741
+ display: flex;
742
+
743
+ }
744
+
745
+
746
+
747
+ .second-meun-bar-left {
748
+
749
+ width:216px;
750
+
751
+ height: 40px;
752
+
753
+ }
754
+
755
+
756
+
757
+ .delivery-address-link{
758
+
759
+ line-height: 15px;
760
+
761
+ width: 145px;
762
+
763
+ height: 40px;
764
+
765
+ margin-left: 10px;
766
+
767
+ }
768
+
769
+
770
+
771
+ .map-pointer-icon {
772
+
773
+ width: 25px;
774
+
775
+ height: 25px;
776
+
777
+ background-position: -70px -313px;
778
+
779
+ float: left;
780
+
781
+ margin-top:7px;
782
+
783
+ }
784
+
785
+ .address1 {
786
+
787
+ font-size: 12px;
788
+
789
+ color:white;
790
+
791
+ }
792
+
793
+
794
+
795
+ .address2 {
796
+
797
+ color:white;
798
+
799
+ font-size: 14px;
800
+
801
+ font-weight: bold;
802
+
803
+ }
804
+
805
+
806
+
807
+ .second-menu-bar-upper-bar {
808
+
809
+ font-size:13px;
810
+
811
+ }
812
+
813
+
814
+
815
+ .second-menu-bar-upper-bar .nav-link-b {
816
+
817
+ padding:0px 8px;
818
+
819
+ text-decoration: none;
820
+
821
+ color:#CCCCCC;
822
+
823
+ line-height: 14px;
824
+
825
+
826
+
827
+ }
828
+
829
+
830
+
831
+ .second-menu-bar-upper-bar .nav-link-b:hover {
832
+
833
+ border:1px solid white;
834
+
835
+ }
836
+
837
+
838
+
839
+ .second-menu-bar-lower-bar {
840
+
841
+ font-size:14px;
842
+
843
+
844
+
845
+ }
846
+
847
+
848
+
849
+ .second-menu-bar-lower-bar .nav-link-b {
850
+
851
+ padding:0px 8px;
852
+
853
+ text-decoration: none;
854
+
855
+ color:#CCCCCC;
856
+
857
+ line-height: 17px;
858
+
859
+ }
860
+
861
+
862
+
863
+ .second-menu-bar-lower-bar .nav-link-b:hover {
864
+
865
+ border:1px solid white;
866
+
867
+ }
868
+
869
+
870
+
871
+ .second-menu-bar-middle {
872
+
873
+ width: 821px;
874
+
875
+
876
+
877
+ }
878
+
879
+ .second-menu-bar-right {
880
+
881
+ width: 400px;
882
+
883
+ height: 39px;
884
+
885
+ float: right;
886
+
887
+ }
888
+
889
+
890
+
891
+ .second-menu-bar-right:hover {
892
+
893
+ border:1px solid white;
894
+
895
+ }
896
+
897
+
194
898
 
195
899
  ```
196
-
197
- ```
198
-
199
- * {
200
-
201
- padding: 0;
202
-
203
- margin: 0;
204
-
205
- }
206
-
207
-
208
-
209
- .amazon-sprite {
210
-
211
- background-image: url();
212
-
213
- background-size: 360px;
214
-
215
- }
216
-
217
-
218
-
219
- .first-nav-bar {
220
-
221
- height: 60px;
222
-
223
- width: 100%;
224
-
225
- background-color: #131821;
226
-
227
- display: inline-block;
228
-
229
- }
230
-
231
-
232
-
233
- #hamburger-menu-button {
234
-
235
- display: none;
236
-
237
- }
238
-
239
-
240
-
241
- .open-button {
242
-
243
- width: 40px;
244
-
245
- height: 40px;
246
-
247
- background-position: -132px -253px;
248
-
249
- border: 1px solid #666666;
250
-
251
- border-top-left-radius: 3px;
252
-
253
- border-top-right-radius: 3px;
254
-
255
- border-bottom-left-radius: 3px;
256
-
257
- border-bottom-right-radius: 3px;
258
-
259
- position: relative;
260
-
261
- top:9px;
262
-
263
- left: 8px;
264
-
265
- }
266
-
267
-
268
-
269
- .open-button:hover {
270
-
271
- cursor: pointer;
272
-
273
- border:1px solid white;
274
-
275
- }
276
-
277
-
278
-
279
- .side-menu-bar {
280
-
281
- width:365px;
282
-
283
- height:100%;
284
-
285
- background-color: white;
286
-
287
- z-index: 50;
288
-
289
- position:fixed;
290
-
291
- top:0;
292
-
293
- left: 0;
294
-
295
- transform:translateX(-365px);
296
-
297
- transition: all 1s ease-in-out;
298
-
299
- overflow-y: scroll;
300
-
301
- }
302
-
303
-
304
-
305
- #hamburger-menu-button:checked ~ .side-menu-bar {
306
-
307
- transform: translateX(0);
308
-
309
- }
310
-
311
-
312
-
313
- #close-button {
314
-
315
- display: none;
316
-
317
- position: fixed;
318
-
319
- top:0;
320
-
321
- left:0;
322
-
323
- width: 100%;
324
-
325
- height: 100%;
326
-
327
- background-color: black;
328
-
329
- transition: all 1s ease-in-out;
330
-
331
- }
332
-
333
-
334
-
335
- #hamburger-menu-button:checked ~ #close-button{
336
-
337
- display: block;
338
-
339
- opacity: 0.3;
340
-
341
- }
342
-
343
-
344
-
345
- .hello-login {
346
-
347
- font-family: sans-serif;
348
-
349
- }
350
-
351
-
352
-
353
- .fa-chevron-right {
354
-
355
- float:right;
356
-
357
- color: black;
358
-
359
- opacity: 0.5;
360
-
361
- border:1px soild red;
362
-
363
- }
364
-
365
-
366
-
367
- h4 {
368
-
369
- background-color: #232F3E;
370
-
371
- height: 50px;
372
-
373
- }
374
-
375
-
376
-
377
- .human-icon {
378
-
379
- width: 30px;
380
-
381
- height: 30px;
382
-
383
- background-position:-139px -348px;
384
-
385
- position: relative;
386
-
387
- top: 10px;
388
-
389
- left: 40px;
390
-
391
- }
392
-
393
-
394
-
395
- .hello-login-bar {
396
-
397
- color:white;
398
-
399
- font-size:18px;
400
-
401
- position: absolute;
402
-
403
- top:15px;
404
-
405
- left: 80px;
406
-
407
- }
408
-
409
-
410
-
411
- #buy-per-category {
412
-
413
- opacity: 0.5;
414
-
415
- }
416
-
417
-
418
-
419
- .hello-login .nav-item {
420
-
421
- padding-top: 10px;
422
-
423
- padding-bottom: 10px;
424
-
425
- padding-right:30px;
426
-
427
- padding-left: 30px;
428
-
429
- cursor: pointer;
430
-
431
- font-size:14px;
432
-
433
- }
434
-
435
-
436
-
437
- .hover-grey:hover {
438
-
439
- background-color:grey;
440
-
441
- }
442
-
443
-
444
-
445
- .amazon-logo-area {
446
-
447
- height: 53px;
448
-
449
- width: 165px;
450
-
451
- position: absolute;
452
-
453
- top:5px;
454
-
455
- left:54px;
456
-
457
- }
458
-
459
-
460
-
461
- .amazon-logo-area:hover {
462
-
463
- border: 1px solid white;
464
-
465
- }
466
-
467
-
468
-
469
- .amazon-smile-logo {
470
-
471
- width: 106px;
472
-
473
- height: 40px;
474
-
475
- background-position: -7px -45px;
476
-
477
- }
478
-
479
-
480
-
481
- .amazon-co-jp {
482
-
483
- width: 35px;
484
-
485
- height: 18px;
486
-
487
- background-position: -277px -73px;
488
-
489
- position: relative;
490
-
491
- top:-27px;
492
-
493
- left: 105px;
494
-
495
- }
496
-
497
-
498
-
499
- .start-prime-video {
500
-
501
- color: #48A3C6;
502
-
503
- font-size: 12px;
504
-
505
- font-weight: bold;
506
-
507
- text-decoration: underline;
508
-
509
- position: relative;
510
-
511
- top:-40px;
512
-
513
- left:72px;
514
-
515
- }
516
-
517
-
518
-
519
- .start-prime-video:hover {
520
-
521
- color:white;
522
-
523
- }
524
-
525
-
526
-
527
- .search-box {
528
-
529
- width: 704px;
530
-
531
- position: absolute;
532
-
533
- top:9px;
534
-
535
- left:225px;
536
-
537
- }
538
-
539
-
540
-
541
- .category-button {
542
-
543
- width: 65px;
544
-
545
- border-top-left-radius: 3px;
546
-
547
- border-bottom-left-radius: 3px;
548
-
549
- background-color: #F3F3F3;
550
-
551
- }
552
-
553
-
554
-
555
- .all-category {
556
-
557
- font-size: 13px;
558
-
559
- }
560
-
561
-
562
-
563
- #search-box {
564
-
565
- height: 40px;
566
-
567
- width: 500px;
568
-
569
- }
570
-
571
-
572
-
573
- .search-icon {
574
-
575
- width: 48px;
576
-
577
- height: 40px;
578
-
579
- background-color: #FEBD69;
580
-
581
- background-position: 2px -290px;
582
-
583
- border-top-right-radius: 3px;
584
-
585
- border-bottom-right-radius: 3px;
586
-
587
- }
588
-
589
-
590
-
591
- .top-menu-bar {
592
-
593
- float: right;
594
-
595
- width: 505px;
596
-
597
- height: 48px;
598
-
599
- position: absolute;
600
-
601
- top:8px;
602
-
603
- left: 935px;
604
-
605
- }
606
-
607
-
608
-
609
- .top-menu-bar a {
610
-
611
- height: 48px;
612
-
613
- line-height: 1;
614
-
615
- text-decoration: none;
616
-
617
- }
618
-
619
-
620
-
621
- .global-icon {
622
-
623
- width: 65px;
624
-
625
- }
626
-
627
-
628
-
629
- .fa-globe {
630
-
631
- font-size:20px;
632
-
633
- color: white;
634
-
635
-
636
-
637
- }
638
-
639
-
640
-
641
- .fa-caret-down {
642
-
643
- margin: 2px;
644
-
645
-
646
-
647
- }
648
-
649
-
650
-
651
- .hello-log-in {
652
-
653
- width: 159px;
654
-
655
- }
656
-
657
-
658
-
659
- .order-list {
660
-
661
- width: 75px;
662
-
663
- }
664
-
665
-
666
-
667
- .register-now {
668
-
669
- width: 85px;
670
-
671
- }
672
-
673
-
674
-
675
- .shopping-cart {
676
-
677
- width: 50px;
678
-
679
- height: 500px;
680
-
681
- background-position:0 -340px;
682
-
683
- }
684
-
685
-
686
-
687
- .grey {
688
-
689
- color:#CCCCCC;
690
-
691
- font-size: 12px;
692
-
693
- }
694
-
695
-
696
-
697
- .white {
698
-
699
- color:white;
700
-
701
- }
702
-
703
-
704
-
705
- .bold {
706
-
707
- font-weight: bold;
708
-
709
- }
710
-
711
-
712
-
713
- .second-menu-bar {
714
-
715
- height: 40px;
716
-
717
- background-color: #232F3E;
718
-
719
- display: flex;
720
-
721
- }
722
-
723
-
724
-
725
- .second-meun-bar-left {
726
-
727
- width:216px;
728
-
729
- height: 40px;
730
-
731
- }
732
-
733
-
734
-
735
- .delivery-address-link{
736
-
737
- line-height: 15px;
738
-
739
- width: 145px;
740
-
741
- height: 40px;
742
-
743
- margin-left: 10px;
744
-
745
- }
746
-
747
-
748
-
749
- .delivery-address-link-border:hover {
750
-
751
- border:1px solid white;
752
-
753
- width: 145px;
754
-
755
- height: 40px;
756
-
757
- }
758
-
759
-
760
-
761
- .map-pointer-icon {
762
-
763
- width: 25px;
764
-
765
- height: 25px;
766
-
767
- background-position: -70px -313px;
768
-
769
- float: left;
770
-
771
- margin-top:7px;
772
-
773
- }
774
-
775
- .address1 {
776
-
777
- font-size: 12px;
778
-
779
- color:white;
780
-
781
- }
782
-
783
-
784
-
785
- .address2 {
786
-
787
- color:white;
788
-
789
- font-size: 14px;
790
-
791
- font-weight: bold;
792
-
793
- }
794
-
795
-
796
-
797
- .second-menu-bar-upper-bar {
798
-
799
- font-size:13px;
800
-
801
- }
802
-
803
-
804
-
805
- .second-menu-bar-upper-bar .nav-link-b {
806
-
807
- padding:0px 8px;
808
-
809
- text-decoration: none;
810
-
811
- color:#CCCCCC;
812
-
813
- line-height: 14px;
814
-
815
-
816
-
817
- }
818
-
819
-
820
-
821
- .second-menu-bar-upper-bar .nav-link-b:hover {
822
-
823
- border:1px solid white;
824
-
825
- }
826
-
827
-
828
-
829
- .second-menu-bar-lower-bar {
830
-
831
- font-size:14px;
832
-
833
-
834
-
835
- }
836
-
837
-
838
-
839
- .second-menu-bar-lower-bar .nav-link-b {
840
-
841
- padding:0px 8px;
842
-
843
- text-decoration: none;
844
-
845
- color:#CCCCCC;
846
-
847
- line-height: 17px;
848
-
849
- }
850
-
851
- .second-menu-bar-middle {
852
-
853
- width: 821px;
854
-
855
-
856
-
857
- }
858
-
859
- .second-menu-bar-right {
860
-
861
- width: 400px;
862
-
863
- height: 39px;
864
-
865
- float: right;
866
-
867
- }
868
-
869
-
870
-
871
- .second-menu-bar-right:hover {
872
-
873
- border:1px solid white;
874
-
875
- }
876
-
877
- ```

1

CSSコード追加

2019/12/12 04:59

投稿

japan_japan
japan_japan

スコア7

test CHANGED
File without changes
test CHANGED
@@ -1,34 +1,14 @@
1
- ### 前提・実現したいこと
1
+ ### 問題
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
- ### 発生している問題・エラーメッセージ
2
+
10
-
11
- amazonのLPを模写しています。参照リンク:https://www.amazon.co.jp/
12
-
13
- 大きなスライダーにbootstrap4のcarouselを使用すると、ハンバーガーボタン、Amazonロゴ、お届け先に付けたhover機能(白い枠線の出現)、リンク機能、ハンバーガーボタンのサイドバーの左からの出現が出来なくなります。
3
+ アマゾンのLP(https://www.amazon.co.jp/)の模写で大きなスライダーにbootstrap4のカルーセルを使用すると、ハンバーガーボタン、②アマゾンロゴ、お届け先に付けたhover機能(白い枠線の出現)、リンク機能、のサイドバーの左からの出現が出来なくなります。
14
-
15
-
16
-
17
- また、ハンバーガーボタン、Amazonロゴ、お届け先を押すと、carouselが動いてしまいます。
4
+
18
-
19
- ハンバーガーボタン、Amazonロゴ、お届け先にはbootstrapを使用していません。
5
+
20
-
21
-
22
-
6
+
23
- 何が原因でしょうか。全てのコードにbootstrapを使用しないといけないのでしょうか。
7
+ また、①②③を押すと、カルーセルが動いてしまいます。何が原因でしょうか。
24
-
25
-
26
-
8
+
9
+
10
+
27
- 文字数の関係で、ソースコードは一部省略してあります
11
+ ### ソースコード(文字数の関係で一部省略。
28
-
29
-
30
-
31
- ### 該当のソースコード
32
12
 
33
13
 
34
14
 
@@ -36,7 +16,7 @@
36
16
 
37
17
  <body>
38
18
 
39
- <header id="header" class="">
19
+ <header>
40
20
 
41
21
  <div class="first-nav-bar">
42
22
 
@@ -44,11 +24,7 @@
44
24
 
45
25
  <input type="checkbox" id="hamburger-menu-button">
46
26
 
47
- <label for="hamburger-menu-button" class="amazon-sprite open-button">
27
+ <label for="hamburger-menu-button" class="amazon-sprite open-button"></label>
48
-
49
-
50
-
51
- </label>
52
28
 
53
29
  <label for="hamburger-menu-button" id="close-button"></label>
54
30
 
@@ -56,15 +32,13 @@
56
32
 
57
33
  <div class="hello-login">
58
34
 
59
- <h4> <a href=""><div class="amazon-sprite human-icon"></div><span class="hello-login-bar">こんにちは, ログイン</span></a></h4>
35
+ <h4> <a href=""><div class="amazon-sprite human-icon"></div><span class="hello-login-bar">こんにちは</span></a></h4>
60
36
 
61
37
  <ul class="sidebar-menu-item">
62
38
 
63
- <li class="nav-item" id="buy-per-category">カテゴリ別に購入</li>
39
+ <li class="nav-item" id="buy-per-category">カテゴリ別</li>
64
-
40
+
65
- <li class="nav-item hover-grey">Prime Video<i class="fas fa-chevron-right"></i></li>
41
+ <li class="nav-item hover-grey">Prime Video<i class="fas fa-chevron-right"></i></li>
66
-
67
-
68
42
 
69
43
  </ul>
70
44
 
@@ -76,208 +50,828 @@
76
50
 
77
51
  <div class="amazon-logo-area">
78
52
 
53
+ <a href=""><div class="amazon-sprite amazon-smile-logo"></div><div class="amazon-sprite amazon-co-jp"></div></a>
54
+
55
+ <a href="" title="" class="start-prime-video">プライム</a>
56
+
57
+ </div>
58
+
59
+
60
+
61
+ <div class="top-menu-bar">
62
+
63
+ <nav class="nav">
64
+
65
+ <a class="nav-link-a global-icon" href="">
66
+
67
+ <i class="fas fa-globe"></i><i class="fas fa-caret-down grey"></i>
68
+
69
+ </a>
70
+
71
+ <a class="nav-link-a hello-log-in" href="">
72
+
73
+ <span class="grey">こんにちは/span><br><span class="white bold">アカウント<i class="fas fa-caret-down grey"></i></span></a>
74
+
75
+ <a class="nav-link-a order-list" href=""><br><span class="white bold">注文履歴</span></a>
76
+
77
+ <a class="nav-link-a register-now" href=""><span class="grey">登録</span><br><span class="white bold">プライム<i class="fas fa-caret-down grey"></i></span></a>
78
+
79
+ <a class="nav-link-a amazon-sprite shopping-cart" href=""><span class="white bold">カート</span></a>
80
+
81
+ </nav>
82
+
83
+ </div>
84
+
85
+ </div>
86
+
87
+
88
+
89
+
90
+
91
+ <div class="second-menu-bar">
92
+
93
+ <div class="second-meun-bar-left">
94
+
95
+ <div class="delivery-address-link">
96
+
97
+ <div class="delivery-address-link-border">
98
+
79
- <a href="#">
99
+ <a href="">
80
-
81
- <div class="amazon-sprite amazon-smile-logo"></div>
100
+
82
-
83
- <div class="amazon-sprite amazon-co-jp"></div>
101
+ <div class="amazon-sprite map-pointer-icon"></div>
102
+
103
+ <span class="address1">お届け先</span><br>
104
+
105
+ <span class="address2">伊丹市 664-0006</span>
106
+
107
+ </a>
108
+
109
+ </div>
110
+
111
+ </div>
112
+
113
+ </div>
114
+
115
+
116
+
117
+ <div class="second-menu-bar-middle">
118
+
119
+ <div class="second-menu-bar-upper-bar">
120
+
121
+ <nav class="nav">
122
+
123
+ <a class="nav-link-b amazon-point" href="">ポイント</a><span class="double-collon">:</span><a class="nav-link-b" href="">残高を確認</a>
124
+
125
+ </nav>
126
+
127
+ </div>
128
+
129
+
130
+
131
+ <div class="second-menu-bar-lower-bar">
132
+
133
+ <nav class="nav">
134
+
135
+ <a class="nav-link-b" href="">タイムセール</a>
136
+
137
+ <a class="nav-link-b" href="">クーポン</a>
138
+
139
+ </nav>
140
+
141
+ </div>
142
+
143
+ </div>
144
+
145
+
146
+
147
+ <div class="second-menu-bar-right">
148
+
149
+ <a href=""><img src=""></a>
150
+
151
+ </div>
152
+
153
+ </div>
154
+
155
+ </header>
156
+
157
+
158
+
159
+ <div class=""></div>
160
+
161
+ <div class="headline-carousel">
162
+
163
+ <div id="headline-carousel" class="carousel slide" data-ride="carousel">
164
+
165
+ <div class="carousel-inner">
166
+
167
+ <div class="carousel-item">
168
+
169
+ <img src="">
170
+
171
+ </div>
172
+
173
+ </div>
174
+
175
+ </div>
176
+
177
+ <a class="carousel-control-prev" href="#headline-carousel" role="button" data-slide="prev">
178
+
179
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
180
+
181
+ <span class="sr-only">Previous</span>
84
182
 
85
183
  </a>
86
184
 
87
- <a href="#" title="" class="start-prime-video">プライムを始める</a>
88
-
89
- </div>
90
-
91
-
92
-
93
- <div class="search-box">
94
-
95
- <div class="input-group">
96
-
97
- <div class="input-group-prepend">
98
-
99
- <button type="button" class="category-button">
100
-
101
- <span class="all-category"><span>すべて</span><i class="fas fa-caret-down"></i></button>
102
-
103
- </div>
104
-
105
- <input type="text" class="form-control" id="search-box">
106
-
107
- <div class="input-group-append">
108
-
109
- <button type="submit" class="amazon-sprite search-icon">
110
-
111
- </button>
112
-
113
- </div>
114
-
115
- </div>
116
-
117
- </div>
118
-
119
- </div>
120
-
121
-
122
-
123
- <div class="top-menu-bar">
124
-
125
- <nav class="nav">
126
-
127
- <a class="nav-link-a global-icon" href="#">
128
-
129
- <i class="fas fa-globe"></i><i class="fas fa-caret-down grey"></i>
130
-
131
- </a>
132
-
133
- <a class="nav-link-a hello-log-in" href="#">
134
-
135
- <span class="grey">こんにちは、ログイン</span><br><span class="white bold">アカウント&リスト<i class="fas fa-caret-down grey"></i></span></a>
136
-
137
- <a class="nav-link-a order-list" href="#"><br><span class="white bold">注文履歴</span></a>
138
-
139
- <a class="nav-link-a register-now" href="#"><span class="grey">今すぐ登録</span><br><span class="white bold">プライム<i class="fas fa-caret-down grey"></i></span></a>
140
-
141
- <a class="nav-link-a amazon-sprite shopping-cart" href="#"><span class="white bold">カート</span></a>
142
-
143
-
144
-
145
- </nav>
146
-
147
- </div>
148
-
149
- </div>
150
-
151
-
152
-
153
-
154
-
155
- <div class="second-menu-bar">
156
-
157
- <div class="second-meun-bar-left">
158
-
159
-
160
-
161
- <div class="delivery-address-link">
162
-
163
- <div class="delivery-address-link-border">
164
-
165
-
166
-
167
- <a href="">
168
-
169
- <div class="amazon-sprite map-pointer-icon"></div>
170
-
171
- <span class="address1">お届け先</span><br>
172
-
173
- <span class="address2">伊丹市 664-0006</span>
174
-
175
- </a>
176
-
177
- </div>
178
-
179
- </div>
180
-
181
- </div>
182
-
183
-
184
-
185
- <div class="second-menu-bar-middle">
186
-
187
- <div class="second-menu-bar-upper-bar">
188
-
189
- <nav class="nav">
190
-
191
- <a class="nav-link-b amazon-point" href="#">Amazonポイント</a><span class="double-collon">:</span><a class="nav-link-b" href="#">残高を確認</a>
192
-
193
- </nav>
194
-
195
- </div>
196
-
197
-
198
-
199
- <div class="second-menu-bar-lower-bar">
200
-
201
- <nav class="nav">
202
-
203
- <a class="nav-link-b" href="#">タイムセール</a>
204
-
205
- <a class="nav-link-b" href="#">クーポン</a>
206
-
207
- <a class="nav-link-b" href="#">AmazonBasics</a>
208
-
209
- <a class="nav-link-b" href="#">ランキング</a>
210
-
211
- <a class="nav-link-b" href="#">ギフトランキング</a>
212
-
213
- <a class="nav-link-b" href="#">新着商品</a>
214
-
215
- <a class="nav-link-b" href="#">ギフト券</a>
216
-
217
- <a class="nav-link-b" href="#">カスタマーサービス</a>
218
-
219
- </nav>
220
-
221
-
222
-
223
- </div>
224
-
225
-
226
-
227
- </div>
228
-
229
-
230
-
231
- <div class="second-menu-bar-right">
232
-
233
- <a href="#"><img src="" alt=""></a>
234
-
235
- </div>
236
-
237
- </div>
238
-
239
- </header><!-- /header -->
240
-
241
- <div class=""></div>
242
-
243
- <div class="headline-carousel">
244
-
245
- <div id="headline-carousel" class="carousel slide" data-ride="carousel">
246
-
247
- <div class="carousel-inner">
248
-
249
- <div class="carousel-item active">
250
-
251
- <img src="" class="d-block w-100" alt="...">
252
-
253
- </div>
254
-
255
- <div class="carousel-item">
256
-
257
- <img src="" class="d-block w-100" alt="...">
258
-
259
- </div>
260
-
261
- </div>
262
-
263
- </div>
264
-
265
- <a class="carousel-control-prev" href="#headline-carousel" role="button" data-slide="prev">
185
+ <a class="carousel-control-next" href="#headline-carousel" role="button" data-slide="next">
266
-
186
+
267
- <span class="carousel-control-prev-icon" aria-hidden="true"></span>
187
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
268
-
188
+
269
- <span class="sr-only">Previous</span>
189
+ <span class="sr-only">Next</span>
270
190
 
271
191
  </a>
272
192
 
273
- <a class="carousel-control-next" href="#headline-carousel" role="button" data-slide="next">
274
-
275
- <span class="carousel-control-next-icon" aria-hidden="true"></span>
276
-
277
- <span class="sr-only">Next</span>
278
-
279
- </a>
280
-
281
193
  </div>
282
194
 
283
195
  ```
196
+
197
+ ```
198
+
199
+ * {
200
+
201
+ padding: 0;
202
+
203
+ margin: 0;
204
+
205
+ }
206
+
207
+
208
+
209
+ .amazon-sprite {
210
+
211
+ background-image: url();
212
+
213
+ background-size: 360px;
214
+
215
+ }
216
+
217
+
218
+
219
+ .first-nav-bar {
220
+
221
+ height: 60px;
222
+
223
+ width: 100%;
224
+
225
+ background-color: #131821;
226
+
227
+ display: inline-block;
228
+
229
+ }
230
+
231
+
232
+
233
+ #hamburger-menu-button {
234
+
235
+ display: none;
236
+
237
+ }
238
+
239
+
240
+
241
+ .open-button {
242
+
243
+ width: 40px;
244
+
245
+ height: 40px;
246
+
247
+ background-position: -132px -253px;
248
+
249
+ border: 1px solid #666666;
250
+
251
+ border-top-left-radius: 3px;
252
+
253
+ border-top-right-radius: 3px;
254
+
255
+ border-bottom-left-radius: 3px;
256
+
257
+ border-bottom-right-radius: 3px;
258
+
259
+ position: relative;
260
+
261
+ top:9px;
262
+
263
+ left: 8px;
264
+
265
+ }
266
+
267
+
268
+
269
+ .open-button:hover {
270
+
271
+ cursor: pointer;
272
+
273
+ border:1px solid white;
274
+
275
+ }
276
+
277
+
278
+
279
+ .side-menu-bar {
280
+
281
+ width:365px;
282
+
283
+ height:100%;
284
+
285
+ background-color: white;
286
+
287
+ z-index: 50;
288
+
289
+ position:fixed;
290
+
291
+ top:0;
292
+
293
+ left: 0;
294
+
295
+ transform:translateX(-365px);
296
+
297
+ transition: all 1s ease-in-out;
298
+
299
+ overflow-y: scroll;
300
+
301
+ }
302
+
303
+
304
+
305
+ #hamburger-menu-button:checked ~ .side-menu-bar {
306
+
307
+ transform: translateX(0);
308
+
309
+ }
310
+
311
+
312
+
313
+ #close-button {
314
+
315
+ display: none;
316
+
317
+ position: fixed;
318
+
319
+ top:0;
320
+
321
+ left:0;
322
+
323
+ width: 100%;
324
+
325
+ height: 100%;
326
+
327
+ background-color: black;
328
+
329
+ transition: all 1s ease-in-out;
330
+
331
+ }
332
+
333
+
334
+
335
+ #hamburger-menu-button:checked ~ #close-button{
336
+
337
+ display: block;
338
+
339
+ opacity: 0.3;
340
+
341
+ }
342
+
343
+
344
+
345
+ .hello-login {
346
+
347
+ font-family: sans-serif;
348
+
349
+ }
350
+
351
+
352
+
353
+ .fa-chevron-right {
354
+
355
+ float:right;
356
+
357
+ color: black;
358
+
359
+ opacity: 0.5;
360
+
361
+ border:1px soild red;
362
+
363
+ }
364
+
365
+
366
+
367
+ h4 {
368
+
369
+ background-color: #232F3E;
370
+
371
+ height: 50px;
372
+
373
+ }
374
+
375
+
376
+
377
+ .human-icon {
378
+
379
+ width: 30px;
380
+
381
+ height: 30px;
382
+
383
+ background-position:-139px -348px;
384
+
385
+ position: relative;
386
+
387
+ top: 10px;
388
+
389
+ left: 40px;
390
+
391
+ }
392
+
393
+
394
+
395
+ .hello-login-bar {
396
+
397
+ color:white;
398
+
399
+ font-size:18px;
400
+
401
+ position: absolute;
402
+
403
+ top:15px;
404
+
405
+ left: 80px;
406
+
407
+ }
408
+
409
+
410
+
411
+ #buy-per-category {
412
+
413
+ opacity: 0.5;
414
+
415
+ }
416
+
417
+
418
+
419
+ .hello-login .nav-item {
420
+
421
+ padding-top: 10px;
422
+
423
+ padding-bottom: 10px;
424
+
425
+ padding-right:30px;
426
+
427
+ padding-left: 30px;
428
+
429
+ cursor: pointer;
430
+
431
+ font-size:14px;
432
+
433
+ }
434
+
435
+
436
+
437
+ .hover-grey:hover {
438
+
439
+ background-color:grey;
440
+
441
+ }
442
+
443
+
444
+
445
+ .amazon-logo-area {
446
+
447
+ height: 53px;
448
+
449
+ width: 165px;
450
+
451
+ position: absolute;
452
+
453
+ top:5px;
454
+
455
+ left:54px;
456
+
457
+ }
458
+
459
+
460
+
461
+ .amazon-logo-area:hover {
462
+
463
+ border: 1px solid white;
464
+
465
+ }
466
+
467
+
468
+
469
+ .amazon-smile-logo {
470
+
471
+ width: 106px;
472
+
473
+ height: 40px;
474
+
475
+ background-position: -7px -45px;
476
+
477
+ }
478
+
479
+
480
+
481
+ .amazon-co-jp {
482
+
483
+ width: 35px;
484
+
485
+ height: 18px;
486
+
487
+ background-position: -277px -73px;
488
+
489
+ position: relative;
490
+
491
+ top:-27px;
492
+
493
+ left: 105px;
494
+
495
+ }
496
+
497
+
498
+
499
+ .start-prime-video {
500
+
501
+ color: #48A3C6;
502
+
503
+ font-size: 12px;
504
+
505
+ font-weight: bold;
506
+
507
+ text-decoration: underline;
508
+
509
+ position: relative;
510
+
511
+ top:-40px;
512
+
513
+ left:72px;
514
+
515
+ }
516
+
517
+
518
+
519
+ .start-prime-video:hover {
520
+
521
+ color:white;
522
+
523
+ }
524
+
525
+
526
+
527
+ .search-box {
528
+
529
+ width: 704px;
530
+
531
+ position: absolute;
532
+
533
+ top:9px;
534
+
535
+ left:225px;
536
+
537
+ }
538
+
539
+
540
+
541
+ .category-button {
542
+
543
+ width: 65px;
544
+
545
+ border-top-left-radius: 3px;
546
+
547
+ border-bottom-left-radius: 3px;
548
+
549
+ background-color: #F3F3F3;
550
+
551
+ }
552
+
553
+
554
+
555
+ .all-category {
556
+
557
+ font-size: 13px;
558
+
559
+ }
560
+
561
+
562
+
563
+ #search-box {
564
+
565
+ height: 40px;
566
+
567
+ width: 500px;
568
+
569
+ }
570
+
571
+
572
+
573
+ .search-icon {
574
+
575
+ width: 48px;
576
+
577
+ height: 40px;
578
+
579
+ background-color: #FEBD69;
580
+
581
+ background-position: 2px -290px;
582
+
583
+ border-top-right-radius: 3px;
584
+
585
+ border-bottom-right-radius: 3px;
586
+
587
+ }
588
+
589
+
590
+
591
+ .top-menu-bar {
592
+
593
+ float: right;
594
+
595
+ width: 505px;
596
+
597
+ height: 48px;
598
+
599
+ position: absolute;
600
+
601
+ top:8px;
602
+
603
+ left: 935px;
604
+
605
+ }
606
+
607
+
608
+
609
+ .top-menu-bar a {
610
+
611
+ height: 48px;
612
+
613
+ line-height: 1;
614
+
615
+ text-decoration: none;
616
+
617
+ }
618
+
619
+
620
+
621
+ .global-icon {
622
+
623
+ width: 65px;
624
+
625
+ }
626
+
627
+
628
+
629
+ .fa-globe {
630
+
631
+ font-size:20px;
632
+
633
+ color: white;
634
+
635
+
636
+
637
+ }
638
+
639
+
640
+
641
+ .fa-caret-down {
642
+
643
+ margin: 2px;
644
+
645
+
646
+
647
+ }
648
+
649
+
650
+
651
+ .hello-log-in {
652
+
653
+ width: 159px;
654
+
655
+ }
656
+
657
+
658
+
659
+ .order-list {
660
+
661
+ width: 75px;
662
+
663
+ }
664
+
665
+
666
+
667
+ .register-now {
668
+
669
+ width: 85px;
670
+
671
+ }
672
+
673
+
674
+
675
+ .shopping-cart {
676
+
677
+ width: 50px;
678
+
679
+ height: 500px;
680
+
681
+ background-position:0 -340px;
682
+
683
+ }
684
+
685
+
686
+
687
+ .grey {
688
+
689
+ color:#CCCCCC;
690
+
691
+ font-size: 12px;
692
+
693
+ }
694
+
695
+
696
+
697
+ .white {
698
+
699
+ color:white;
700
+
701
+ }
702
+
703
+
704
+
705
+ .bold {
706
+
707
+ font-weight: bold;
708
+
709
+ }
710
+
711
+
712
+
713
+ .second-menu-bar {
714
+
715
+ height: 40px;
716
+
717
+ background-color: #232F3E;
718
+
719
+ display: flex;
720
+
721
+ }
722
+
723
+
724
+
725
+ .second-meun-bar-left {
726
+
727
+ width:216px;
728
+
729
+ height: 40px;
730
+
731
+ }
732
+
733
+
734
+
735
+ .delivery-address-link{
736
+
737
+ line-height: 15px;
738
+
739
+ width: 145px;
740
+
741
+ height: 40px;
742
+
743
+ margin-left: 10px;
744
+
745
+ }
746
+
747
+
748
+
749
+ .delivery-address-link-border:hover {
750
+
751
+ border:1px solid white;
752
+
753
+ width: 145px;
754
+
755
+ height: 40px;
756
+
757
+ }
758
+
759
+
760
+
761
+ .map-pointer-icon {
762
+
763
+ width: 25px;
764
+
765
+ height: 25px;
766
+
767
+ background-position: -70px -313px;
768
+
769
+ float: left;
770
+
771
+ margin-top:7px;
772
+
773
+ }
774
+
775
+ .address1 {
776
+
777
+ font-size: 12px;
778
+
779
+ color:white;
780
+
781
+ }
782
+
783
+
784
+
785
+ .address2 {
786
+
787
+ color:white;
788
+
789
+ font-size: 14px;
790
+
791
+ font-weight: bold;
792
+
793
+ }
794
+
795
+
796
+
797
+ .second-menu-bar-upper-bar {
798
+
799
+ font-size:13px;
800
+
801
+ }
802
+
803
+
804
+
805
+ .second-menu-bar-upper-bar .nav-link-b {
806
+
807
+ padding:0px 8px;
808
+
809
+ text-decoration: none;
810
+
811
+ color:#CCCCCC;
812
+
813
+ line-height: 14px;
814
+
815
+
816
+
817
+ }
818
+
819
+
820
+
821
+ .second-menu-bar-upper-bar .nav-link-b:hover {
822
+
823
+ border:1px solid white;
824
+
825
+ }
826
+
827
+
828
+
829
+ .second-menu-bar-lower-bar {
830
+
831
+ font-size:14px;
832
+
833
+
834
+
835
+ }
836
+
837
+
838
+
839
+ .second-menu-bar-lower-bar .nav-link-b {
840
+
841
+ padding:0px 8px;
842
+
843
+ text-decoration: none;
844
+
845
+ color:#CCCCCC;
846
+
847
+ line-height: 17px;
848
+
849
+ }
850
+
851
+ .second-menu-bar-middle {
852
+
853
+ width: 821px;
854
+
855
+
856
+
857
+ }
858
+
859
+ .second-menu-bar-right {
860
+
861
+ width: 400px;
862
+
863
+ height: 39px;
864
+
865
+ float: right;
866
+
867
+ }
868
+
869
+
870
+
871
+ .second-menu-bar-right:hover {
872
+
873
+ border:1px solid white;
874
+
875
+ }
876
+
877
+ ```