質問編集履歴

3

修正しました。

2020/06/17 17:58

投稿

mimuratakasi
mimuratakasi

スコア16

test CHANGED
File without changes
test CHANGED
@@ -234,7 +234,7 @@
234
234
 
235
235
  });
236
236
 
237
-
237
+ ```
238
238
 
239
239
  ```css
240
240
 
@@ -738,7 +738,7 @@
738
738
 
739
739
 
740
740
 
741
- ``commoncss
741
+ ```commoncss
742
742
 
743
743
 
744
744
 

2

css修正しました。

2020/06/17 17:58

投稿

mimuratakasi
mimuratakasi

スコア16

test CHANGED
File without changes
test CHANGED
@@ -236,7 +236,7 @@
236
236
 
237
237
 
238
238
 
239
- ``````css
239
+ ```css
240
240
 
241
241
  @charset "utf-8";
242
242
 

1

css記述しました

2020/06/17 17:56

投稿

mimuratakasi
mimuratakasi

スコア16

test CHANGED
File without changes
test CHANGED
@@ -6,6 +6,54 @@
6
6
 
7
7
 
8
8
 
9
+ jQuery(function ($) {
10
+
11
+ function changeImage() { 画像変えていく
12
+
13
+ var $graphic = $('#graphic ul'); ulを代入
14
+
15
+ var $frontmost = $graphic.children('.now'); nowを代入
16
+
17
+ var $next;
18
+
19
+ if($frontmost.next()[0] != undefined){ nowの次の要素がある?       これは次の要素もnowがあるか確認?それともただ次の要素にいく?
20
+
21
+ $next = $frontmost.next(); あったらnowの次の要素を取得を$nextに代入?
22
+
23
+
24
+
25
+ } else {
26
+
27
+ $next = $graphic.children().first(); なかったら現在マッチしている要素のなかで最初の要素取り出す 
28
+
29
+ }
30
+
31
+
32
+
33
+ $frontmost.removeClass('now');       nowのクラスを消す
34
+
35
+ $next.addClass('now');         $nextに代入されている要素にnowクラスをたす
36
+
37
+
38
+
39
+ }
40
+
41
+ setInterval(changeImage, 4000);
42
+
43
+ });
44
+
45
+ 自分なりにですが解釈してみました。
46
+
47
+
48
+
49
+ とりあえずif文にて次の要素を探してあったら表示させてるとは思いますが
50
+
51
+ さいごのremoveClassとaddClassはなんのためにあるのかが分かりません。
52
+
53
+ 良ければご教授頂けると幸いです。
54
+
55
+
56
+
9
57
  ```html
10
58
 
11
59
  <!DOCTYPE html>
@@ -134,6 +182,8 @@
134
182
 
135
183
  </footer>
136
184
 
185
+ <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
186
+
137
187
  <script src="js/slideshow.js"></script>
138
188
 
139
189
  </body>
@@ -186,8 +236,738 @@
186
236
 
187
237
 
188
238
 
239
+ ``````css
240
+
241
+ @charset "utf-8";
242
+
243
+
244
+
245
+ /* 基本レイアウト ここから↓ */
246
+
247
+
248
+
249
+ @import url(common.css);
250
+
251
+
252
+
253
+ body{
254
+
255
+ background-color: #f3f2e9;
256
+
257
+ color: #5f5039;
258
+
259
+ font-size: 87.5%;
260
+
261
+ line-height: 1.5;
262
+
263
+
264
+
265
+
266
+
267
+ }
268
+
269
+ header,nav,#breadcrumb,#contents,footer{
270
+
271
+ margin: 0 auto;
272
+
273
+ width: 840px;
274
+
275
+
276
+
277
+
278
+
279
+ }
280
+
281
+ header h1 {
282
+
283
+ text-align: center;
284
+
285
+ padding-top: 28px;
286
+
287
+ margin: 0 0 26px 0;
288
+
289
+
290
+
291
+ }
292
+
293
+
294
+
295
+ nav ul {
296
+
297
+ list-style-type: none;
298
+
299
+ padding-left: 0;
300
+
301
+ margin: 0 0 20px 0;
302
+
303
+ list-style-position: inside;
304
+
305
+ overflow: hidden;
306
+
307
+ }
308
+
309
+ nav ul li {
310
+
311
+ float: left;
312
+
313
+ width: 210px;
314
+
315
+ }
316
+
317
+
318
+
319
+ nav ul li a{
320
+
321
+ overflow: hidden;
322
+
323
+ display: block;
324
+
325
+ padding-top: 44px;
326
+
327
+ height: 0;
328
+
329
+ }
330
+
331
+
332
+
333
+ nav ul li#nav_concept a {
334
+
335
+ background-image: url(../images/nav1.png)
336
+
337
+ }
338
+
339
+ nav ul li#nav_plan a {
340
+
341
+ background-image: url(../images/nav2.png)
342
+
343
+ }
344
+
345
+ nav ul li#nav_fair a {
346
+
347
+ background-image: url(../images/nav3.png)
348
+
349
+ }
350
+
351
+
352
+
353
+ nav ul li#nav_contact a {
354
+
355
+ background-image: url(../images/nav4.png)
356
+
357
+ }
358
+
359
+
360
+
361
+ #contents {
362
+
363
+ overflow: hidden;
364
+
365
+ }
366
+
367
+
368
+
369
+ #main {
370
+
371
+ float: left;
372
+
373
+ width: 570px;
374
+
375
+ }
376
+
377
+
378
+
379
+ #sub {
380
+
381
+ float: right;
382
+
383
+ }
384
+
385
+
386
+
387
+ footer{
388
+
389
+ padding-top: 70px;
390
+
391
+ }
392
+
393
+
394
+
395
+
396
+
397
+ #main h1{
398
+
399
+
400
+
401
+ margin: 0 0 30px 0;
402
+
403
+ padding: 35px 0 35px 65px;
404
+
405
+ font-size: 156.25%;
406
+
407
+ background-image: url(../images/bg_h1_head.png), url(../images/bg_h1_bottom.png);
408
+
409
+ background-repeat: no-repeat, no-repeat;
410
+
411
+ background-position: left top, left bottom;
412
+
413
+
414
+
415
+ }
416
+
417
+
418
+
419
+
420
+
421
+ #concept #nav_concept a,
422
+
423
+ #plan #nav_plan a,
424
+
425
+ #fair #nav_fair a,
426
+
427
+ #contact #nav_contact a,
428
+
429
+ nav ul li a:hover{
430
+
431
+
432
+
433
+ background-position: 0 -45px;
434
+
435
+
436
+
437
+ }
438
+
439
+
440
+
441
+
442
+
443
+
444
+
445
+ .bnr_inner a p img:hover {
446
+
447
+
448
+
449
+ opacity: 0.8;
450
+
451
+ }
452
+
453
+
454
+
455
+ .clearfix::after {
456
+
457
+ content: " ";
458
+
459
+ display: block;
460
+
461
+ clear: both;
462
+
463
+ font-size: 0;
464
+
465
+ }
466
+
467
+
468
+
469
+
470
+
471
+ /* 基本レイアウト ここまで↑ */
472
+
473
+
474
+
475
+ /* トップページ ここから↓ */
476
+
477
+
478
+
479
+ #news ul {
480
+
481
+ list-style-type: none;
482
+
483
+ padding-left: 0;
484
+
485
+ }
486
+
487
+ #news ul li {
488
+
489
+ padding: 20px 0 20px 175px;
490
+
491
+ border-bottom: 1px dotted #6c5f45;
492
+
493
+ color: #342300;
494
+
495
+ text-indent: -175px;
496
+
497
+ }
498
+
499
+ #news ul li time {
500
+
501
+ display: inline-block;
502
+
503
+ width: 175px;
504
+
505
+ font-weight: bold;
506
+
507
+ color: #6c5f45;
508
+
509
+ text-indent: 0;
510
+
511
+ }
512
+
513
+
514
+
515
+ /* トップページ ここまで↑ */
516
+
517
+
518
+
519
+
520
+
521
+
522
+
523
+ /* 「結婚式場のコンセプト」ページ ここから↓ */
524
+
525
+ .concept_box {
526
+
527
+ margin-bottom: 30px;
528
+
529
+
530
+
531
+ }
532
+
533
+ .image_right {
534
+
535
+ float: right;
536
+
537
+ margin-left: 25px;
538
+
539
+ }
540
+
541
+ .image_left {
542
+
543
+ float: left;
544
+
545
+ margin-right: 25px;
546
+
547
+ }
548
+
549
+
550
+
551
+ .concept_box:last-child,
552
+
553
+ .concept_box p:last-child{
554
+
555
+ margin-bottom: 0;
556
+
557
+ }
558
+
559
+
560
+
561
+ /* 「結婚式場のコンセプト」ページ ここまで↑ */
562
+
563
+
564
+
565
+
566
+
567
+ /* 「プランのご案内」ページ ここから↓ */
568
+
569
+ table {
570
+
571
+ border-collapse:collapse;
572
+
573
+ }
574
+
575
+
576
+
577
+
578
+
579
+ caption {
580
+
581
+ text-align: left;
582
+
583
+ margin-bottom: 30px;
584
+
585
+ }
586
+
587
+ caption p {
588
+
589
+ margin-top: 0;
590
+
591
+ margin-bottom: 0;
592
+
593
+ }
594
+
595
+
596
+
597
+
598
+
599
+
600
+
601
+ table th,table td {
602
+
603
+ padding: 15px;
604
+
605
+ border: 1px solid #6c5f45;
606
+
607
+ }
608
+
609
+
610
+
611
+ table tr th:first-child {
612
+
613
+ width: 70px;
614
+
615
+ }
616
+
617
+
618
+
619
+ table tbody th,
620
+
621
+ table tbody td{
622
+
623
+ vertical-align: top;
624
+
625
+ }
626
+
627
+ table thead tr th {
628
+
629
+ background-color: #eee8cc;
630
+
631
+ }
632
+
633
+ table tbody tr:nth-child(odd) {
634
+
635
+ background-color:#ffffff;
636
+
637
+ }
638
+
639
+ table tbody tr:nth-child(even) {
640
+
641
+ background-color: #f4f2f0;
642
+
643
+ }
644
+
645
+ /* 「プランのご案内」ページ ここまで↑ */
646
+
647
+
648
+
649
+ /* 「ブライダルフェア」ページ ここから↓ */
650
+
651
+
652
+
653
+ .gallery_box figure {
654
+
655
+ margin: 0 0 15px 15px;
656
+
657
+ width: 180px;
658
+
659
+ float: left;
660
+
661
+ }
662
+
663
+ .gallery_box figure:first-child {
664
+
665
+ margin-left: 0;
666
+
667
+ }
668
+
669
+ .gallery_box:first-of-type {
670
+
671
+ margin-top: 30px;
672
+
673
+
674
+
675
+ }
676
+
677
+ /* 「ブライダルフェア」ページ ここまで↑ */
678
+
679
+
680
+
681
+ /* 「お問い合わせ」ページ ここから↓ */
682
+
683
+ form p{
684
+
685
+
686
+
687
+ margin-top: 0;
688
+
689
+ margin-bottom: 30px;
690
+
691
+ }
692
+
693
+ form p:nth-last-child(2){
694
+
695
+ margin-bottom: 7px;
696
+
697
+ }
698
+
699
+ form o:last-child {
700
+
701
+ margin-bottom: 0;
702
+
703
+ }
704
+
705
+
706
+
707
+ input[type="text"]{
708
+
709
+ width: 200px;
710
+
711
+ }
712
+
713
+ input[type="email"]{
714
+
715
+ width: 300px;
716
+
717
+ }
718
+
719
+
720
+
721
+
722
+
723
+ textarea {
724
+
725
+ width: 420px;
726
+
727
+ height: 115px;
728
+
729
+ overflow-y: scroll;
730
+
731
+ }
732
+
733
+ /* 「お問い合わせ」ページ ここまで↑ */
734
+
735
+
736
+
189
737
  ```
190
738
 
191
739
 
192
740
 
741
+ ``commoncss
742
+
743
+
744
+
745
+ @charset "utf-8";
746
+
747
+
748
+
749
+ body {
750
+
751
+ margin: 0;
752
+
753
+ padding: 0;
754
+
755
+ font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", sans-serif;
756
+
757
+ font-size: 100%;
758
+
759
+ }
760
+
761
+ img {
762
+
763
+ border: 0;
764
+
765
+ }
766
+
767
+ a {
768
+
769
+ color: #342300;
770
+
771
+ }
772
+
773
+ a:hover {
774
+
775
+ color: #a24100;
776
+
777
+ }
778
+
779
+ header h1 a {
780
+
781
+ display: inline-block;
782
+
783
+ }
784
+
785
+ header h1 a img {
786
+
787
+ vertical-align: bottom;
788
+
789
+ }
790
+
791
+ #breadcrumb ul {
792
+
793
+ list-style-type: none;
794
+
795
+ padding: 0;
796
+
797
+ }
798
+
799
+ #breadcrumb ul li {
800
+
801
+ display: inline;
802
+
803
+ margin-right: 5px;
804
+
805
+ }
806
+
807
+ #breadcrumb ul li a {
808
+
809
+ padding-right: 15px;
810
+
811
+ background-image: url(../images/breadcrumb_arrow.png);
812
+
813
+ background-repeat: no-repeat;
814
+
815
+ background-position: right center;
816
+
817
+ }
818
+
193
- よろしくお願い致します。
819
+ .bnr_inner {
820
+
821
+ margin-bottom: 30px;
822
+
823
+ }
824
+
825
+ .bnr_inner dt img{
826
+
827
+ margin-bottom: 6px;
828
+
829
+ vertical-align: bottom;
830
+
831
+ }
832
+
833
+ .bnr_inner a {
834
+
835
+ text-decoration: none;
836
+
837
+ }
838
+
839
+ .bnr_inner dl, .bnr_inner dt, .bnr_inner dd, .bnr_inner p{
840
+
841
+ margin: 0;
842
+
843
+ }
844
+
845
+ #pagetop {
846
+
847
+ margin-top: 0;
848
+
849
+ margin-bottom: 0;
850
+
851
+ float: right;
852
+
853
+ }
854
+
855
+ #pagetop a {
856
+
857
+ display: block;
858
+
859
+ min-height: 16px;
860
+
861
+ padding: 6px 0 6px 28px;
862
+
863
+ background-image: url(../images/bg_arrow.png);
864
+
865
+ background-repeat: no-repeat;
866
+
867
+ background-position: left bottom;
868
+
869
+ }
870
+
871
+ address {
872
+
873
+ padding-top: 15px;
874
+
875
+ clear: both;
876
+
877
+ background-image: url(../images/bg_footer.png);
878
+
879
+ background-repeat: no-repeat;
880
+
881
+ font-style: normal;
882
+
883
+ text-align: center;
884
+
885
+ }
886
+
887
+ #copyright {
888
+
889
+ margin-top: 0;
890
+
891
+ margin-bottom: 15px;
892
+
893
+ text-align: center;
894
+
895
+ }
896
+
897
+ #copyright small {
898
+
899
+ font-size: 100%;
900
+
901
+ }
902
+
903
+ #main h2 {
904
+
905
+ margin-top: 0;
906
+
907
+ padding: 13px 0 13px 24px;
908
+
909
+ background-image: url(../images/bg_h2_head.png), url(../images/bg_h2_bottom.png);
910
+
911
+ background-repeat: no-repeat, no-repeat;
912
+
913
+ background-position: left top, left bottom;
914
+
915
+ font-size: 112.5%;
916
+
917
+ }
918
+
919
+ #graphic {
920
+
921
+ width: 840px;
922
+
923
+ height: 400px;
924
+
925
+ margin: 0 auto 30px auto;
926
+
927
+ }
928
+
929
+ #graphic ul {
930
+
931
+ position: relative;
932
+
933
+ list-style: none;
934
+
935
+ padding-left: 0;
936
+
937
+ }
938
+
939
+ #graphic ul li {
940
+
941
+ display: block;
942
+
943
+ position: absolute;
944
+
945
+ top: 0;
946
+
947
+ left: 0;
948
+
949
+ z-index: 0;
950
+
951
+ opacity: 0;
952
+
953
+ transition: opacity 1s ease-in-out;
954
+
955
+ }
956
+
957
+ #graphic ul li.now {
958
+
959
+ display: block;
960
+
961
+ position: relative;
962
+
963
+ top: 0;
964
+
965
+ left: 0;
966
+
967
+ z-index: 1;
968
+
969
+ opacity: 1;
970
+
971
+ }
972
+
973
+ ```