質問編集履歴

1

記述の場所を間違えておりました

2018/05/23 17:18

投稿

tyonomi
tyonomi

スコア11

test CHANGED
File without changes
test CHANGED
@@ -6,17 +6,17 @@
6
6
 
7
7
 
8
8
 
9
- ``` <header class="header">
9
+ ``` <div class="fixed-nav">
10
10
 
11
11
  <div class="btn-menu"><span></span><span></span><span></span></div>
12
12
 
13
- <div class="header-inner">
13
+ <div class="inner">
14
-
14
+
15
- <div class="header-logo"></div>
15
+ <div class="logo"><a href="#"><img src="img/logo.png" alt=""></a></div>
16
-
16
+
17
- <nav class="nav-header">
17
+ <nav class="nav">
18
-
18
+
19
- <ul class="list-header op-txt">
19
+ <ul class="list op-txt">
20
20
 
21
21
  <li class="nav-01"><a href="#01">01</a></li>
22
22
 
@@ -30,143 +30,131 @@
30
30
 
31
31
  </div>
32
32
 
33
- </header>
33
+ </div>
34
-
34
+
35
- ```
35
+ ```
36
-
37
-
38
-
36
+
37
+
38
+
39
- ```
39
+ ```
40
-
40
+
41
- .header {
41
+ .fixed-nav {
42
+
43
+ position: fixed;
44
+
45
+ left: 0;
46
+
47
+ top: 0;
48
+
49
+ z-index: 1000;
50
+
51
+ width: 100%;
52
+
53
+ min-width: 1080px;
54
+
55
+ height: 75px;
56
+
57
+ -webkit-transform: translateY(-75px);
58
+
59
+ transform: translateY(-75px);
60
+
61
+ transition-property: -webkit-transform;
62
+
63
+ transition-property: transform;
64
+
65
+ transition-property: transform, -webkit-transform;
66
+
67
+ transition-duration: 0.5s;
68
+
69
+ transition-delay: 0s;
70
+
71
+ transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
72
+
73
+ }
74
+
75
+
76
+
77
+ @media only screen and (max-width: 1030px) {
78
+
79
+ .fixed-nav {
80
+
81
+ min-width: 100px;
82
+
83
+ height: 66px;
84
+
85
+ height: 17.6vw;
86
+
87
+ -webkit-transform: translateY(-17.6vw);
88
+
89
+ transform: translateY(-17.6vw);
90
+
91
+ }
92
+
93
+ }
94
+
95
+
96
+
97
+ .fixed-nav:before {
98
+
99
+ content: '';
42
100
 
43
101
  position: absolute;
44
102
 
45
- top: 35px;
46
-
47
103
  left: 0;
48
104
 
49
- width: 100%;
50
-
51
- min-width: 1080px;
52
-
53
- z-index: 999;
54
-
55
- }
56
-
57
-
58
-
59
- @media only screen and (max-width: 1030px) {
60
-
61
- .header {
62
-
63
- min-width: 1px;
64
-
65
- position: absolute;
66
-
67
- height: 66px;
68
-
69
- height: 17.6vw;
70
-
71
- left: 0px;
72
-
73
- left: 0vw;
74
-
75
- top: 0px;
76
-
77
- top: 0vw;
78
-
79
- }
80
-
81
- }
82
-
83
-
84
-
85
- @media only screen and (max-width: 1030px) {
86
-
87
- .header.show .nav-header {
88
-
89
- -webkit-transform: translate3d(0, 0, 0);
90
-
91
- transform: translate3d(0, 0, 0);
92
-
93
- }
94
-
95
- }
96
-
97
-
98
-
99
- @media only screen and (max-width: 1030px) {
100
-
101
- .header.show2 .header-logo {
102
-
103
- position: fixed;
104
-
105
- z-index: 10;
106
-
107
- left: 20px;
108
-
109
- left: 5.33333vw;
110
-
111
- top: 20px;
112
-
113
- top: 5.33333vw;
114
-
115
- width: 195px;
116
-
117
- width: 52vw;
118
-
119
- height: 26px;
120
-
121
- height: 6.93333vw;
122
-
123
- }
124
-
125
- .header.show2 .header-logo a {
126
-
127
- display: block;
128
-
129
- width: 100%;
130
-
131
- height: 100%;
132
-
133
- }
134
-
135
- .header.show2 .header-logo a img {
136
-
137
- opacity: 1;
138
-
139
- }
140
-
141
- }
142
-
143
-
144
-
145
- @media only screen and (max-width: 1030px) {
146
-
147
- .header.show2 .nav-header {
148
-
149
- opacity: 1;
150
-
151
- }
152
-
153
- }
154
-
155
-
156
-
157
- @media only screen and (max-width: 1030px) {
158
-
159
- .header .btn-menu span {
160
-
161
- background-color: #fff;
162
-
163
- }
164
-
165
- }
166
-
167
-
168
-
169
- .header-inner {
105
+ right: 0;
106
+
107
+ top: 0;
108
+
109
+ bottom: 0;
110
+
111
+ background-color: #00B4D5;
112
+
113
+ transition-property: opacity;
114
+
115
+ transition-duration: 0.2s;
116
+
117
+ transition-delay: 0s;
118
+
119
+ transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
120
+
121
+ opacity: 1;
122
+
123
+ }
124
+
125
+
126
+
127
+ .fixed-nav.show {
128
+
129
+ -webkit-transform: translateY(0);
130
+
131
+ transform: translateY(0);
132
+
133
+ }
134
+
135
+
136
+
137
+ .fixed-nav.trans {
138
+
139
+ opacity: 0;
140
+
141
+ transition-property: opacity;
142
+
143
+ transition-duration: 0.5s;
144
+
145
+ transition-delay: 0.1s;
146
+
147
+ transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
148
+
149
+ }
150
+
151
+
152
+
153
+ .fixed-nav .inner {
154
+
155
+ position: relative;
156
+
157
+ z-index: 1;
170
158
 
171
159
  display: -webkit-box;
172
160
 
@@ -186,130 +174,54 @@
186
174
 
187
175
  align-items: center;
188
176
 
189
- }
190
-
191
-
192
-
193
- @media only screen and (max-width: 1030px) {
194
-
195
- .header-inner {
196
-
197
- display: block;
198
-
199
- }
200
-
201
- }
202
-
203
-
204
-
205
- @media only screen and (max-width: 1030px) {
206
-
207
- .header-inner .header-logo {
208
-
209
- margin-left: 0;
210
-
211
- position: absolute;
212
-
213
- z-index: 10;
214
-
215
- left: 20px;
216
-
217
- left: 5.33333vw;
218
-
219
- top: 20px;
220
-
221
- top: 5.33333vw;
222
-
223
- width: 195px;
224
-
225
- width: 52vw;
226
-
227
- height: 26px;
228
-
229
- height: 6.93333vw;
230
-
231
- }
232
-
233
- .header-inner .header-logo a {
234
-
235
- display: block;
236
-
237
- width: 100%;
238
-
239
- height: 100%;
240
-
241
- }
242
-
243
- .header-inner .header-logo a img {
244
-
245
- transition-property: opacity;
246
-
247
- transition-duration: 0.5s;
248
-
249
- transition-delay: 0s;
250
-
251
- transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
252
-
253
- }
254
-
255
- }
256
-
257
-
258
-
259
- .header-inner .nav-header {
177
+ height: 100%;
178
+
179
+ }
180
+
181
+
182
+
183
+ .fixed-nav .inner .logo {
184
+
185
+ margin-left: 40px;
186
+
187
+ width: 180px;
188
+
189
+ }
190
+
191
+
192
+
193
+ @media only screen and (max-width: 1030px) {
194
+
195
+ .fixed-nav .inner .logo {
196
+
197
+ margin-left: 20px;
198
+
199
+ margin-left: 5.33333vw;
200
+
201
+ width: 180px;
202
+
203
+ }
204
+
205
+ }
206
+
207
+
208
+
209
+ @media only screen and (max-width: 1030px) {
210
+
211
+ .fixed-nav .inner .nav {
212
+
213
+ display: none;
214
+
215
+ }
216
+
217
+ }
218
+
219
+
220
+
221
+ .fixed-nav .list {
260
222
 
261
223
  margin-right: 40px;
262
224
 
263
- }
264
-
265
-
266
-
267
- @media only screen and (max-width: 1030px) {
268
-
269
- .header-inner .nav-header {
270
-
271
- transition-property: opacity;
272
-
273
- transition-duration: 0.5s;
274
-
275
- transition-delay: 0s;
276
-
277
- transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
278
-
279
- margin-right: 0;
280
-
281
- display: block;
282
-
283
- -webkit-transform: translate3d(-100%, 0, 0);
284
-
285
- transform: translate3d(-100%, 0, 0);
286
-
287
- opacity: 0;
288
-
289
- position: fixed;
290
-
291
- left: 0;
292
-
293
- top: 0;
294
-
295
- width: 100%;
296
-
297
- height: 100%;
298
-
299
- background-color: #1987C1;
300
-
301
- background-size: cover;
302
-
303
- background-position: top center;
304
-
305
- }
306
-
307
- }
308
-
309
-
310
-
311
- .list-header {
312
-
313
225
  text-align: center;
314
226
 
315
227
  font-size: 0;
@@ -318,41 +230,7 @@
318
230
 
319
231
 
320
232
 
321
- @media only screen and (max-width: 1030px) {
322
-
323
- .list-header {
324
-
325
- display: -webkit-box;
326
-
327
- display: -ms-flexbox;
328
-
329
- display: flex;
330
-
331
- -ms-flex-wrap: wrap;
332
-
333
- flex-wrap: wrap;
334
-
335
- text-align: left;
336
-
337
- width: 311px;
338
-
339
- width: 82.93333vw;
340
-
341
- margin-top: 105px;
342
-
343
- margin-top: 28vw;
344
-
345
- margin-left: auto;
346
-
347
- margin-right: auto;
348
-
349
- }
350
-
351
- }
352
-
353
-
354
-
355
- .list-header li {
233
+ .fixed-nav .list li {
356
234
 
357
235
  font-size: 13px;
358
236
 
@@ -360,7 +238,7 @@
360
238
 
361
239
  font-weight: bold;
362
240
 
363
- letter-spacing: 0.1em;
241
+ letter-spacing: 0.05em;
364
242
 
365
243
  display: inline-block;
366
244
 
@@ -372,7 +250,7 @@
372
250
 
373
251
  @media only screen and (max-width: 1030px) {
374
252
 
375
- .list-header li {
253
+ .fixed-nav .list li {
376
254
 
377
255
  font-size: 30px;
378
256
 
@@ -388,237 +266,17 @@
388
266
 
389
267
 
390
268
 
391
- .list-header li:first-child {
392
-
393
- margin-left: 0;
394
-
395
- }
396
-
397
-
398
-
399
- @media only screen and (max-width: 1030px) {
400
-
401
- .list-header li {
402
-
403
- margin-left: 0;
404
-
405
- width: 155.5px;
406
-
407
- width: 41.46667vw;
408
-
409
- margin-bottom: 58px;
410
-
411
- margin-bottom: 15.46667vw;
412
-
413
- }
414
-
415
- }
416
-
417
-
418
-
419
- .list-header li a:hover {
420
-
421
- color: #1987C1;
422
-
423
- }
424
-
425
-
426
-
427
- @media only screen and (max-width: 1030px) {
428
-
429
- .list-header li a {
430
-
431
- color: #fff;
432
-
433
- }
434
-
435
- }
436
-
437
-
438
-
439
- .btn-menu {
440
-
441
- display: none;
442
-
443
- }
444
-
445
-
446
-
447
- @media only screen and (max-width: 1030px) {
448
-
449
- .btn-menu {
450
-
451
- display: block;
452
-
453
- z-index: 1000;
454
-
455
- position: absolute;
456
-
457
- right: 20px;
458
-
459
- right: 5.33333vw;
460
-
461
- top: 30px;
462
-
463
- top: 4vw;
464
-
465
- width: 16px;
466
-
467
- width: 4.26667vw;
468
-
469
- height: 16px;
470
-
471
- height: 4.26667vw;
472
-
473
- overflow: hidden;
474
-
475
- transition-property: -webkit-transform;
476
-
477
- transition-property: transform;
478
-
479
- transition-property: transform, -webkit-transform;
480
-
481
- transition-duration: 0.5s;
482
-
483
- transition-delay: 0s;
484
-
485
- transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
486
-
487
- }
488
-
489
- .btn-menu span {
490
-
491
- position: absolute;
492
-
493
- display: block;
494
-
495
- left: 0;
496
-
497
- background-color: #fff;
498
-
499
- height: 2px;
500
-
501
- height: 0.53333vw;
502
-
503
- width: 100%;
504
-
505
- transition-property: -webkit-transform background-color opacity;
506
-
507
- transition-property: transform background-color opacity;
508
-
509
- transition-property: transform background-color opacity, -webkit-transform background-color opacity;
510
-
511
- transition-duration: 0.5s;
512
-
513
- transition-delay: 0s;
514
-
515
- transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
516
-
517
- }
518
-
519
- .btn-menu span:nth-child(1) {
520
-
521
- top: 2px;
522
-
523
- top: 0.53333vw;
524
-
525
- }
526
-
527
- .btn-menu span:nth-child(2) {
528
-
529
- top: 7px;
530
-
531
- top: 1.86667vw;
532
-
533
- }
534
-
535
- .btn-menu span:nth-child(2):before {
536
-
537
- content: '';
538
-
539
- display: block;
540
-
541
- position: absolute;
542
-
543
- left: 7px;
544
-
545
- left: 1.86667vw;
546
-
547
- top: -7px;
548
-
549
- top: -1.86667vw;
550
-
551
- width: 2px;
552
-
553
- width: 0.53333vw;
554
-
555
- height: 16px;
556
-
557
- height: 4.26667vw;
558
-
559
- background-color: #fff;
560
-
561
- opacity: 0;
562
-
563
- transition-property: opacity;
564
-
565
- transition-duration: 0.5s;
566
-
567
- transition-delay: 0s;
568
-
569
- transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
570
-
571
- }
572
-
573
- .btn-menu span:nth-child(3) {
574
-
575
- top: 12px;
576
-
577
- top: 3.2vw;
578
-
579
- }
580
-
581
- .btn-menu.open {
582
-
583
- -webkit-transform: rotate(135deg);
584
-
585
- transform: rotate(135deg);
586
-
587
- position: fixed;
588
-
589
- }
590
-
591
- .btn-menu.open span {
592
-
593
- background-color: #fff;
594
-
595
- }
596
-
597
- .btn-menu.open span:nth-child(1) {
598
-
599
- -webkit-transform: translate3d(-100%, 0, 0);
600
-
601
- transform: translate3d(-100%, 0, 0);
602
-
603
- opacity: 0;
604
-
605
- }
606
-
607
- .btn-menu.open span:nth-child(2):before {
608
-
609
- opacity: 1;
610
-
611
- }
612
-
613
- .btn-menu.open span:nth-child(3) {
614
-
615
- -webkit-transform: translate3d(100%, 0, 0);
616
-
617
- transform: translate3d(100%, 0, 0);
618
-
619
- opacity: 0;
620
-
621
- }
269
+ .fixed-nav .list li a {
270
+
271
+ color: #fff;
272
+
273
+ }
274
+
275
+
276
+
277
+ .fixed-nav .list li a:hover {
278
+
279
+ color: #A12124;
622
280
 
623
281
  }
624
282