質問編集履歴

1

ご指摘があったため、一部ではなくサイトのコードすべてを記入いたしました。

2021/04/30 08:41

投稿

Nemuu
Nemuu

スコア14

test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
  HTML,CSS,Jsの
32
32
 
33
- ```ここに言語名を入力
33
+ ```Javascript
34
34
 
35
35
 
36
36
 
@@ -46,15 +46,15 @@
46
46
 
47
47
  {
48
48
 
49
- let btn= document.getElementById('btn'); //ボタン
49
+ let btn= document.getElementById('btn');
50
-
50
+
51
- let back=document.getElementById('menuBack');//メニュー画面
51
+ let back=document.getElementById('menuBack')
52
52
 
53
53
 
54
54
 
55
55
  btn.addEventListener('click', () => {
56
56
 
57
- back.classList.remove('on');
57
+ back.classList.remove('on')
58
58
 
59
59
  })
60
60
 
@@ -62,37 +62,925 @@
62
62
 
63
63
 
64
64
 
65
+
66
+
65
67
  ```
66
68
 
67
69
 
68
70
 
71
+ ```CSS
72
+
73
+
74
+
75
+
76
+
77
+ body {
78
+
79
+ font-family:serif;
80
+
81
+
82
+
83
+ }
84
+
85
+
86
+
87
+ .w{
88
+
89
+ margin: 0 20%;
90
+
91
+
92
+
93
+ }
94
+
95
+
96
+
97
+ .category{
98
+
99
+ margin-top: 200px;
100
+
101
+
102
+
103
+ }
104
+
105
+
106
+
107
+ p{
108
+
109
+ color:dimgrey;
110
+
111
+ transition: 0.5s all;
112
+
113
+ }
114
+
115
+
116
+
117
+ p:hover{
118
+
119
+ color: black;
120
+
121
+ }
122
+
123
+
124
+
125
+
126
+
127
+
128
+
129
+ img,video{
130
+
131
+ cursor: pointer;
132
+
133
+ opacity: 1;
134
+
135
+ transition: all 0.5s;
136
+
137
+ }
138
+
139
+ img:hover,video:hover{
140
+
141
+ cursor: pointer;
142
+
143
+ opacity: 0.8;
144
+
145
+ }
146
+
147
+
148
+
149
+ header div{
150
+
151
+ height: 100px;
152
+
153
+ background-color: white;
154
+
155
+ width: 100%;
156
+
157
+ position: fixed;
158
+
159
+ z-index: 1;
160
+
161
+ top: 0;
162
+
163
+ opacity: 0.8;
164
+
165
+
166
+
167
+ }
168
+
169
+
170
+
171
+ #menuBack{
172
+
173
+ opacity: 0.7;
174
+
175
+ position: fixed;
176
+
177
+ background-color: black;
178
+
179
+ top: 0;
180
+
181
+ right: 0;
182
+
183
+ left:0;
184
+
185
+ bottom:0;
186
+
187
+ }
188
+
189
+
190
+
191
+ .on{
192
+
193
+ display: none;
194
+
195
+ }
196
+
197
+
198
+
199
+ i{
200
+
201
+ color:gray;
202
+
203
+ }
204
+
205
+
206
+
207
+ .fa-bars{
208
+
209
+ display:none;
210
+
211
+ }
212
+
213
+
214
+
215
+ h1,h3{
216
+
217
+ text-align: center;
218
+
219
+ color:limegreen;
220
+
221
+ }
222
+
223
+
224
+
225
+ h1:hover,h3:hover{
226
+
227
+ text-align: center;
228
+
229
+ color:red;
230
+
231
+ transition: 0.5s all;
232
+
233
+ }
234
+
235
+
236
+
237
+ h4{
238
+
239
+ color: gray;
240
+
241
+ }
242
+
243
+
244
+
245
+ .logo{
246
+
247
+ margin:0;
248
+
249
+ height: 100px;
250
+
251
+ }
252
+
253
+
254
+
255
+ .logo2{
256
+
257
+ margin:0;
258
+
259
+ height: 100px;
260
+
261
+ display: none;
262
+
263
+ }
264
+
265
+
266
+
267
+ .about-w{
268
+
269
+ display: flex;
270
+
271
+ }
272
+
273
+ .about-w img{
274
+
275
+ width: 30%;
276
+
277
+ height: 30%;
278
+
279
+
280
+
281
+ }
282
+
283
+
284
+
285
+ .about-w p{
286
+
287
+ width: 50%;
288
+
289
+ margin: 0 10%;
290
+
291
+ margin:auto;
292
+
293
+
294
+
295
+ }
296
+
297
+
298
+
299
+ .content{
300
+
301
+ width: 80%;
302
+
303
+ margin:100px auto;
304
+
305
+
306
+
307
+
308
+
309
+ border-radius: 10px;
310
+
311
+ margin: 50px auto;
312
+
313
+ }
314
+
315
+
316
+
317
+ .headImg{
318
+
319
+ width: 100%;
320
+
321
+ }
322
+
323
+
324
+
325
+ .headImg2{
326
+
327
+ width: 100%;
328
+
329
+ display: none;
330
+
331
+ }
332
+
333
+
334
+
335
+ .skill-parent{
336
+
337
+ display: flex;
338
+
339
+ }
340
+
341
+
342
+
343
+ .skill-child{
344
+
345
+ width: 46%;
346
+
347
+ margin: 0 2%;
348
+
349
+ }
350
+
351
+
352
+
353
+ .skill-child i{
354
+
355
+ width: 100%;
356
+
357
+ text-align: center;
358
+
359
+ font-size: 100px;
360
+
361
+ }
362
+
363
+
364
+
365
+ .skill-child h4{
366
+
367
+ text-align: center;
368
+
369
+ }
370
+
371
+
372
+
373
+ .work1{
374
+
375
+ display: flex;
376
+
377
+ }
378
+
379
+
380
+
381
+ .work1 img{
382
+
383
+ width: 31%;
384
+
385
+ margin: 2%;
386
+
387
+ border: 1px solid #ccc;
388
+
389
+ }
390
+
391
+
392
+
393
+ .work2{
394
+
395
+ display: flex;
396
+
397
+ }
398
+
399
+
400
+
401
+ .work2 img:first-child{
402
+
403
+ width: 70%;
404
+
405
+ }
406
+
407
+
408
+
409
+ .work2 img:last-child{
410
+
411
+ width: 30%;
412
+
413
+ }
414
+
415
+
416
+
417
+
418
+
419
+ .contact-w{
420
+
421
+ display: flex;
422
+
423
+
424
+
425
+ }
426
+
427
+ .contact-w img{
428
+
429
+ width: 30%;
430
+
431
+
432
+
433
+
434
+
435
+
436
+
437
+
438
+
439
+ }
440
+
441
+
442
+
443
+ .contact-w p{
444
+
445
+ width: 50%;
446
+
447
+ margin: auto 10%;
448
+
449
+
450
+
451
+
452
+
453
+
454
+
455
+ }
456
+
457
+ @media(max-width:1000px) {
458
+
459
+ .w{
460
+
461
+ margin: 0 0%;
462
+
463
+
464
+
465
+ }
466
+
467
+
468
+
469
+ .category{
470
+
471
+ margin-top: 100px;
472
+
473
+
474
+
475
+ }
476
+
477
+
478
+
479
+
480
+
481
+
482
+
483
+ .headImg{
484
+
485
+ width: 100%;
486
+
487
+ display:none;
488
+
489
+ }
490
+
491
+
492
+
493
+ .headImg2{
494
+
495
+ width: 100%;
496
+
497
+ display: block;
498
+
499
+ }
500
+
501
+
502
+
503
+ .fas{
504
+
505
+ display:block;
506
+
507
+ line-height:120px;
508
+
509
+ font-size: 50px;
510
+
511
+ float: left;
512
+
513
+ }
514
+
515
+
516
+
517
+ video{
518
+
519
+ display: none;
520
+
521
+ }
522
+
523
+
524
+
525
+ .content{
526
+
527
+ width: 95%;
528
+
529
+ margin:2.5%;
530
+
531
+
532
+
533
+ border-radius: 10px;
534
+
535
+
536
+
537
+ }
538
+
539
+
540
+
541
+ header div{
542
+
543
+ height: 120px;
544
+
545
+ background-color: white;
546
+
547
+ width: 100%;
548
+
549
+ z-index: 1;
550
+
551
+ top: 0;
552
+
553
+ }
554
+
555
+
556
+
557
+ .logo{
558
+
559
+ margin:0;
560
+
561
+ height: 70px;
562
+
563
+ display: none;
564
+
565
+ }
566
+
567
+
568
+
569
+ .logo2{
570
+
571
+ margin:0 100px;
572
+
573
+ height: 100px;
574
+
575
+ display:block;
576
+
577
+ float: right;
578
+
579
+ }
580
+
581
+
582
+
583
+ .about-w img{
584
+
585
+ width: 30%;
586
+
587
+ height: 30%;
588
+
589
+
590
+
591
+ }
592
+
593
+
594
+
595
+ .about-w p{
596
+
597
+ width: 65%;
598
+
599
+ margin: 0 2.5%;
600
+
601
+ margin:auto;
602
+
603
+
604
+
605
+ }
606
+
607
+
608
+
609
+
610
+
611
+
612
+
613
+
614
+
615
+ .skill-parent{
616
+
617
+ display:block;
618
+
619
+ }
620
+
621
+
622
+
623
+ .skill-child{
624
+
625
+ width: 96%;
626
+
627
+ margin: 0 2%;
628
+
629
+ }
630
+
631
+
632
+
633
+ .skill-child i{
634
+
635
+ width: 100%;
636
+
637
+ text-align: center;
638
+
639
+ font-size: 100px;
640
+
641
+ }
642
+
643
+
644
+
645
+
646
+
647
+ .work1{
648
+
649
+ display: block;
650
+
651
+ }
652
+
653
+
654
+
655
+ .work1 img{
656
+
657
+ width: 90%;
658
+
659
+ margin: 5%;
660
+
661
+ }
662
+
663
+
664
+
665
+
666
+
667
+ .work2 img:first-child{
668
+
669
+ width: 90%;
670
+
671
+ margin: 5%;
672
+
673
+ }
674
+
675
+ .work2 img:last-child{
676
+
677
+ width: 0%;
678
+
679
+ }
680
+
681
+
682
+
683
+ .contact-w p{
684
+
685
+ width: 75%;
686
+
687
+ margin: auto 2.5%;
688
+
689
+ font-size: 18px;
690
+
691
+ }
692
+
693
+ .contact-w img{
694
+
695
+ width: 20%;
696
+
697
+ height: 30%;
698
+
699
+
700
+
701
+ }
702
+
703
+ }
704
+
705
+
706
+
707
+
708
+
69
709
  ```
70
710
 
71
- #menuBack{
72
-
73
- opacity: 0.7;
74
-
75
- position: fixed;
76
-
77
- background-color: black;
78
-
79
- top: 0;
80
-
81
- right: 0;
82
-
83
- left:0;
84
-
85
- bottom:0;
86
-
87
- }
88
-
89
-
90
-
91
- .on{
92
-
93
- display: none;
94
-
95
- }
711
+
712
+
713
+ ```HTML
714
+
715
+
716
+
717
+ <!DOCTYPE html>
718
+
719
+ <html lang="ja">
720
+
721
+ <head>
722
+
723
+ <meta charset="utf-8">
724
+
725
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
726
+
727
+ <link rel="stylesheet" href="style.css">
728
+
729
+ <title>ぽーとふぉりお</title>
730
+
731
+ </head>
732
+
733
+ <header>
734
+
735
+
736
+
737
+ <div>
738
+
739
+
740
+
741
+
742
+
743
+ <i class="fas fa-bars " id="btn"></i>
744
+
745
+ <video class="logo" src="logo.mp4" loop autoplay muted ></video>
746
+
747
+ <img class="logo2" src="logo2.png" alt="">
748
+
749
+ </div>
750
+
751
+
752
+
753
+ <video class="headImg" src="head.mp4" loop autoplay muted></video>
754
+
755
+ <img class="headImg2" src="head.png" alt="">
756
+
757
+
758
+
759
+ </header>
760
+
761
+ <body>
762
+
763
+ <div class="w">
764
+
765
+
766
+
767
+ <div class="on" id="menuBack ">
768
+
769
+
770
+
771
+ </div>
772
+
773
+ <div class="category">
774
+
775
+ <h1>About</h1>
776
+
777
+ <p>主にweb制作のお仕事をメインで活動しており、ゲーム作成なども行っております。
778
+
779
+ 現在閲覧していただいてるポートフォリオはWordpressなどの外部サービスに頼らず、
780
+
781
+ 0からコーディング、デザインしております。
782
+
783
+ またフリーランスの為、お客様と円滑かつ迅速な対応や作業を行うことができます。<br><br>
784
+
785
+
786
+
787
+ </p>
788
+
789
+ <div class="about-w">
790
+
791
+ <img src="about.png" alt="">
792
+
793
+ <p>
794
+
795
+
796
+
797
+ 名称 :ハセガワ ユウヤ Hasegawa Yuya<br>
798
+
799
+ 所在地 :東京都内<br>
800
+
801
+ お問い合わせ :nemu.oto0106@gmail.com<br>
802
+
803
+ 事業内容 :Web、アプリ制作、HTML,CSS,JavaScriptコーディング<br>
804
+
805
+
806
+
807
+
808
+
809
+ </p>
810
+
811
+
812
+
813
+ </div>
814
+
815
+
816
+
817
+
818
+
819
+ <div class="category">
820
+
821
+ <h1>Service</h1>
822
+
823
+ <h3>~HTML、CSS、JavaScript~</h3>
824
+
825
+ <div class="skill-w">
826
+
827
+ <div class="skill-parent">
828
+
829
+ <div class="skill-child">
830
+
831
+ <h4>Cording</h4>
832
+
833
+ <i class="fas fa-code"></i>
834
+
835
+ <p>ただコーディングするだけでなく、カスタマイズや修正しやすいようエディタの配列にまでこだわってコーディングいたします。
836
+
837
+ レスポンシブ対応も得意です。</p>
838
+
839
+ </div>
840
+
841
+ <div class="skill-child">
842
+
843
+ <h4>Teaching</h4>
844
+
845
+ <i class="fas fa-chalkboard-teacher"></i>
846
+
847
+ <p>teratailというサイトでプログラミングの指導を行っています。webサイトの作り方はもちろん、コードの修正やアドバイスなども全力でサポートいたします。</p>
848
+
849
+ </div>
850
+
851
+ </div>
852
+
853
+
854
+
855
+
856
+
857
+
858
+
859
+ </div>
860
+
861
+ </div>
862
+
863
+ </div>
864
+
865
+
866
+
867
+ <div class="category">
868
+
869
+ <h1>Work</h1>
870
+
871
+ <h3>~web制作~</h3>
872
+
873
+
874
+
875
+ <div class="work1">
876
+
877
+ <img src="atu.png" alt="">
878
+
879
+ <img src="eng.png" alt="">
880
+
881
+ <img src="sibu.png" alt="">
882
+
883
+
884
+
885
+ </div>
886
+
887
+ <p class="content">
888
+
889
+ 主にHTML,CSS,JavaScriptを使い、多くのサイトのコーディングを行ってまいりました。<br>
890
+
891
+ メディアクエリという技術を使い、すべてのデバイスにレスポンシブ対応させることができます。<br>
892
+
893
+ コーディングだけでなくwebデザインの仕事も承っております。
894
+
895
+ </p>
896
+
897
+
898
+
899
+ <h3>~Javascriptを使ったゲーム制作~</h3>
900
+
901
+
902
+
903
+ <div class="work2">
904
+
905
+ <img src="quiz.png" alt="">
906
+
907
+ <img src="quiz2.png" alt="">
908
+
909
+ </div>
910
+
911
+ <p class="content">
912
+
913
+ JavaScriptを活用し、ミニゲームの作成を行っています。
914
+
915
+ ゲーム作成の技術を活用し、動きのあるwebサイトに仕上げることができます。
916
+
917
+ スマホのアプリに対応させる為に活動中。
918
+
919
+ </p>
920
+
921
+ </div>
922
+
923
+
924
+
925
+
926
+
927
+
928
+
929
+ <div class="category">
930
+
931
+ <h1>Cotact</h1>
932
+
933
+
934
+
935
+
936
+
937
+ <div class="contact-w">
938
+
939
+ <img src="about.png" alt="">
940
+
941
+ <p>
942
+
943
+ 名称 :ハセガワ ユウヤ Hasegawa Yuya<br>
944
+
945
+ 所在地 :東京都内<br>
946
+
947
+ お問い合わせ :nemu.oto0106@gmail.com<br>
948
+
949
+ 事業内容:Web、アプリ制作、HTML,CSS,JavaScriptコーディング<br>
950
+
951
+
952
+
953
+
954
+
955
+ </p>
956
+
957
+
958
+
959
+ </div>
960
+
961
+ </div>
962
+
963
+ </div>
964
+
965
+
966
+
967
+ <script src="unko.js">
968
+
969
+
970
+
971
+ </script>
972
+
973
+
974
+
975
+ </body>
976
+
977
+
978
+
979
+ </html>
980
+
981
+
982
+
983
+
96
984
 
97
985
 
98
986
 
@@ -100,24 +988,6 @@
100
988
 
101
989
 
102
990
 
103
- ```
104
-
105
-
106
-
107
- <i class="fas fa-bars " id="btn"></i>
108
-
109
- <div class="on" id="menuBack ">
110
-
111
- </div>
112
-
113
-
114
-
115
-
116
-
117
- ```
118
-
119
-
120
-
121
991
  ### 試したこと
122
992
 
123
993