質問編集履歴

2

修正

2019/08/05 06:40

投稿

risacuspin
risacuspin

スコア18

test CHANGED
File without changes
test CHANGED
@@ -4,1038 +4,1036 @@
4
4
 
5
5
  webサイトにトップページボタンを作り、JavaScriptの機能をつけたいです。
6
6
 
7
+
8
+
9
+
10
+
11
+ ### 発生している問題・エラーメッセージ
12
+
13
+ トップページボタンはすでにできていますが、JavaScriptの機能が反映されません。
14
+
15
+
16
+
17
+ ### 該当のソースコード
18
+
19
+
20
+
21
+ ```html
22
+
23
+ <!doctype html>
24
+
25
+ <html>
26
+
27
+ <head>
28
+
29
+ <meta charset="UTF-8">
30
+
31
+ <meta name="viewport" content="width=device-width,initial-scale=1">
32
+
33
+ <title>Home|Risa_designer</title>
34
+
35
+ <link href="https://fonts.googleapis.com/css?family=Bitter:400,700&display=swap" rel="stylesheet">
36
+
37
+ <link rel="stylesheet" href="css/style.css">
38
+
39
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
40
+
41
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
42
+
43
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
44
+
45
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
46
+
47
+ <div id="page_top"><a href="#"></a></div>
48
+
49
+ </head>
50
+
51
+ <body id="portfolio">
52
+
53
+
54
+
55
+ <!-- header始まり -->
56
+
57
+ <header>
58
+
59
+ <div class="logo">
60
+
61
+ <a href="index.html"><img src="images/logo.png" alt="RisaDesign"></a>
62
+
63
+ </div>
64
+
65
+ <nav>
66
+
67
+ <ul class="global-nav">
68
+
69
+ <li><a href="index.html">Home</a></li>
70
+
71
+ <li><a href="about.html">About</a></li>
72
+
73
+ <li><a href="contact.html">Contact</a></li>
74
+
75
+ </ul>
76
+
77
+ </nav>
78
+
79
+ </header>
80
+
81
+ <!-- header終わり -->
82
+
83
+
84
+
85
+ <!-- wrap始まり -->
86
+
87
+ <div id="wrap" class="clearfix">
88
+
89
+ <div class="content">
90
+
91
+ <div class="main">
92
+
93
+ <h1>Home</h1>
94
+
95
+ <p>ご依頼についてと実績を掲載しています。</p>
96
+
97
+ <section>
98
+
99
+ <h2><a href="photograph.html"><img src="images/flower.jpg" alt="flower"></a></h2>
100
+
101
+ <p>Webデザインに関する説明となっており、ご依頼する際にご確認して頂きたい内容となっております。<br>「サービス内容」「制作料金」「ご契約の流れ」<a href="photograph.html">詳しくみる≫</a></p>
102
+
103
+ </section>
104
+
105
+ <section>
106
+
107
+ <h2><a href="video.html"><img src="images/pc.jpg" alt="pc"></a></h2>
108
+
109
+ <p>制作実績の紹介となっております。Webデザイン関連と紙デザインに分けて掲載しております。「Webデザイン関連」「名刺デザイン」<a href="video.html">詳しくみる≫</a></p>
110
+
111
+ </section>
112
+
113
+ </div>
114
+
115
+ <aside class="sidebar">
116
+
117
+ <section>
118
+
119
+ <h2>ご依頼について</h2>
120
+
121
+ <ul>
122
+
123
+ <li><a href="photograph.html#サービス内容">サービス内容</a></li>
124
+
125
+ <li><a href="photograph.html#制作料金">制作料金</a></li>
126
+
127
+ <li><a href="photograph.html#ご契約の流れ">ご契約の流れ</a></li>
128
+
129
+ </ul>
130
+
131
+ </section>
132
+
133
+ <section>
134
+
135
+ <h2>制作実績</h2>
136
+
137
+ <ul>
138
+
139
+ <li><a href="video.html#Webデザイン関連">Webデザイン関連</a></li>
140
+
141
+ <li><a href="video.html#名刺デザイン">名刺デザイン</a></li>
142
+
143
+ </ul>
144
+
145
+ </section>
146
+
147
+ </aside>
148
+
149
+ </div>
150
+
151
+ </div>
152
+
153
+ <!-- wrap終わり -->
154
+
155
+
156
+
157
+ <!-- footer始まり -->
158
+
159
+ <!--pagetop-btn-->
160
+
161
+ <a href="#" class="btn-pageTop"><span class="fa fa-chevron-up"></span></a>
162
+
163
+ <!--/pagetop-btn-->
164
+
165
+
166
+
167
+ <footer>
168
+
169
+ <small>&copy;2019 Risa_Design All rights reserved.</small>
170
+
171
+ <a href="https://www.instagram.com/rsymuc/" target="_blank" ><img src="images/insta2.png" class="insta2" alt="insta2"></a>
172
+
173
+ </footer>
174
+
175
+ <!-- footer終わり -->
176
+
177
+
178
+
179
+ <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
180
+
181
+ <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
182
+
183
+ <script src="../js/script.js"></script>
184
+
185
+ </body>
186
+
187
+ </html>
188
+
189
+ ```
190
+
191
+
192
+
193
+ ```css
194
+
195
+ @charset "UTF-8";
196
+
197
+
198
+
199
+ body {
200
+
201
+ margin: 0;
202
+
203
+ padding: 0;
204
+
205
+ background-color: #cccccc;
206
+
207
+ color: #333333;
208
+
209
+ font-size: 15px;
210
+
211
+ line-height: 2;
212
+
213
+ }
214
+
215
+
216
+
217
+ p, h1, h2, h3, h4, h5, h6 {
218
+
219
+ margin-top: 0;
220
+
221
+ }
222
+
223
+
224
+
225
+ img {
226
+
227
+ vertical-align: bottom;
228
+
229
+ }
230
+
231
+
232
+
233
+ ul {
234
+
235
+ margin: 0;
236
+
237
+ padding: 0;
238
+
239
+ }
240
+
241
+
242
+
243
+ a {
244
+
245
+ color: #3583aa;
246
+
247
+ text-decoration: none;
248
+
249
+ }
250
+
251
+
252
+
253
+ a:visited {
254
+
255
+ color: #788d98;
256
+
257
+ }
258
+
259
+
260
+
261
+ a:hover {
262
+
263
+ text-decoration: underline;
264
+
265
+ }
266
+
267
+
268
+
269
+ header {
270
+
271
+ width: 960px;
272
+
273
+ height: 100px;
274
+
275
+ margin: 0 auto;
276
+
277
+ }
278
+
279
+
280
+
281
+ .logo {
282
+
283
+ float: left;
284
+
285
+ margin-top: 50px;
286
+
287
+ }
288
+
289
+
290
+
291
+ .global-nav {
292
+
293
+ float: right;
294
+
295
+ margin-top: 60px;
296
+
297
+ }
298
+
299
+
300
+
301
+ .global-nav li {
302
+
303
+ float: left;
304
+
305
+ margin: 0 20px;
306
+
307
+ font-size: 20px;
308
+
309
+ list-style: none;
310
+
311
+ font-family: 'Bitter', serif;
312
+
313
+ }
314
+
315
+
316
+
317
+ .global-nav li a {
318
+
319
+ color: #ffffff;
320
+
321
+ }
322
+
323
+
324
+
325
+ .global-nav li a:hover {
326
+
327
+ border-bottom: 2px solid #ffffff;
328
+
329
+ padding-bottom: 3PX;
330
+
331
+ text-decoration: none;
332
+
333
+ }
334
+
335
+
336
+
337
+ #wrap {
338
+
339
+ clear: both;
340
+
341
+ background-color: #ffffff;
342
+
343
+ margin-top: 220px;
344
+
345
+ padding: 35px 0;
346
+
347
+ }
348
+
349
+
350
+
351
+ .content {
352
+
353
+ width: 960px;
354
+
355
+ margin: 0 auto;
356
+
357
+ }
358
+
359
+
360
+
361
+ footer {
362
+
363
+ text-align: center;
364
+
365
+ color: #ffffff;
366
+
367
+ padding: 20px 0;
368
+
369
+ background-color:#e5b9c5;
370
+
371
+ }
372
+
373
+
374
+
375
+ footer small {
376
+
377
+ font-size: 12px;
378
+
379
+ }
380
+
381
+
382
+
383
+ .insta2 {
384
+
385
+ width: 25px;
386
+
387
+ height: 25px;
388
+
389
+ padding: 0 10px 0 10px;
390
+
391
+ }
392
+
393
+
394
+
395
+
396
+
397
+
398
+
399
+ #page_top{
400
+
401
+ width: 50px;
402
+
403
+ height: 50px;
404
+
405
+ position: fixed;
406
+
407
+ right: 0;
408
+
409
+ bottom: 50px;
410
+
411
+ background: #3f98ef;
412
+
413
+ opacity: 0.6;
414
+
415
+ border-radius: 50%;
416
+
417
+ }
418
+
419
+ #page_top a{
420
+
421
+ position: relative;
422
+
423
+ display: block;
424
+
425
+ width: 50px;
426
+
427
+ height: 50px;
428
+
429
+ text-decoration: none;
430
+
431
+ }
432
+
433
+ #page_top a::before{
434
+
435
+ font-family: 'Font Awesome 5 Free';
436
+
437
+ font-weight: 900;
438
+
439
+ content: '\f102';
440
+
441
+ font-size: 25px;
442
+
443
+ color: #fff;
444
+
445
+ position: absolute;
446
+
447
+ width: 25px;
448
+
449
+ height: 25px;
450
+
451
+ top: -5px;
452
+
453
+ bottom: 0;
454
+
455
+ right: 0;
456
+
457
+ left: 0;
458
+
459
+ margin: auto;
460
+
461
+ text-align: center;
462
+
463
+ }
464
+
465
+
466
+
467
+ #index footer {
468
+
469
+ width: 960px;
470
+
471
+ margin: 150px auto 0 auto;
472
+
473
+ text-align: left;
474
+
475
+ background-color: transparent;
476
+
477
+ }
478
+
479
+
480
+
481
+ #index {
482
+
483
+ background-image: url("../images/bg-index.jpg");
484
+
485
+ background-repeat: no-repeat;
486
+
487
+ background-position: center center;
488
+
489
+ background-attachment: fixed;
490
+
491
+ background-size: cover;
492
+
493
+ }
494
+
495
+
496
+
497
+ #about {
498
+
499
+ background-image: url("../images/header.jpg");
500
+
501
+ background-repeat: no-repeat;
502
+
503
+ background-position: center top;
504
+
505
+ background-attachment: fixed;
506
+
507
+ background-size: 100% auto;
508
+
509
+ }
510
+
511
+
512
+
513
+ #about .insta {
514
+
515
+ padding-left: 450px;
516
+
517
+ }
518
+
519
+
520
+
521
+ #contact .insta {
522
+
523
+ padding-left: 450px;
524
+
525
+ }
526
+
527
+
528
+
529
+ .main-center {
530
+
531
+ width: 940px;
532
+
533
+ margin: 0 auto;
534
+
535
+ }
536
+
537
+
538
+
539
+ h1 {
540
+
541
+ font-family: 'Bitter', serif;
542
+
543
+ font-size: 36px;
544
+
545
+ border-bottom: 1px solid #cccccc;
546
+
547
+ }
548
+
549
+
550
+
551
+ h2 {
552
+
553
+ font-family: 'Bitter', serif;
554
+
555
+ font-size: 24px;
556
+
557
+ }
558
+
559
+
560
+
561
+ .icon:before {
562
+
563
+ content: "";
564
+
565
+ padding-right: 10px;
566
+
567
+ border-left: 7px solid #c57d86;
568
+
569
+ }
570
+
571
+
572
+
573
+ #about .profile-txt {
574
+
575
+ width: 540px;
576
+
577
+ float: left;
578
+
579
+ }
580
+
581
+
582
+
583
+ #about .profile-txt span {
584
+
585
+ font-weight: bold;
586
+
587
+ }
588
+
589
+
590
+
591
+ #about .profile-image {
592
+
593
+ float: right;
594
+
595
+ }
596
+
597
+
598
+
599
+ .clearfix:after {
600
+
601
+ content: "";
602
+
603
+ display: block;
604
+
605
+ clear: both;
606
+
607
+ }
608
+
609
+
610
+
611
+ section {
612
+
613
+ margin-bottom: 35px;
614
+
615
+ }
616
+
617
+
618
+
619
+
620
+
621
+
622
+
623
+ #index #wrap {
624
+
625
+ background-color: transparent;
626
+
627
+ margin-top: 0;
628
+
629
+ padding: 0;
630
+
631
+ }
632
+
633
+
634
+
635
+ #portfolio {
636
+
637
+ background-image: url("../images/header.jpg");
638
+
639
+ background-repeat: no-repeat;
640
+
641
+ background-position: center top;
642
+
643
+ background-attachment: fixed;
644
+
645
+ background-size: 100% auto;
646
+
647
+ }
648
+
649
+
650
+
651
+ .main {
652
+
653
+ width: 700px;
654
+
655
+ margin: 0 10px;
656
+
657
+ float: left;
658
+
659
+ }
660
+
661
+
662
+
663
+ .sidebar {
664
+
665
+ width: 200px;
666
+
667
+ margin: 0 10px 0 30px;
668
+
669
+ float: right;
670
+
671
+ font-family: 'Bitter', serif;
672
+
673
+ }
674
+
675
+
676
+
677
+ a img:hover {
678
+
679
+ opacity: 0.8;
680
+
681
+ }
682
+
683
+
684
+
685
+ .sidebar h2 {
686
+
687
+ margin-bottom: 10px;
688
+
689
+ }
690
+
691
+
692
+
693
+ .sidebar ul {
694
+
695
+ font-size: 16px;
696
+
697
+ margin-left: 20px;
698
+
699
+ }
700
+
701
+
702
+
703
+ .sidebar ul a {
704
+
705
+ color: #333333;
706
+
707
+ }
708
+
709
+
710
+
711
+ #photograph {
712
+
713
+ background-image: url("../images/header.jpg");
714
+
715
+ background-repeat: no-repeat;
716
+
717
+ background-position: center top;
718
+
719
+ background-attachment: fixed;
720
+
721
+ background-size: 100% auto;
722
+
723
+ }
724
+
725
+
726
+
727
+ #video .photograph-list li {
728
+
729
+ float: left;
730
+
731
+ list-style: none;
732
+
733
+ margin: 0 20px 15px 0;
734
+
735
+ }
736
+
737
+
738
+
739
+ #video .photograph-list li:nth-child(3n){
740
+
741
+ margin-right: 0;
742
+
743
+ }
744
+
745
+
746
+
747
+ #video {
748
+
749
+ background-image: url("../images/header.jpg");
750
+
751
+ background-repeat: no-repeat;
752
+
753
+ background-position: center top;
754
+
755
+ background-attachment: fixed;
756
+
757
+ background-size: 100% auto;
758
+
759
+ }
760
+
761
+
762
+
763
+ #photograph .career th {
764
+
765
+ width: 400px;
766
+
767
+ background-color: #f0f0f0;
768
+
769
+ padding: 12px 0;
770
+
771
+ border: 1px solid #cccccc;
772
+
773
+
774
+
775
+ }
776
+
777
+
778
+
779
+ #photograph .career td {
780
+
781
+ width: 400px;
782
+
783
+ padding: 12px 0;
784
+
785
+ border: 1px solid #cccccc;
786
+
787
+ text-align: center;
788
+
789
+ }
790
+
791
+
792
+
793
+ table {
794
+
795
+ border-spacing: 0;
796
+
797
+ border-collapse: collapse;
798
+
799
+ }
800
+
801
+
802
+
803
+ #contact {
804
+
805
+ background-image: url("../images/header.jpg");
806
+
807
+ background-repeat: no-repeat;
808
+
809
+ background-position: center top;
810
+
811
+ background-attachment: fixed;
812
+
813
+ background-size: 100% auto;
814
+
815
+ }
816
+
817
+
818
+
819
+ #contact .access table {
820
+
821
+ float: left;
822
+
823
+ }
824
+
825
+
826
+
827
+ #contact .access th,
828
+
829
+ #contact .access td {
830
+
831
+ text-align: left;
832
+
833
+ vertical-align: top;
834
+
835
+ line-height: 2.5;
836
+
837
+ }
838
+
839
+
840
+
841
+ #contact .access td {
842
+
843
+ padding-left: 30px;
844
+
845
+ }
846
+
847
+
848
+
849
+ #contact .access iframe {
850
+
851
+ width: 460px;
852
+
853
+ float: right;
854
+
855
+ }
856
+
857
+
858
+
859
+ #contact .form {
860
+
861
+ background-color: #eaeaea;
862
+
863
+ padding: 30px 50px;
864
+
865
+ }
866
+
867
+
868
+
869
+ #contact .form dl dt {
870
+
871
+ width:165px;
872
+
873
+ padding: 10px 0;
874
+
875
+ float: left;
876
+
877
+ clear: both;
878
+
879
+ }
880
+
881
+
882
+
883
+ #contact .form dl dd {
884
+
885
+ padding: 10px 0;
886
+
887
+ }
888
+
889
+
890
+
891
+ #contact .form .name {
892
+
893
+ width: 240px;
894
+
895
+ height: 30px;
896
+
897
+ }
898
+
899
+
900
+
901
+ #contact .form .email {
902
+
903
+ width: 300px;
904
+
905
+ height: 30px;
906
+
907
+ }
908
+
909
+
910
+
911
+ #contact .form .tel {
912
+
913
+ width: 240px;
914
+
915
+ height: 30px;
916
+
917
+ }
918
+
919
+
920
+
921
+ #contact .form .type {
922
+
923
+ width: 180px;
924
+
925
+ height: 30px;
926
+
927
+ }
928
+
929
+
930
+
931
+ #contact .form .message {
932
+
933
+ width: 660px;
934
+
935
+ height: 150px;
936
+
937
+ }
938
+
939
+
940
+
941
+ #contact .form button {
942
+
943
+ background-color: #948F8F;
944
+
945
+ color: #ffffff;
946
+
947
+ font-size: 20px;
948
+
949
+ width: 120px;
950
+
951
+ display: block;
952
+
953
+ text-align: center;
954
+
955
+ line-height: 50px;
956
+
957
+ border-radius: 5px;
958
+
959
+ border: 3px solid #948F8F;
960
+
961
+ margin-left: 165px;
962
+
963
+ }
964
+
965
+
966
+
967
+ #contact .form button:hover {
968
+
969
+ background-color: #ffffff;
970
+
971
+ color: #948F8F;
972
+
973
+ cursor: pointer;
974
+
975
+ }
976
+
977
+
978
+
979
+ #contact .form .required:after {
980
+
981
+ content: " * ";
982
+
983
+ color: #ff0000;
984
+
985
+ }
986
+
987
+
988
+
989
+ #contact .form .attention {
990
+
991
+ margin: 20px 0 0 165px;
992
+
993
+ }
994
+
995
+ ```
996
+
997
+
998
+
999
+ ```JavaScript
1000
+
1001
+ /*-------------------------
1002
+
1003
+ ページトップボタン
1004
+
1005
+ --------------------------*/
1006
+
1007
+ $(".btn-pageTop").on("touchstart",function(){
1008
+
1009
+ $(this).toggleClass("active");
1010
+
1011
+ $(".header-nav").fadeToggle(500);
1012
+
1013
+ });
1014
+
1015
+
1016
+
1017
+ ```
1018
+
1019
+
1020
+
1021
+ ### 試したこと
1022
+
1023
+
1024
+
1025
+ スクールで習った公式は下記です。
1026
+
1027
+ これを自分で作ったhtmlに当てはめてコードをかきましたができませんでした。
1028
+
1029
+ この公式を必ず使いたいのですが可能でしょうか。
1030
+
7
1031
  ご教授宜しくお願い致します。
8
1032
 
9
-
10
-
11
-
12
-
13
- ### 発生している問題・エラーメッセージ
14
-
15
- トップページボタンはすでにできていますが、JavaScriptの機能が反映されません。
16
-
17
-
18
-
19
- ### 該当のソースコード
20
-
21
-
22
-
23
- ```html
24
-
25
- <!doctype html>
26
-
27
- <html>
28
-
29
- <head>
30
-
31
- <meta charset="UTF-8">
32
-
33
- <meta name="viewport" content="width=device-width,initial-scale=1">
34
-
35
- <title>Home|Risa_designer</title>
36
-
37
- <link href="https://fonts.googleapis.com/css?family=Bitter:400,700&display=swap" rel="stylesheet">
38
-
39
- <link rel="stylesheet" href="css/style.css">
40
-
41
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
42
-
43
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
44
-
45
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
46
-
47
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
48
-
49
- <div id="page_top"><a href="#"></a></div>
50
-
51
- </head>
52
-
53
- <body id="portfolio">
54
-
55
-
56
-
57
- <!-- header始まり -->
58
-
59
- <header>
60
-
61
- <div class="logo">
62
-
63
- <a href="index.html"><img src="images/logo.png" alt="RisaDesign"></a>
64
-
65
- </div>
66
-
67
- <nav>
68
-
69
- <ul class="global-nav">
70
-
71
- <li><a href="index.html">Home</a></li>
72
-
73
- <li><a href="about.html">About</a></li>
74
-
75
- <li><a href="contact.html">Contact</a></li>
76
-
77
- </ul>
78
-
79
- </nav>
80
-
81
- </header>
82
-
83
- <!-- header終わり -->
84
-
85
-
86
-
87
- <!-- wrap始まり -->
88
-
89
- <div id="wrap" class="clearfix">
90
-
91
- <div class="content">
92
-
93
- <div class="main">
94
-
95
- <h1>Home</h1>
96
-
97
- <p>ご依頼についてと実績を掲載しています。</p>
98
-
99
- <section>
100
-
101
- <h2><a href="photograph.html"><img src="images/flower.jpg" alt="flower"></a></h2>
102
-
103
- <p>Webデザインに関する説明となっており、ご依頼する際にご確認して頂きたい内容となっております。<br>「サービス内容」「制作料金」「ご契約の流れ」<a href="photograph.html">詳しくみる≫</a></p>
104
-
105
- </section>
106
-
107
- <section>
108
-
109
- <h2><a href="video.html"><img src="images/pc.jpg" alt="pc"></a></h2>
110
-
111
- <p>制作実績の紹介となっております。Webデザイン関連と紙デザインに分けて掲載しております。「Webデザイン関連」「名刺デザイン」<a href="video.html">詳しくみる≫</a></p>
112
-
113
- </section>
114
-
115
- </div>
116
-
117
- <aside class="sidebar">
118
-
119
- <section>
120
-
121
- <h2>ご依頼について</h2>
122
-
123
- <ul>
124
-
125
- <li><a href="photograph.html#サービス内容">サービス内容</a></li>
126
-
127
- <li><a href="photograph.html#制作料金">制作料金</a></li>
128
-
129
- <li><a href="photograph.html#ご契約の流れ">ご契約の流れ</a></li>
130
-
131
- </ul>
132
-
133
- </section>
134
-
135
- <section>
136
-
137
- <h2>制作実績</h2>
138
-
139
- <ul>
140
-
141
- <li><a href="video.html#Webデザイン関連">Webデザイン関連</a></li>
142
-
143
- <li><a href="video.html#名刺デザイン">名刺デザイン</a></li>
144
-
145
- </ul>
146
-
147
- </section>
148
-
149
- </aside>
150
-
151
- </div>
152
-
153
- </div>
154
-
155
- <!-- wrap終わり -->
156
-
157
-
158
-
159
- <!-- footer始まり -->
160
-
161
- <!--pagetop-btn-->
162
-
163
- <a href="#" class="btn-pageTop"><span class="fa fa-chevron-up"></span></a>
164
-
165
- <!--/pagetop-btn-->
166
-
167
-
168
-
169
- <footer>
170
-
171
- <small>&copy;2019 Risa_Design All rights reserved.</small>
172
-
173
- <a href="https://www.instagram.com/rsymuc/" target="_blank" ><img src="images/insta2.png" class="insta2" alt="insta2"></a>
174
-
175
- </footer>
176
-
177
- <!-- footer終わり -->
178
-
179
-
180
-
181
- <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
182
-
183
- <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
184
-
185
- <script src="../js/script.js"></script>
186
-
187
- </body>
188
-
189
- </html>
190
-
191
- ```
192
-
193
-
194
-
195
- ```css
196
-
197
- @charset "UTF-8";
198
-
199
-
200
-
201
- body {
202
-
203
- margin: 0;
204
-
205
- padding: 0;
206
-
207
- background-color: #cccccc;
208
-
209
- color: #333333;
210
-
211
- font-size: 15px;
212
-
213
- line-height: 2;
214
-
215
- }
216
-
217
-
218
-
219
- p, h1, h2, h3, h4, h5, h6 {
220
-
221
- margin-top: 0;
222
-
223
- }
224
-
225
-
226
-
227
- img {
228
-
229
- vertical-align: bottom;
230
-
231
- }
232
-
233
-
234
-
235
- ul {
236
-
237
- margin: 0;
238
-
239
- padding: 0;
240
-
241
- }
242
-
243
-
244
-
245
- a {
246
-
247
- color: #3583aa;
248
-
249
- text-decoration: none;
250
-
251
- }
252
-
253
-
254
-
255
- a:visited {
256
-
257
- color: #788d98;
258
-
259
- }
260
-
261
-
262
-
263
- a:hover {
264
-
265
- text-decoration: underline;
266
-
267
- }
268
-
269
-
270
-
271
- header {
272
-
273
- width: 960px;
274
-
275
- height: 100px;
276
-
277
- margin: 0 auto;
278
-
279
- }
280
-
281
-
282
-
283
- .logo {
284
-
285
- float: left;
286
-
287
- margin-top: 50px;
288
-
289
- }
290
-
291
-
292
-
293
- .global-nav {
294
-
295
- float: right;
296
-
297
- margin-top: 60px;
298
-
299
- }
300
-
301
-
302
-
303
- .global-nav li {
304
-
305
- float: left;
306
-
307
- margin: 0 20px;
308
-
309
- font-size: 20px;
310
-
311
- list-style: none;
312
-
313
- font-family: 'Bitter', serif;
314
-
315
- }
316
-
317
-
318
-
319
- .global-nav li a {
320
-
321
- color: #ffffff;
322
-
323
- }
324
-
325
-
326
-
327
- .global-nav li a:hover {
328
-
329
- border-bottom: 2px solid #ffffff;
330
-
331
- padding-bottom: 3PX;
332
-
333
- text-decoration: none;
334
-
335
- }
336
-
337
-
338
-
339
- #wrap {
340
-
341
- clear: both;
342
-
343
- background-color: #ffffff;
344
-
345
- margin-top: 220px;
346
-
347
- padding: 35px 0;
348
-
349
- }
350
-
351
-
352
-
353
- .content {
354
-
355
- width: 960px;
356
-
357
- margin: 0 auto;
358
-
359
- }
360
-
361
-
362
-
363
- footer {
364
-
365
- text-align: center;
366
-
367
- color: #ffffff;
368
-
369
- padding: 20px 0;
370
-
371
- background-color:#e5b9c5;
372
-
373
- }
374
-
375
-
376
-
377
- footer small {
378
-
379
- font-size: 12px;
380
-
381
- }
382
-
383
-
384
-
385
- .insta2 {
386
-
387
- width: 25px;
388
-
389
- height: 25px;
390
-
391
- padding: 0 10px 0 10px;
392
-
393
- }
394
-
395
-
396
-
397
-
398
-
399
-
400
-
401
- #page_top{
402
-
403
- width: 50px;
404
-
405
- height: 50px;
406
-
407
- position: fixed;
408
-
409
- right: 0;
410
-
411
- bottom: 50px;
412
-
413
- background: #3f98ef;
414
-
415
- opacity: 0.6;
416
-
417
- border-radius: 50%;
418
-
419
- }
420
-
421
- #page_top a{
422
-
423
- position: relative;
424
-
425
- display: block;
426
-
427
- width: 50px;
428
-
429
- height: 50px;
430
-
431
- text-decoration: none;
432
-
433
- }
434
-
435
- #page_top a::before{
436
-
437
- font-family: 'Font Awesome 5 Free';
438
-
439
- font-weight: 900;
440
-
441
- content: '\f102';
442
-
443
- font-size: 25px;
444
-
445
- color: #fff;
446
-
447
- position: absolute;
448
-
449
- width: 25px;
450
-
451
- height: 25px;
452
-
453
- top: -5px;
454
-
455
- bottom: 0;
456
-
457
- right: 0;
458
-
459
- left: 0;
460
-
461
- margin: auto;
462
-
463
- text-align: center;
464
-
465
- }
466
-
467
-
468
-
469
- #index footer {
470
-
471
- width: 960px;
472
-
473
- margin: 150px auto 0 auto;
474
-
475
- text-align: left;
476
-
477
- background-color: transparent;
478
-
479
- }
480
-
481
-
482
-
483
- #index {
484
-
485
- background-image: url("../images/bg-index.jpg");
486
-
487
- background-repeat: no-repeat;
488
-
489
- background-position: center center;
490
-
491
- background-attachment: fixed;
492
-
493
- background-size: cover;
494
-
495
- }
496
-
497
-
498
-
499
- #about {
500
-
501
- background-image: url("../images/header.jpg");
502
-
503
- background-repeat: no-repeat;
504
-
505
- background-position: center top;
506
-
507
- background-attachment: fixed;
508
-
509
- background-size: 100% auto;
510
-
511
- }
512
-
513
-
514
-
515
- #about .insta {
516
-
517
- padding-left: 450px;
518
-
519
- }
520
-
521
-
522
-
523
- #contact .insta {
524
-
525
- padding-left: 450px;
526
-
527
- }
528
-
529
-
530
-
531
- .main-center {
532
-
533
- width: 940px;
534
-
535
- margin: 0 auto;
536
-
537
- }
538
-
539
-
540
-
541
- h1 {
542
-
543
- font-family: 'Bitter', serif;
544
-
545
- font-size: 36px;
546
-
547
- border-bottom: 1px solid #cccccc;
548
-
549
- }
550
-
551
-
552
-
553
- h2 {
554
-
555
- font-family: 'Bitter', serif;
556
-
557
- font-size: 24px;
558
-
559
- }
560
-
561
-
562
-
563
- .icon:before {
564
-
565
- content: "";
566
-
567
- padding-right: 10px;
568
-
569
- border-left: 7px solid #c57d86;
570
-
571
- }
572
-
573
-
574
-
575
- #about .profile-txt {
576
-
577
- width: 540px;
578
-
579
- float: left;
580
-
581
- }
582
-
583
-
584
-
585
- #about .profile-txt span {
586
-
587
- font-weight: bold;
588
-
589
- }
590
-
591
-
592
-
593
- #about .profile-image {
594
-
595
- float: right;
596
-
597
- }
598
-
599
-
600
-
601
- .clearfix:after {
602
-
603
- content: "";
604
-
605
- display: block;
606
-
607
- clear: both;
608
-
609
- }
610
-
611
-
612
-
613
- section {
614
-
615
- margin-bottom: 35px;
616
-
617
- }
618
-
619
-
620
-
621
-
622
-
623
-
624
-
625
- #index #wrap {
626
-
627
- background-color: transparent;
628
-
629
- margin-top: 0;
630
-
631
- padding: 0;
632
-
633
- }
634
-
635
-
636
-
637
- #portfolio {
638
-
639
- background-image: url("../images/header.jpg");
640
-
641
- background-repeat: no-repeat;
642
-
643
- background-position: center top;
644
-
645
- background-attachment: fixed;
646
-
647
- background-size: 100% auto;
648
-
649
- }
650
-
651
-
652
-
653
- .main {
654
-
655
- width: 700px;
656
-
657
- margin: 0 10px;
658
-
659
- float: left;
660
-
661
- }
662
-
663
-
664
-
665
- .sidebar {
666
-
667
- width: 200px;
668
-
669
- margin: 0 10px 0 30px;
670
-
671
- float: right;
672
-
673
- font-family: 'Bitter', serif;
674
-
675
- }
676
-
677
-
678
-
679
- a img:hover {
680
-
681
- opacity: 0.8;
682
-
683
- }
684
-
685
-
686
-
687
- .sidebar h2 {
688
-
689
- margin-bottom: 10px;
690
-
691
- }
692
-
693
-
694
-
695
- .sidebar ul {
696
-
697
- font-size: 16px;
698
-
699
- margin-left: 20px;
700
-
701
- }
702
-
703
-
704
-
705
- .sidebar ul a {
706
-
707
- color: #333333;
708
-
709
- }
710
-
711
-
712
-
713
- #photograph {
714
-
715
- background-image: url("../images/header.jpg");
716
-
717
- background-repeat: no-repeat;
718
-
719
- background-position: center top;
720
-
721
- background-attachment: fixed;
722
-
723
- background-size: 100% auto;
724
-
725
- }
726
-
727
-
728
-
729
- #video .photograph-list li {
730
-
731
- float: left;
732
-
733
- list-style: none;
734
-
735
- margin: 0 20px 15px 0;
736
-
737
- }
738
-
739
-
740
-
741
- #video .photograph-list li:nth-child(3n){
742
-
743
- margin-right: 0;
744
-
745
- }
746
-
747
-
748
-
749
- #video {
750
-
751
- background-image: url("../images/header.jpg");
752
-
753
- background-repeat: no-repeat;
754
-
755
- background-position: center top;
756
-
757
- background-attachment: fixed;
758
-
759
- background-size: 100% auto;
760
-
761
- }
762
-
763
-
764
-
765
- #photograph .career th {
766
-
767
- width: 400px;
768
-
769
- background-color: #f0f0f0;
770
-
771
- padding: 12px 0;
772
-
773
- border: 1px solid #cccccc;
774
-
775
-
776
-
777
- }
778
-
779
-
780
-
781
- #photograph .career td {
782
-
783
- width: 400px;
784
-
785
- padding: 12px 0;
786
-
787
- border: 1px solid #cccccc;
788
-
789
- text-align: center;
790
-
791
- }
792
-
793
-
794
-
795
- table {
796
-
797
- border-spacing: 0;
798
-
799
- border-collapse: collapse;
800
-
801
- }
802
-
803
-
804
-
805
- #contact {
806
-
807
- background-image: url("../images/header.jpg");
808
-
809
- background-repeat: no-repeat;
810
-
811
- background-position: center top;
812
-
813
- background-attachment: fixed;
814
-
815
- background-size: 100% auto;
816
-
817
- }
818
-
819
-
820
-
821
- #contact .access table {
822
-
823
- float: left;
824
-
825
- }
826
-
827
-
828
-
829
- #contact .access th,
830
-
831
- #contact .access td {
832
-
833
- text-align: left;
834
-
835
- vertical-align: top;
836
-
837
- line-height: 2.5;
838
-
839
- }
840
-
841
-
842
-
843
- #contact .access td {
844
-
845
- padding-left: 30px;
846
-
847
- }
848
-
849
-
850
-
851
- #contact .access iframe {
852
-
853
- width: 460px;
854
-
855
- float: right;
856
-
857
- }
858
-
859
-
860
-
861
- #contact .form {
862
-
863
- background-color: #eaeaea;
864
-
865
- padding: 30px 50px;
866
-
867
- }
868
-
869
-
870
-
871
- #contact .form dl dt {
872
-
873
- width:165px;
874
-
875
- padding: 10px 0;
876
-
877
- float: left;
878
-
879
- clear: both;
880
-
881
- }
882
-
883
-
884
-
885
- #contact .form dl dd {
886
-
887
- padding: 10px 0;
888
-
889
- }
890
-
891
-
892
-
893
- #contact .form .name {
894
-
895
- width: 240px;
896
-
897
- height: 30px;
898
-
899
- }
900
-
901
-
902
-
903
- #contact .form .email {
904
-
905
- width: 300px;
906
-
907
- height: 30px;
908
-
909
- }
910
-
911
-
912
-
913
- #contact .form .tel {
914
-
915
- width: 240px;
916
-
917
- height: 30px;
918
-
919
- }
920
-
921
-
922
-
923
- #contact .form .type {
924
-
925
- width: 180px;
926
-
927
- height: 30px;
928
-
929
- }
930
-
931
-
932
-
933
- #contact .form .message {
934
-
935
- width: 660px;
936
-
937
- height: 150px;
938
-
939
- }
940
-
941
-
942
-
943
- #contact .form button {
944
-
945
- background-color: #948F8F;
946
-
947
- color: #ffffff;
948
-
949
- font-size: 20px;
950
-
951
- width: 120px;
952
-
953
- display: block;
954
-
955
- text-align: center;
956
-
957
- line-height: 50px;
958
-
959
- border-radius: 5px;
960
-
961
- border: 3px solid #948F8F;
962
-
963
- margin-left: 165px;
964
-
965
- }
966
-
967
-
968
-
969
- #contact .form button:hover {
970
-
971
- background-color: #ffffff;
972
-
973
- color: #948F8F;
974
-
975
- cursor: pointer;
976
-
977
- }
978
-
979
-
980
-
981
- #contact .form .required:after {
982
-
983
- content: " * ";
984
-
985
- color: #ff0000;
986
-
987
- }
988
-
989
-
990
-
991
- #contact .form .attention {
992
-
993
- margin: 20px 0 0 165px;
994
-
995
- }
996
-
997
- ```
998
-
999
-
1000
-
1001
- ```JavaScript
1002
-
1003
- /*-------------------------
1004
-
1005
- ページトップボタン
1006
-
1007
- --------------------------*/
1008
-
1009
- $(".btn-pageTop").on("touchstart",function(){
1033
+ > $(".btn-trigger").on("touchstart",function(){
1010
1034
 
1011
1035
  $(this).toggleClass("active");
1012
1036
 
1013
1037
  $(".header-nav").fadeToggle(500);
1014
1038
 
1015
1039
  });
1016
-
1017
-
1018
-
1019
- ```
1020
-
1021
-
1022
-
1023
- ### 試したこと
1024
-
1025
-
1026
-
1027
- スクールで習った公式は下記です。
1028
-
1029
- これを自分で作ったhtmlに当てはめてコードをかきましたができませんでした。
1030
-
1031
- この公式を必ず使いたいのですが可能でしょうか。
1032
-
1033
- ご教授宜しくお願い致します。
1034
-
1035
- > $(".btn-trigger").on("touchstart",function(){
1036
-
1037
- $(this).toggleClass("active");
1038
-
1039
- $(".header-nav").fadeToggle(500);
1040
-
1041
- });

1

文章の修正

2019/08/05 06:40

投稿

risacuspin
risacuspin

スコア18

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,1026 @@
1
- JavaScriptを使用してトップページボタンを作りたいです。
2
-
3
- html,cssはできましたが、JavaScriptが分かりません。
1
+ ### JavaScriptトップページボタンにワンタップでスルスル〜とトップへ戻る機能つけたい
2
+
3
+
4
+
5
+ webサイトにトップページボタンを作り、JavaScriptの機能をつけたいです。
6
+
7
+ ご教授宜しくお願い致します。
8
+
9
+
10
+
11
+
12
+
13
+ ### 発生している問題・エラーメッセージ
14
+
15
+ トップページボタンはすでにできていますが、JavaScriptの機能が反映されません。
16
+
17
+
18
+
19
+ ### 該当のソースコード
20
+
21
+
22
+
23
+ ```html
24
+
25
+ <!doctype html>
26
+
27
+ <html>
28
+
29
+ <head>
30
+
31
+ <meta charset="UTF-8">
32
+
33
+ <meta name="viewport" content="width=device-width,initial-scale=1">
34
+
35
+ <title>Home|Risa_designer</title>
36
+
37
+ <link href="https://fonts.googleapis.com/css?family=Bitter:400,700&display=swap" rel="stylesheet">
38
+
39
+ <link rel="stylesheet" href="css/style.css">
40
+
41
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
42
+
43
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
44
+
45
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
46
+
47
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
48
+
49
+ <div id="page_top"><a href="#"></a></div>
50
+
51
+ </head>
52
+
53
+ <body id="portfolio">
54
+
55
+
56
+
57
+ <!-- header始まり -->
58
+
59
+ <header>
60
+
61
+ <div class="logo">
62
+
63
+ <a href="index.html"><img src="images/logo.png" alt="RisaDesign"></a>
64
+
65
+ </div>
66
+
67
+ <nav>
68
+
69
+ <ul class="global-nav">
70
+
71
+ <li><a href="index.html">Home</a></li>
72
+
73
+ <li><a href="about.html">About</a></li>
74
+
75
+ <li><a href="contact.html">Contact</a></li>
76
+
77
+ </ul>
78
+
79
+ </nav>
80
+
81
+ </header>
82
+
83
+ <!-- header終わり -->
84
+
85
+
86
+
87
+ <!-- wrap始まり -->
88
+
89
+ <div id="wrap" class="clearfix">
90
+
91
+ <div class="content">
92
+
93
+ <div class="main">
94
+
95
+ <h1>Home</h1>
96
+
97
+ <p>ご依頼についてと実績を掲載しています。</p>
98
+
99
+ <section>
100
+
101
+ <h2><a href="photograph.html"><img src="images/flower.jpg" alt="flower"></a></h2>
102
+
103
+ <p>Webデザインに関する説明となっており、ご依頼する際にご確認して頂きたい内容となっております。<br>「サービス内容」「制作料金」「ご契約の流れ」<a href="photograph.html">詳しくみる≫</a></p>
104
+
105
+ </section>
106
+
107
+ <section>
108
+
109
+ <h2><a href="video.html"><img src="images/pc.jpg" alt="pc"></a></h2>
110
+
111
+ <p>制作実績の紹介となっております。Webデザイン関連と紙デザインに分けて掲載しております。「Webデザイン関連」「名刺デザイン」<a href="video.html">詳しくみる≫</a></p>
112
+
113
+ </section>
114
+
115
+ </div>
116
+
117
+ <aside class="sidebar">
118
+
119
+ <section>
120
+
121
+ <h2>ご依頼について</h2>
122
+
123
+ <ul>
124
+
125
+ <li><a href="photograph.html#サービス内容">サービス内容</a></li>
126
+
127
+ <li><a href="photograph.html#制作料金">制作料金</a></li>
128
+
129
+ <li><a href="photograph.html#ご契約の流れ">ご契約の流れ</a></li>
130
+
131
+ </ul>
132
+
133
+ </section>
134
+
135
+ <section>
136
+
137
+ <h2>制作実績</h2>
138
+
139
+ <ul>
140
+
141
+ <li><a href="video.html#Webデザイン関連">Webデザイン関連</a></li>
142
+
143
+ <li><a href="video.html#名刺デザイン">名刺デザイン</a></li>
144
+
145
+ </ul>
146
+
147
+ </section>
148
+
149
+ </aside>
150
+
151
+ </div>
152
+
153
+ </div>
154
+
155
+ <!-- wrap終わり -->
156
+
157
+
158
+
159
+ <!-- footer始まり -->
160
+
161
+ <!--pagetop-btn-->
162
+
163
+ <a href="#" class="btn-pageTop"><span class="fa fa-chevron-up"></span></a>
164
+
165
+ <!--/pagetop-btn-->
166
+
167
+
168
+
169
+ <footer>
170
+
171
+ <small>&copy;2019 Risa_Design All rights reserved.</small>
172
+
173
+ <a href="https://www.instagram.com/rsymuc/" target="_blank" ><img src="images/insta2.png" class="insta2" alt="insta2"></a>
174
+
175
+ </footer>
176
+
177
+ <!-- footer終わり -->
178
+
179
+
180
+
181
+ <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
182
+
183
+ <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
184
+
185
+ <script src="../js/script.js"></script>
186
+
187
+ </body>
188
+
189
+ </html>
190
+
191
+ ```
192
+
193
+
194
+
195
+ ```css
196
+
197
+ @charset "UTF-8";
198
+
199
+
200
+
201
+ body {
202
+
203
+ margin: 0;
204
+
205
+ padding: 0;
206
+
207
+ background-color: #cccccc;
208
+
209
+ color: #333333;
210
+
211
+ font-size: 15px;
212
+
213
+ line-height: 2;
214
+
215
+ }
216
+
217
+
218
+
219
+ p, h1, h2, h3, h4, h5, h6 {
220
+
221
+ margin-top: 0;
222
+
223
+ }
224
+
225
+
226
+
227
+ img {
228
+
229
+ vertical-align: bottom;
230
+
231
+ }
232
+
233
+
234
+
235
+ ul {
236
+
237
+ margin: 0;
238
+
239
+ padding: 0;
240
+
241
+ }
242
+
243
+
244
+
245
+ a {
246
+
247
+ color: #3583aa;
248
+
249
+ text-decoration: none;
250
+
251
+ }
252
+
253
+
254
+
255
+ a:visited {
256
+
257
+ color: #788d98;
258
+
259
+ }
260
+
261
+
262
+
263
+ a:hover {
264
+
265
+ text-decoration: underline;
266
+
267
+ }
268
+
269
+
270
+
271
+ header {
272
+
273
+ width: 960px;
274
+
275
+ height: 100px;
276
+
277
+ margin: 0 auto;
278
+
279
+ }
280
+
281
+
282
+
283
+ .logo {
284
+
285
+ float: left;
286
+
287
+ margin-top: 50px;
288
+
289
+ }
290
+
291
+
292
+
293
+ .global-nav {
294
+
295
+ float: right;
296
+
297
+ margin-top: 60px;
298
+
299
+ }
300
+
301
+
302
+
303
+ .global-nav li {
304
+
305
+ float: left;
306
+
307
+ margin: 0 20px;
308
+
309
+ font-size: 20px;
310
+
311
+ list-style: none;
312
+
313
+ font-family: 'Bitter', serif;
314
+
315
+ }
316
+
317
+
318
+
319
+ .global-nav li a {
320
+
321
+ color: #ffffff;
322
+
323
+ }
324
+
325
+
326
+
327
+ .global-nav li a:hover {
328
+
329
+ border-bottom: 2px solid #ffffff;
330
+
331
+ padding-bottom: 3PX;
332
+
333
+ text-decoration: none;
334
+
335
+ }
336
+
337
+
338
+
339
+ #wrap {
340
+
341
+ clear: both;
342
+
343
+ background-color: #ffffff;
344
+
345
+ margin-top: 220px;
346
+
347
+ padding: 35px 0;
348
+
349
+ }
350
+
351
+
352
+
353
+ .content {
354
+
355
+ width: 960px;
356
+
357
+ margin: 0 auto;
358
+
359
+ }
360
+
361
+
362
+
363
+ footer {
364
+
365
+ text-align: center;
366
+
367
+ color: #ffffff;
368
+
369
+ padding: 20px 0;
370
+
371
+ background-color:#e5b9c5;
372
+
373
+ }
374
+
375
+
376
+
377
+ footer small {
378
+
379
+ font-size: 12px;
380
+
381
+ }
382
+
383
+
384
+
385
+ .insta2 {
386
+
387
+ width: 25px;
388
+
389
+ height: 25px;
390
+
391
+ padding: 0 10px 0 10px;
392
+
393
+ }
394
+
395
+
396
+
397
+
398
+
399
+
400
+
401
+ #page_top{
402
+
403
+ width: 50px;
404
+
405
+ height: 50px;
406
+
407
+ position: fixed;
408
+
409
+ right: 0;
410
+
411
+ bottom: 50px;
412
+
413
+ background: #3f98ef;
414
+
415
+ opacity: 0.6;
416
+
417
+ border-radius: 50%;
418
+
419
+ }
420
+
421
+ #page_top a{
422
+
423
+ position: relative;
424
+
425
+ display: block;
426
+
427
+ width: 50px;
428
+
429
+ height: 50px;
430
+
431
+ text-decoration: none;
432
+
433
+ }
434
+
435
+ #page_top a::before{
436
+
437
+ font-family: 'Font Awesome 5 Free';
438
+
439
+ font-weight: 900;
440
+
441
+ content: '\f102';
442
+
443
+ font-size: 25px;
444
+
445
+ color: #fff;
446
+
447
+ position: absolute;
448
+
449
+ width: 25px;
450
+
451
+ height: 25px;
452
+
453
+ top: -5px;
454
+
455
+ bottom: 0;
456
+
457
+ right: 0;
458
+
459
+ left: 0;
460
+
461
+ margin: auto;
462
+
463
+ text-align: center;
464
+
465
+ }
466
+
467
+
468
+
469
+ #index footer {
470
+
471
+ width: 960px;
472
+
473
+ margin: 150px auto 0 auto;
474
+
475
+ text-align: left;
476
+
477
+ background-color: transparent;
478
+
479
+ }
480
+
481
+
482
+
483
+ #index {
484
+
485
+ background-image: url("../images/bg-index.jpg");
486
+
487
+ background-repeat: no-repeat;
488
+
489
+ background-position: center center;
490
+
491
+ background-attachment: fixed;
492
+
493
+ background-size: cover;
494
+
495
+ }
496
+
497
+
498
+
499
+ #about {
500
+
501
+ background-image: url("../images/header.jpg");
502
+
503
+ background-repeat: no-repeat;
504
+
505
+ background-position: center top;
506
+
507
+ background-attachment: fixed;
508
+
509
+ background-size: 100% auto;
510
+
511
+ }
512
+
513
+
514
+
515
+ #about .insta {
516
+
517
+ padding-left: 450px;
518
+
519
+ }
520
+
521
+
522
+
523
+ #contact .insta {
524
+
525
+ padding-left: 450px;
526
+
527
+ }
528
+
529
+
530
+
531
+ .main-center {
532
+
533
+ width: 940px;
534
+
535
+ margin: 0 auto;
536
+
537
+ }
538
+
539
+
540
+
541
+ h1 {
542
+
543
+ font-family: 'Bitter', serif;
544
+
545
+ font-size: 36px;
546
+
547
+ border-bottom: 1px solid #cccccc;
548
+
549
+ }
550
+
551
+
552
+
553
+ h2 {
554
+
555
+ font-family: 'Bitter', serif;
556
+
557
+ font-size: 24px;
558
+
559
+ }
560
+
561
+
562
+
563
+ .icon:before {
564
+
565
+ content: "";
566
+
567
+ padding-right: 10px;
568
+
569
+ border-left: 7px solid #c57d86;
570
+
571
+ }
572
+
573
+
574
+
575
+ #about .profile-txt {
576
+
577
+ width: 540px;
578
+
579
+ float: left;
580
+
581
+ }
582
+
583
+
584
+
585
+ #about .profile-txt span {
586
+
587
+ font-weight: bold;
588
+
589
+ }
590
+
591
+
592
+
593
+ #about .profile-image {
594
+
595
+ float: right;
596
+
597
+ }
598
+
599
+
600
+
601
+ .clearfix:after {
602
+
603
+ content: "";
604
+
605
+ display: block;
606
+
607
+ clear: both;
608
+
609
+ }
610
+
611
+
612
+
613
+ section {
614
+
615
+ margin-bottom: 35px;
616
+
617
+ }
618
+
619
+
620
+
621
+
622
+
623
+
624
+
625
+ #index #wrap {
626
+
627
+ background-color: transparent;
628
+
629
+ margin-top: 0;
630
+
631
+ padding: 0;
632
+
633
+ }
634
+
635
+
636
+
637
+ #portfolio {
638
+
639
+ background-image: url("../images/header.jpg");
640
+
641
+ background-repeat: no-repeat;
642
+
643
+ background-position: center top;
644
+
645
+ background-attachment: fixed;
646
+
647
+ background-size: 100% auto;
648
+
649
+ }
650
+
651
+
652
+
653
+ .main {
654
+
655
+ width: 700px;
656
+
657
+ margin: 0 10px;
658
+
659
+ float: left;
660
+
661
+ }
662
+
663
+
664
+
665
+ .sidebar {
666
+
667
+ width: 200px;
668
+
669
+ margin: 0 10px 0 30px;
670
+
671
+ float: right;
672
+
673
+ font-family: 'Bitter', serif;
674
+
675
+ }
676
+
677
+
678
+
679
+ a img:hover {
680
+
681
+ opacity: 0.8;
682
+
683
+ }
684
+
685
+
686
+
687
+ .sidebar h2 {
688
+
689
+ margin-bottom: 10px;
690
+
691
+ }
692
+
693
+
694
+
695
+ .sidebar ul {
696
+
697
+ font-size: 16px;
698
+
699
+ margin-left: 20px;
700
+
701
+ }
702
+
703
+
704
+
705
+ .sidebar ul a {
706
+
707
+ color: #333333;
708
+
709
+ }
710
+
711
+
712
+
713
+ #photograph {
714
+
715
+ background-image: url("../images/header.jpg");
716
+
717
+ background-repeat: no-repeat;
718
+
719
+ background-position: center top;
720
+
721
+ background-attachment: fixed;
722
+
723
+ background-size: 100% auto;
724
+
725
+ }
726
+
727
+
728
+
729
+ #video .photograph-list li {
730
+
731
+ float: left;
732
+
733
+ list-style: none;
734
+
735
+ margin: 0 20px 15px 0;
736
+
737
+ }
738
+
739
+
740
+
741
+ #video .photograph-list li:nth-child(3n){
742
+
743
+ margin-right: 0;
744
+
745
+ }
746
+
747
+
748
+
749
+ #video {
750
+
751
+ background-image: url("../images/header.jpg");
752
+
753
+ background-repeat: no-repeat;
754
+
755
+ background-position: center top;
756
+
757
+ background-attachment: fixed;
758
+
759
+ background-size: 100% auto;
760
+
761
+ }
762
+
763
+
764
+
765
+ #photograph .career th {
766
+
767
+ width: 400px;
768
+
769
+ background-color: #f0f0f0;
770
+
771
+ padding: 12px 0;
772
+
773
+ border: 1px solid #cccccc;
774
+
775
+
776
+
777
+ }
778
+
779
+
780
+
781
+ #photograph .career td {
782
+
783
+ width: 400px;
784
+
785
+ padding: 12px 0;
786
+
787
+ border: 1px solid #cccccc;
788
+
789
+ text-align: center;
790
+
791
+ }
792
+
793
+
794
+
795
+ table {
796
+
797
+ border-spacing: 0;
798
+
799
+ border-collapse: collapse;
800
+
801
+ }
802
+
803
+
804
+
805
+ #contact {
806
+
807
+ background-image: url("../images/header.jpg");
808
+
809
+ background-repeat: no-repeat;
810
+
811
+ background-position: center top;
812
+
813
+ background-attachment: fixed;
814
+
815
+ background-size: 100% auto;
816
+
817
+ }
818
+
819
+
820
+
821
+ #contact .access table {
822
+
823
+ float: left;
824
+
825
+ }
826
+
827
+
828
+
829
+ #contact .access th,
830
+
831
+ #contact .access td {
832
+
833
+ text-align: left;
834
+
835
+ vertical-align: top;
836
+
837
+ line-height: 2.5;
838
+
839
+ }
840
+
841
+
842
+
843
+ #contact .access td {
844
+
845
+ padding-left: 30px;
846
+
847
+ }
848
+
849
+
850
+
851
+ #contact .access iframe {
852
+
853
+ width: 460px;
854
+
855
+ float: right;
856
+
857
+ }
858
+
859
+
860
+
861
+ #contact .form {
862
+
863
+ background-color: #eaeaea;
864
+
865
+ padding: 30px 50px;
866
+
867
+ }
868
+
869
+
870
+
871
+ #contact .form dl dt {
872
+
873
+ width:165px;
874
+
875
+ padding: 10px 0;
876
+
877
+ float: left;
878
+
879
+ clear: both;
880
+
881
+ }
882
+
883
+
884
+
885
+ #contact .form dl dd {
886
+
887
+ padding: 10px 0;
888
+
889
+ }
890
+
891
+
892
+
893
+ #contact .form .name {
894
+
895
+ width: 240px;
896
+
897
+ height: 30px;
898
+
899
+ }
900
+
901
+
902
+
903
+ #contact .form .email {
904
+
905
+ width: 300px;
906
+
907
+ height: 30px;
908
+
909
+ }
910
+
911
+
912
+
913
+ #contact .form .tel {
914
+
915
+ width: 240px;
916
+
917
+ height: 30px;
918
+
919
+ }
920
+
921
+
922
+
923
+ #contact .form .type {
924
+
925
+ width: 180px;
926
+
927
+ height: 30px;
928
+
929
+ }
930
+
931
+
932
+
933
+ #contact .form .message {
934
+
935
+ width: 660px;
936
+
937
+ height: 150px;
938
+
939
+ }
940
+
941
+
942
+
943
+ #contact .form button {
944
+
945
+ background-color: #948F8F;
946
+
947
+ color: #ffffff;
948
+
949
+ font-size: 20px;
950
+
951
+ width: 120px;
952
+
953
+ display: block;
954
+
955
+ text-align: center;
956
+
957
+ line-height: 50px;
958
+
959
+ border-radius: 5px;
960
+
961
+ border: 3px solid #948F8F;
962
+
963
+ margin-left: 165px;
964
+
965
+ }
966
+
967
+
968
+
969
+ #contact .form button:hover {
970
+
971
+ background-color: #ffffff;
972
+
973
+ color: #948F8F;
974
+
975
+ cursor: pointer;
976
+
977
+ }
978
+
979
+
980
+
981
+ #contact .form .required:after {
982
+
983
+ content: " * ";
984
+
985
+ color: #ff0000;
986
+
987
+ }
988
+
989
+
990
+
991
+ #contact .form .attention {
992
+
993
+ margin: 20px 0 0 165px;
994
+
995
+ }
996
+
997
+ ```
998
+
999
+
1000
+
1001
+ ```JavaScript
1002
+
1003
+ /*-------------------------
1004
+
1005
+ ページトップボタン
1006
+
1007
+ --------------------------*/
1008
+
1009
+ $(".btn-pageTop").on("touchstart",function(){
1010
+
1011
+ $(this).toggleClass("active");
1012
+
1013
+ $(".header-nav").fadeToggle(500);
1014
+
1015
+ });
1016
+
1017
+
1018
+
1019
+ ```
1020
+
1021
+
1022
+
1023
+ ### 試したこと
4
1024
 
5
1025
 
6
1026
 
@@ -8,7 +1028,9 @@
8
1028
 
9
1029
  これを自分で作ったhtmlに当てはめてコードをかきましたができませんでした。
10
1030
 
11
-
1031
+ この公式を必ず使いたいのですが可能でしょうか。
1032
+
1033
+ ご教授宜しくお願い致します。
12
1034
 
13
1035
  > $(".btn-trigger").on("touchstart",function(){
14
1036
 
@@ -17,1007 +1039,3 @@
17
1039
  $(".header-nav").fadeToggle(500);
18
1040
 
19
1041
  });
20
-
21
-
22
-
23
- どこを変更したらJavaScriptをつけることができますでしょうか。
24
-
25
- ご教授よろしくお願いいたします。
26
-
27
-
28
-
29
- ```JavaScript
30
-
31
- /*-------------------------
32
-
33
- ページトップボタン
34
-
35
- --------------------------*/
36
-
37
- $(".btn-pageTop").on("touchstart",function(){
38
-
39
- $(this).toggleClass("active");
40
-
41
- $(".header-nav").fadeToggle(500);
42
-
43
- });
44
-
45
- ```
46
-
47
-
48
-
49
- ```html
50
-
51
- <!doctype html>
52
-
53
- <html>
54
-
55
- <head>
56
-
57
- <meta charset="UTF-8">
58
-
59
- <meta name="viewport" content="width=device-width,initial-scale=1">
60
-
61
- <title>Home|Risa_designer</title>
62
-
63
- <link href="https://fonts.googleapis.com/css?family=Bitter:400,700&display=swap" rel="stylesheet">
64
-
65
- <link rel="stylesheet" href="css/style.css">
66
-
67
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
68
-
69
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
70
-
71
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
72
-
73
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
74
-
75
- <div id="page_top"><a href="#"></a></div>
76
-
77
- </head>
78
-
79
- <body id="portfolio">
80
-
81
-
82
-
83
- <!-- header始まり -->
84
-
85
- <header>
86
-
87
- <div class="logo">
88
-
89
- <a href="index.html"><img src="images/logo.png" alt="RisaDesign"></a>
90
-
91
- </div>
92
-
93
- <nav>
94
-
95
- <ul class="global-nav">
96
-
97
- <li><a href="index.html">Home</a></li>
98
-
99
- <li><a href="about.html">About</a></li>
100
-
101
- <li><a href="contact.html">Contact</a></li>
102
-
103
- </ul>
104
-
105
- </nav>
106
-
107
- </header>
108
-
109
- <!-- header終わり -->
110
-
111
-
112
-
113
- <!-- wrap始まり -->
114
-
115
- <div id="wrap" class="clearfix">
116
-
117
- <div class="content">
118
-
119
- <div class="main">
120
-
121
- <h1>Home</h1>
122
-
123
- <p>ご依頼についてと実績を掲載しています。</p>
124
-
125
- <section>
126
-
127
- <h2><a href="photograph.html"><img src="images/flower.jpg" alt="flower"></a></h2>
128
-
129
- <p>Webデザインに関する説明となっており、ご依頼する際にご確認して頂きたい内容となっております。<br>「サービス内容」「制作料金」「ご契約の流れ」<a href="photograph.html">詳しくみる≫</a></p>
130
-
131
- </section>
132
-
133
- <section>
134
-
135
- <h2><a href="video.html"><img src="images/pc.jpg" alt="pc"></a></h2>
136
-
137
- <p>制作実績の紹介となっております。Webデザイン関連と紙デザインに分けて掲載しております。「Webデザイン関連」「名刺デザイン」<a href="video.html">詳しくみる≫</a></p>
138
-
139
- </section>
140
-
141
- </div>
142
-
143
- <aside class="sidebar">
144
-
145
- <section>
146
-
147
- <h2>ご依頼について</h2>
148
-
149
- <ul>
150
-
151
- <li><a href="photograph.html#サービス内容">サービス内容</a></li>
152
-
153
- <li><a href="photograph.html#制作料金">制作料金</a></li>
154
-
155
- <li><a href="photograph.html#ご契約の流れ">ご契約の流れ</a></li>
156
-
157
- </ul>
158
-
159
- </section>
160
-
161
- <section>
162
-
163
- <h2>制作実績</h2>
164
-
165
- <ul>
166
-
167
- <li><a href="video.html#Webデザイン関連">Webデザイン関連</a></li>
168
-
169
- <li><a href="video.html#名刺デザイン">名刺デザイン</a></li>
170
-
171
- </ul>
172
-
173
- </section>
174
-
175
- </aside>
176
-
177
- </div>
178
-
179
- </div>
180
-
181
- <!-- wrap終わり -->
182
-
183
-
184
-
185
- <!-- footer始まり -->
186
-
187
- <!--pagetop-btn-->
188
-
189
- <a href="#" class="btn-pageTop"><span class="fa fa-chevron-up"></span></a>
190
-
191
- <!--/pagetop-btn-->
192
-
193
-
194
-
195
- <footer>
196
-
197
- <small>&copy;2019 Risa_Design All rights reserved.</small>
198
-
199
- <a href="https://www.instagram.com/rsymuc/" target="_blank" ><img src="images/insta2.png" class="insta2" alt="insta2"></a>
200
-
201
- </footer>
202
-
203
- <!-- footer終わり -->
204
-
205
-
206
-
207
- <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
208
-
209
- <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
210
-
211
- <script src="../js/script.js"></script>
212
-
213
- </body>
214
-
215
- </html>
216
-
217
- ```
218
-
219
-
220
-
221
- ```css
222
-
223
- @charset "UTF-8";
224
-
225
-
226
-
227
- body {
228
-
229
- margin: 0;
230
-
231
- padding: 0;
232
-
233
- background-color: #cccccc;
234
-
235
- color: #333333;
236
-
237
- font-size: 15px;
238
-
239
- line-height: 2;
240
-
241
- }
242
-
243
-
244
-
245
- p, h1, h2, h3, h4, h5, h6 {
246
-
247
- margin-top: 0;
248
-
249
- }
250
-
251
-
252
-
253
- img {
254
-
255
- vertical-align: bottom;
256
-
257
- }
258
-
259
-
260
-
261
- ul {
262
-
263
- margin: 0;
264
-
265
- padding: 0;
266
-
267
- }
268
-
269
-
270
-
271
- a {
272
-
273
- color: #3583aa;
274
-
275
- text-decoration: none;
276
-
277
- }
278
-
279
-
280
-
281
- a:visited {
282
-
283
- color: #788d98;
284
-
285
- }
286
-
287
-
288
-
289
- a:hover {
290
-
291
- text-decoration: underline;
292
-
293
- }
294
-
295
-
296
-
297
- header {
298
-
299
- width: 960px;
300
-
301
- height: 100px;
302
-
303
- margin: 0 auto;
304
-
305
- }
306
-
307
-
308
-
309
- .logo {
310
-
311
- float: left;
312
-
313
- margin-top: 50px;
314
-
315
- }
316
-
317
-
318
-
319
- .global-nav {
320
-
321
- float: right;
322
-
323
- margin-top: 60px;
324
-
325
- }
326
-
327
-
328
-
329
- .global-nav li {
330
-
331
- float: left;
332
-
333
- margin: 0 20px;
334
-
335
- font-size: 20px;
336
-
337
- list-style: none;
338
-
339
- font-family: 'Bitter', serif;
340
-
341
- }
342
-
343
-
344
-
345
- .global-nav li a {
346
-
347
- color: #ffffff;
348
-
349
- }
350
-
351
-
352
-
353
- .global-nav li a:hover {
354
-
355
- border-bottom: 2px solid #ffffff;
356
-
357
- padding-bottom: 3PX;
358
-
359
- text-decoration: none;
360
-
361
- }
362
-
363
-
364
-
365
- #wrap {
366
-
367
- clear: both;
368
-
369
- background-color: #ffffff;
370
-
371
- margin-top: 220px;
372
-
373
- padding: 35px 0;
374
-
375
- }
376
-
377
-
378
-
379
- .content {
380
-
381
- width: 960px;
382
-
383
- margin: 0 auto;
384
-
385
- }
386
-
387
-
388
-
389
- footer {
390
-
391
- text-align: center;
392
-
393
- color: #ffffff;
394
-
395
- padding: 20px 0;
396
-
397
- background-color:#e5b9c5;
398
-
399
- }
400
-
401
-
402
-
403
- footer small {
404
-
405
- font-size: 12px;
406
-
407
- }
408
-
409
-
410
-
411
- .insta2 {
412
-
413
- width: 25px;
414
-
415
- height: 25px;
416
-
417
- padding: 0 10px 0 10px;
418
-
419
- }
420
-
421
-
422
-
423
-
424
-
425
-
426
-
427
- #page_top{
428
-
429
- width: 50px;
430
-
431
- height: 50px;
432
-
433
- position: fixed;
434
-
435
- right: 0;
436
-
437
- bottom: 50px;
438
-
439
- background: #3f98ef;
440
-
441
- opacity: 0.6;
442
-
443
- border-radius: 50%;
444
-
445
- }
446
-
447
- #page_top a{
448
-
449
- position: relative;
450
-
451
- display: block;
452
-
453
- width: 50px;
454
-
455
- height: 50px;
456
-
457
- text-decoration: none;
458
-
459
- }
460
-
461
- #page_top a::before{
462
-
463
- font-family: 'Font Awesome 5 Free';
464
-
465
- font-weight: 900;
466
-
467
- content: '\f102';
468
-
469
- font-size: 25px;
470
-
471
- color: #fff;
472
-
473
- position: absolute;
474
-
475
- width: 25px;
476
-
477
- height: 25px;
478
-
479
- top: -5px;
480
-
481
- bottom: 0;
482
-
483
- right: 0;
484
-
485
- left: 0;
486
-
487
- margin: auto;
488
-
489
- text-align: center;
490
-
491
- }
492
-
493
-
494
-
495
- #index footer {
496
-
497
- width: 960px;
498
-
499
- margin: 150px auto 0 auto;
500
-
501
- text-align: left;
502
-
503
- background-color: transparent;
504
-
505
- }
506
-
507
-
508
-
509
- #index {
510
-
511
- background-image: url("../images/bg-index.jpg");
512
-
513
- background-repeat: no-repeat;
514
-
515
- background-position: center center;
516
-
517
- background-attachment: fixed;
518
-
519
- background-size: cover;
520
-
521
- }
522
-
523
-
524
-
525
- #about {
526
-
527
- background-image: url("../images/header.jpg");
528
-
529
- background-repeat: no-repeat;
530
-
531
- background-position: center top;
532
-
533
- background-attachment: fixed;
534
-
535
- background-size: 100% auto;
536
-
537
- }
538
-
539
-
540
-
541
- #about .insta {
542
-
543
- padding-left: 450px;
544
-
545
- }
546
-
547
-
548
-
549
- #contact .insta {
550
-
551
- padding-left: 450px;
552
-
553
- }
554
-
555
-
556
-
557
- .main-center {
558
-
559
- width: 940px;
560
-
561
- margin: 0 auto;
562
-
563
- }
564
-
565
-
566
-
567
- h1 {
568
-
569
- font-family: 'Bitter', serif;
570
-
571
- font-size: 36px;
572
-
573
- border-bottom: 1px solid #cccccc;
574
-
575
- }
576
-
577
-
578
-
579
- h2 {
580
-
581
- font-family: 'Bitter', serif;
582
-
583
- font-size: 24px;
584
-
585
- }
586
-
587
-
588
-
589
- .icon:before {
590
-
591
- content: "";
592
-
593
- padding-right: 10px;
594
-
595
- border-left: 7px solid #c57d86;
596
-
597
- }
598
-
599
-
600
-
601
- #about .profile-txt {
602
-
603
- width: 540px;
604
-
605
- float: left;
606
-
607
- }
608
-
609
-
610
-
611
- #about .profile-txt span {
612
-
613
- font-weight: bold;
614
-
615
- }
616
-
617
-
618
-
619
- #about .profile-image {
620
-
621
- float: right;
622
-
623
- }
624
-
625
-
626
-
627
- .clearfix:after {
628
-
629
- content: "";
630
-
631
- display: block;
632
-
633
- clear: both;
634
-
635
- }
636
-
637
-
638
-
639
- section {
640
-
641
- margin-bottom: 35px;
642
-
643
- }
644
-
645
-
646
-
647
-
648
-
649
-
650
-
651
- #index #wrap {
652
-
653
- background-color: transparent;
654
-
655
- margin-top: 0;
656
-
657
- padding: 0;
658
-
659
- }
660
-
661
-
662
-
663
- #portfolio {
664
-
665
- background-image: url("../images/header.jpg");
666
-
667
- background-repeat: no-repeat;
668
-
669
- background-position: center top;
670
-
671
- background-attachment: fixed;
672
-
673
- background-size: 100% auto;
674
-
675
- }
676
-
677
-
678
-
679
- .main {
680
-
681
- width: 700px;
682
-
683
- margin: 0 10px;
684
-
685
- float: left;
686
-
687
- }
688
-
689
-
690
-
691
- .sidebar {
692
-
693
- width: 200px;
694
-
695
- margin: 0 10px 0 30px;
696
-
697
- float: right;
698
-
699
- font-family: 'Bitter', serif;
700
-
701
- }
702
-
703
-
704
-
705
- a img:hover {
706
-
707
- opacity: 0.8;
708
-
709
- }
710
-
711
-
712
-
713
- .sidebar h2 {
714
-
715
- margin-bottom: 10px;
716
-
717
- }
718
-
719
-
720
-
721
- .sidebar ul {
722
-
723
- font-size: 16px;
724
-
725
- margin-left: 20px;
726
-
727
- }
728
-
729
-
730
-
731
- .sidebar ul a {
732
-
733
- color: #333333;
734
-
735
- }
736
-
737
-
738
-
739
- #photograph {
740
-
741
- background-image: url("../images/header.jpg");
742
-
743
- background-repeat: no-repeat;
744
-
745
- background-position: center top;
746
-
747
- background-attachment: fixed;
748
-
749
- background-size: 100% auto;
750
-
751
- }
752
-
753
-
754
-
755
- #video .photograph-list li {
756
-
757
- float: left;
758
-
759
- list-style: none;
760
-
761
- margin: 0 20px 15px 0;
762
-
763
- }
764
-
765
-
766
-
767
- #video .photograph-list li:nth-child(3n){
768
-
769
- margin-right: 0;
770
-
771
- }
772
-
773
-
774
-
775
- #video {
776
-
777
- background-image: url("../images/header.jpg");
778
-
779
- background-repeat: no-repeat;
780
-
781
- background-position: center top;
782
-
783
- background-attachment: fixed;
784
-
785
- background-size: 100% auto;
786
-
787
- }
788
-
789
-
790
-
791
- #photograph .career th {
792
-
793
- width: 400px;
794
-
795
- background-color: #f0f0f0;
796
-
797
- padding: 12px 0;
798
-
799
- border: 1px solid #cccccc;
800
-
801
-
802
-
803
- }
804
-
805
-
806
-
807
- #photograph .career td {
808
-
809
- width: 400px;
810
-
811
- padding: 12px 0;
812
-
813
- border: 1px solid #cccccc;
814
-
815
- text-align: center;
816
-
817
- }
818
-
819
-
820
-
821
- table {
822
-
823
- border-spacing: 0;
824
-
825
- border-collapse: collapse;
826
-
827
- }
828
-
829
-
830
-
831
- #contact {
832
-
833
- background-image: url("../images/header.jpg");
834
-
835
- background-repeat: no-repeat;
836
-
837
- background-position: center top;
838
-
839
- background-attachment: fixed;
840
-
841
- background-size: 100% auto;
842
-
843
- }
844
-
845
-
846
-
847
- #contact .access table {
848
-
849
- float: left;
850
-
851
- }
852
-
853
-
854
-
855
- #contact .access th,
856
-
857
- #contact .access td {
858
-
859
- text-align: left;
860
-
861
- vertical-align: top;
862
-
863
- line-height: 2.5;
864
-
865
- }
866
-
867
-
868
-
869
- #contact .access td {
870
-
871
- padding-left: 30px;
872
-
873
- }
874
-
875
-
876
-
877
- #contact .access iframe {
878
-
879
- width: 460px;
880
-
881
- float: right;
882
-
883
- }
884
-
885
-
886
-
887
- #contact .form {
888
-
889
- background-color: #eaeaea;
890
-
891
- padding: 30px 50px;
892
-
893
- }
894
-
895
-
896
-
897
- #contact .form dl dt {
898
-
899
- width:165px;
900
-
901
- padding: 10px 0;
902
-
903
- float: left;
904
-
905
- clear: both;
906
-
907
- }
908
-
909
-
910
-
911
- #contact .form dl dd {
912
-
913
- padding: 10px 0;
914
-
915
- }
916
-
917
-
918
-
919
- #contact .form .name {
920
-
921
- width: 240px;
922
-
923
- height: 30px;
924
-
925
- }
926
-
927
-
928
-
929
- #contact .form .email {
930
-
931
- width: 300px;
932
-
933
- height: 30px;
934
-
935
- }
936
-
937
-
938
-
939
- #contact .form .tel {
940
-
941
- width: 240px;
942
-
943
- height: 30px;
944
-
945
- }
946
-
947
-
948
-
949
- #contact .form .type {
950
-
951
- width: 180px;
952
-
953
- height: 30px;
954
-
955
- }
956
-
957
-
958
-
959
- #contact .form .message {
960
-
961
- width: 660px;
962
-
963
- height: 150px;
964
-
965
- }
966
-
967
-
968
-
969
- #contact .form button {
970
-
971
- background-color: #948F8F;
972
-
973
- color: #ffffff;
974
-
975
- font-size: 20px;
976
-
977
- width: 120px;
978
-
979
- display: block;
980
-
981
- text-align: center;
982
-
983
- line-height: 50px;
984
-
985
- border-radius: 5px;
986
-
987
- border: 3px solid #948F8F;
988
-
989
- margin-left: 165px;
990
-
991
- }
992
-
993
-
994
-
995
- #contact .form button:hover {
996
-
997
- background-color: #ffffff;
998
-
999
- color: #948F8F;
1000
-
1001
- cursor: pointer;
1002
-
1003
- }
1004
-
1005
-
1006
-
1007
- #contact .form .required:after {
1008
-
1009
- content: " * ";
1010
-
1011
- color: #ff0000;
1012
-
1013
- }
1014
-
1015
-
1016
-
1017
- #contact .form .attention {
1018
-
1019
- margin: 20px 0 0 165px;
1020
-
1021
- }
1022
-
1023
- ```