質問編集履歴

2

css を一部修正しました。

2021/07/01 07:56

投稿

beginner15
beginner15

スコア1

test CHANGED
File without changes
test CHANGED
@@ -76,95 +76,95 @@
76
76
 
77
77
 
78
78
 
79
- <body>
79
+ <body>
80
-
80
+
81
- <header>
81
+ <header>
82
-
82
+
83
- <nav id="nav">
83
+ <nav id="nav">
84
-
84
+
85
- <ul>
85
+ <ul>
86
-
86
+
87
- <li><a href="#">works</a></li>
87
+ <li><a href="#">works</a></li>
88
+
88
-
89
+ <li><a href="#">profile</a></li>
90
+
89
- <li><a href="#">blog</a></li>
91
+ <li><a href="#">blog</a></li>
90
-
91
- <li><a href="#">profile</a></li>
92
+
92
-
93
- <li><a href="#">contact</a></li>
93
+ <li><a href="#">contact</a></li>
94
-
94
+
95
- </ul>
95
+ </ul>
96
-
96
+
97
- </nav>
97
+ </nav>
98
-
98
+
99
- <div id="hamburger">
99
+ <div id="hamburger">
100
-
100
+
101
- <span class="inner_line" id="line1"></span>
101
+ <span class="inner_line" id="line1"></span>
102
-
102
+
103
- <span class="inner_line" id="line2"></span>
103
+ <span class="inner_line" id="line2"></span>
104
-
104
+
105
- <span class="inner_line" id="line3"></span>
105
+ <span class="inner_line" id="line3"></span>
106
+
107
+ </div>
108
+
109
+ <h1>My Portfolio</h1>
110
+
111
+ </header>
112
+
113
+
114
+
115
+ <div class="splide-outer">
116
+
117
+ <div class="splide">
118
+
119
+ <div class="splide__track">
120
+
121
+ <ul class="splide__list">
122
+
123
+ <li class="splide__slide">
124
+
125
+ <picture>
126
+
127
+ <source media="(min-width: 768px)" srcset="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1_PC">
128
+
129
+ <img src="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1_SP">
130
+
131
+ </picture>
132
+
133
+ </li>
134
+
135
+ <li class="splide__slide">
136
+
137
+ <picture>
138
+
139
+ <source media="(min-width: 768px)" srcset="https://placehold.jp/ffccff/000000/960x540.png?text=Slide2_PC">
140
+
141
+ <img src="https://placehold.jp/ffccff/000000/960x540.png?text=Slide2_SP">
142
+
143
+ </picture>
144
+
145
+ </li>
146
+
147
+ <li class="splide__slide">
148
+
149
+ <picture>
150
+
151
+ <source media="(min-width: 768px)" srcset="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide3_PC">
152
+
153
+ <img src="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide3_SP">
154
+
155
+ </picture>
156
+
157
+ </li>
158
+
159
+ </ul>
160
+
161
+ </div>
162
+
163
+ </div>
106
164
 
107
165
  </div>
108
166
 
109
- <h1>my portfolio</h1>
110
-
111
- </header>
112
-
113
-
114
-
115
- <div class="splide-outer">
116
-
117
- <div class="splide">
118
-
119
- <div class="splide__track">
120
-
121
- <ul class="splide__list">
122
-
123
- <li class="splide__slide">
124
-
125
- <picture>
126
-
127
- <source media="(min-width: 768px)" srcset="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1_PC">
128
-
129
- <img src="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1_SP">
130
-
131
- </picture>
132
-
133
- </li>
134
-
135
- <li class="splide__slide">
136
-
137
- <picture>
138
-
139
- <source media="(min-width: 768px)" srcset="https://placehold.jp/ffccff/000000/960x540.png?text=Slide2_PC">
140
-
141
- <img src="https://placehold.jp/ffccff/000000/960x540.png?text=Slide2_SP">
142
-
143
- </picture>
144
-
145
- </li>
146
-
147
- <li class="splide__slide">
148
-
149
- <picture>
150
-
151
- <source media="(min-width: 768px)" srcset="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide3_PC">
152
-
153
- <img src="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide3_SP">
154
-
155
- </picture>
156
-
157
- </li>
158
-
159
- </ul>
160
-
161
- </div>
167
+ </body>
162
-
163
- </div>
164
-
165
- </div>
166
-
167
-
168
168
 
169
169
  <!-- partial -->
170
170
 
@@ -172,15 +172,7 @@
172
172
 
173
173
  <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
174
174
 
175
-
176
-
177
- </body>
175
+
178
-
179
- </html>
180
-
181
-
182
-
183
-
184
176
 
185
177
 
186
178
 

1

htmlのコードを一部修正しました。

2021/07/01 07:56

投稿

beginner15
beginner15

スコア1

test CHANGED
File without changes
test CHANGED
@@ -182,6 +182,384 @@
182
182
 
183
183
 
184
184
 
185
+
186
+
187
+ ```
188
+
189
+
190
+
191
+ ```CSS
192
+
193
+ @charset "UTF-8";
194
+
195
+
196
+
197
+ /* -------------------------------- base -------------------------------- */
198
+
199
+
200
+
201
+ .html {
202
+
203
+ font-size: 62.5%;
204
+
205
+ }
206
+
207
+
208
+
209
+ .body {
210
+
211
+ font-size: 1.6rem;
212
+
213
+ margin: 0px auto;
214
+
215
+ padding: 0px;
216
+
217
+ text-align: center;
218
+
219
+ }
220
+
221
+
222
+
223
+
224
+
225
+
226
+
227
+ /* -------------------------------- hamburger -------------------------------- */
228
+
229
+
230
+
231
+ @media screen and (max-width: 480px) {
232
+
233
+ #nav {
234
+
235
+ z-index: 2;
236
+
237
+ }
238
+
239
+
240
+
241
+ #nav ul li {
242
+
243
+ font-size: 14px;
244
+
245
+ position: relative;
246
+
247
+ }
248
+
249
+
250
+
251
+ h1 {
252
+
253
+ display: none;
254
+
255
+ }
256
+
257
+
258
+
259
+ h2 {
260
+
261
+ display: block;
262
+
263
+ font-size: 14px;
264
+
265
+ }
266
+
267
+ }
268
+
269
+
270
+
271
+ * {
272
+
273
+ margin: 0;
274
+
275
+ padding: 0;
276
+
277
+ }
278
+
279
+
280
+
281
+ body {
282
+
283
+ background: #ffffff;
284
+
285
+ }
286
+
287
+
288
+
289
+ header {
290
+
291
+ position: fixed;
292
+
293
+ width: 100%;
294
+
295
+ height: 90px;
296
+
297
+ background: #ffffff;
298
+
299
+ }
300
+
301
+
302
+
303
+ #nav{
304
+
305
+ position: relative;
306
+
307
+ height: 100vh;
308
+
309
+ width: 40%;
310
+
311
+ left: -40%;
312
+
313
+ top: 0;
314
+
315
+ background: #ffffff;
316
+
317
+ transition: .7s;
318
+
319
+ z-index: 2;
320
+
321
+ }
322
+
323
+
324
+
325
+ #nav ul{
326
+
327
+ padding-top: 80px;
328
+
329
+ }
330
+
331
+
332
+
333
+ #nav ul li{
334
+
335
+ list-style-type: none;
336
+
337
+ font-size: 20px;
338
+
339
+ }
340
+
341
+
342
+
343
+ #nav a{
344
+
345
+ display: block;
346
+
347
+ text-decoration: none;
348
+
349
+ color: #000000;
350
+
351
+ margin: 0 15px;
352
+
353
+ padding: 10px;
354
+
355
+ transition: .5s;
356
+
357
+ }
358
+
359
+
360
+
361
+ #nav li a:hover{
362
+
363
+ color: #8d8d8d;
364
+
365
+ background: #cd5c5c;
366
+
367
+ border-bottom: none;
368
+
369
+ }
370
+
371
+
372
+
373
+ #hamburger {
374
+
375
+ display: block;
376
+
377
+ position: relative;
378
+
379
+ top: 20px;
380
+
381
+ left: 30px;
382
+
383
+ width: 50px;
384
+
385
+ height: 44px;
386
+
387
+ cursor: pointer;
388
+
389
+ transition: 1s;
390
+
391
+ }
392
+
393
+
394
+
395
+ .inner_line {
396
+
397
+ display: block;
398
+
399
+ position: absolute;
400
+
401
+ left: 0;
402
+
403
+ width: 50px;
404
+
405
+ height: 3px;
406
+
407
+ background-color: #5f5f5f;
408
+
409
+ transition: 1s;
410
+
411
+ border-radius: 4px;
412
+
413
+ }
414
+
415
+
416
+
417
+ #line1 {
418
+
419
+ top: 0;
420
+
421
+ }
422
+
423
+
424
+
425
+ #line2 {
426
+
427
+ top: 20px;
428
+
429
+ }
430
+
431
+
432
+
433
+ #line3 {
434
+
435
+ bottom: 0px;
436
+
437
+ }
438
+
439
+
440
+
441
+ h1, h2 {
442
+
443
+ text-align: center;
444
+
445
+ line-height: 90px;
446
+
447
+ color: #a7a7a7;
448
+
449
+ }
450
+
451
+
452
+
453
+ h2 {
454
+
455
+ display: none;
456
+
457
+ }
458
+
459
+
460
+
461
+ p {
462
+
463
+ padding-top: 200px;
464
+
465
+ text-align: center;
466
+
467
+ }
468
+
469
+
470
+
471
+ .in{
472
+
473
+ transform: translateX(100%);
474
+
475
+ }
476
+
477
+
478
+
479
+ .line_1,.line_2,.line_3{
480
+
481
+ background: #000000;
482
+
483
+ }
484
+
485
+
486
+
487
+ .line_1 {
488
+
489
+ transform: translateY(20px) rotate(-45deg);
490
+
491
+ top: 0;
492
+
493
+ }
494
+
495
+
496
+
497
+ .line_2 {
498
+
499
+ opacity: 0;
500
+
501
+ }
502
+
503
+
504
+
505
+ .line_3 {
506
+
507
+ transform: translateY(-20px) rotate(45deg);
508
+
509
+ bottom: 0;
510
+
511
+ }
512
+
513
+
514
+
515
+ /* -------------------------------- body -------------------------------- */
516
+
517
+
518
+
519
+ .splide-outer {
520
+
521
+ max-width: 100%;
522
+
523
+ margin: auto;
524
+
525
+ z-index: 1;
526
+
527
+ }
528
+
529
+
530
+
531
+ .splide__slide img {
532
+
533
+ width: 100%;
534
+
535
+ }
536
+
537
+
538
+
539
+ ```
540
+
541
+ ```JavaScript
542
+
543
+ function hamburger() {
544
+
545
+ document.getElementById('line1').classList.toggle('line_1');
546
+
547
+ document.getElementById('line2').classList.toggle('line_2');
548
+
549
+ document.getElementById('line3').classList.toggle('line_3');
550
+
551
+ document.getElementById('nav').classList.toggle('in');
552
+
553
+ }
554
+
555
+ document.getElementById('hamburger').addEventListener('click' , function () {
556
+
557
+ hamburger();
558
+
559
+ } );
560
+
561
+
562
+
185
563
  document.addEventListener('DOMContentLoaded', () => {
186
564
 
187
565
  new Splide('.splide', {
@@ -196,392 +574,6 @@
196
574
 
197
575
 
198
576
 
199
- ```CSS
200
-
201
- @charset "UTF-8";
202
-
203
-
204
-
205
- /* -------------------------------- base -------------------------------- */
206
-
207
-
208
-
209
- .html {
210
-
211
- font-size: 62.5%;
212
-
213
- }
214
-
215
-
216
-
217
- .body {
218
-
219
- font-size: 1.6rem;
220
-
221
- margin: 0px auto;
222
-
223
- padding: 0px;
224
-
225
- text-align: center;
226
-
227
- }
228
-
229
-
230
-
231
-
232
-
233
-
234
-
235
- /* -------------------------------- hamburger -------------------------------- */
236
-
237
-
238
-
239
- @media screen and (max-width: 480px) {
240
-
241
- #nav {
242
-
243
- z-index: 2;
244
-
245
- }
246
-
247
-
248
-
249
- #nav ul li {
250
-
251
- font-size: 14px;
252
-
253
- position: relative;
254
-
255
- }
256
-
257
-
258
-
259
- h1 {
260
-
261
- display: none;
262
-
263
- }
264
-
265
-
266
-
267
- h2 {
268
-
269
- display: block;
270
-
271
- font-size: 14px;
272
-
273
- }
274
-
275
- }
276
-
277
-
278
-
279
- * {
280
-
281
- margin: 0;
282
-
283
- padding: 0;
284
-
285
- }
286
-
287
-
288
-
289
- body {
290
-
291
- background: #ffffff;
292
-
293
- }
294
-
295
-
296
-
297
- header {
298
-
299
- position: fixed;
300
-
301
- width: 100%;
302
-
303
- height: 90px;
304
-
305
- background: #ffffff;
306
-
307
- }
308
-
309
-
310
-
311
- #nav{
312
-
313
- position: relative;
314
-
315
- height: 100vh;
316
-
317
- width: 40%;
318
-
319
- left: -40%;
320
-
321
- top: 0;
322
-
323
- background: #ffffff;
324
-
325
- transition: .7s;
326
-
327
- z-index: 2;
328
-
329
- }
330
-
331
-
332
-
333
- #nav ul{
334
-
335
- padding-top: 80px;
336
-
337
- }
338
-
339
-
340
-
341
- #nav ul li{
342
-
343
- list-style-type: none;
344
-
345
- font-size: 20px;
346
-
347
- }
348
-
349
-
350
-
351
- #nav a{
352
-
353
- display: block;
354
-
355
- text-decoration: none;
356
-
357
- color: #000000;
358
-
359
- margin: 0 15px;
360
-
361
- padding: 10px;
362
-
363
- transition: .5s;
364
-
365
- }
366
-
367
-
368
-
369
- #nav li a:hover{
370
-
371
- color: #8d8d8d;
372
-
373
- background: #cd5c5c;
374
-
375
- border-bottom: none;
376
-
377
- }
378
-
379
-
380
-
381
- #hamburger {
382
-
383
- display: block;
384
-
385
- position: relative;
386
-
387
- top: 20px;
388
-
389
- left: 30px;
390
-
391
- width: 50px;
392
-
393
- height: 44px;
394
-
395
- cursor: pointer;
396
-
397
- transition: 1s;
398
-
399
- }
400
-
401
-
402
-
403
- .inner_line {
404
-
405
- display: block;
406
-
407
- position: absolute;
408
-
409
- left: 0;
410
-
411
- width: 50px;
412
-
413
- height: 3px;
414
-
415
- background-color: #5f5f5f;
416
-
417
- transition: 1s;
418
-
419
- border-radius: 4px;
420
-
421
- }
422
-
423
-
424
-
425
- #line1 {
426
-
427
- top: 0;
428
-
429
- }
430
-
431
-
432
-
433
- #line2 {
434
-
435
- top: 20px;
436
-
437
- }
438
-
439
-
440
-
441
- #line3 {
442
-
443
- bottom: 0px;
444
-
445
- }
446
-
447
-
448
-
449
- h1, h2 {
450
-
451
- text-align: center;
452
-
453
- line-height: 90px;
454
-
455
- color: #a7a7a7;
456
-
457
- }
458
-
459
-
460
-
461
- h2 {
462
-
463
- display: none;
464
-
465
- }
466
-
467
-
468
-
469
- p {
470
-
471
- padding-top: 200px;
472
-
473
- text-align: center;
474
-
475
- }
476
-
477
-
478
-
479
- .in{
480
-
481
- transform: translateX(100%);
482
-
483
- }
484
-
485
-
486
-
487
- .line_1,.line_2,.line_3{
488
-
489
- background: #000000;
490
-
491
- }
492
-
493
-
494
-
495
- .line_1 {
496
-
497
- transform: translateY(20px) rotate(-45deg);
498
-
499
- top: 0;
500
-
501
- }
502
-
503
-
504
-
505
- .line_2 {
506
-
507
- opacity: 0;
508
-
509
- }
510
-
511
-
512
-
513
- .line_3 {
514
-
515
- transform: translateY(-20px) rotate(45deg);
516
-
517
- bottom: 0;
518
-
519
- }
520
-
521
-
522
-
523
- /* -------------------------------- body -------------------------------- */
524
-
525
-
526
-
527
- .splide-outer {
528
-
529
- max-width: 100%;
530
-
531
- margin: auto;
532
-
533
- z-index: 1;
534
-
535
- }
536
-
537
-
538
-
539
- .splide__slide img {
540
-
541
- width: 100%;
542
-
543
- }
544
-
545
-
546
-
547
- ```
548
-
549
- ```JavaScript
550
-
551
- function hamburger() {
552
-
553
- document.getElementById('line1').classList.toggle('line_1');
554
-
555
- document.getElementById('line2').classList.toggle('line_2');
556
-
557
- document.getElementById('line3').classList.toggle('line_3');
558
-
559
- document.getElementById('nav').classList.toggle('in');
560
-
561
- }
562
-
563
- document.getElementById('hamburger').addEventListener('click' , function () {
564
-
565
- hamburger();
566
-
567
- } );
568
-
569
-
570
-
571
- document.addEventListener('DOMContentLoaded', () => {
572
-
573
- new Splide('.splide', {
574
-
575
- type: 'loop',
576
-
577
- }).mount()
578
-
579
- })
580
-
581
- ```
582
-
583
-
584
-
585
577
  ### 試したこと
586
578
 
587
579