質問編集履歴

7

一部追記しました。

2017/07/10 02:03

投稿

yuika39
yuika39

スコア18

test CHANGED
File without changes
test CHANGED
@@ -34,6 +34,8 @@
34
34
 
35
35
  教えていただきありがとうございました。
36
36
 
37
+ 下記に記載されている内容でおおよそすべてかと思います。
38
+
37
39
 
38
40
 
39
41
  一部記載内容に問題がある為削除しています。

6

削除箇所追記しました。

2017/07/10 02:03

投稿

yuika39
yuika39

スコア18

test CHANGED
File without changes
test CHANGED
@@ -34,914 +34,924 @@
34
34
 
35
35
  教えていただきありがとうございました。
36
36
 
37
+
38
+
37
- 一部リンクなどは削除していますが下記のような記述をしております
39
+ 一部記載内容に問題がある為削除しています。
40
+
41
+ ・CSSのリンク
42
+
43
+ ・画像のalt
44
+
45
+ ・メニューボタンのリンクなど
46
+
47
+
38
48
 
39
49
  また以下の記述は固定で変更不可です。
40
50
 
51
+ ・<div id="Contents">
52
+
53
+ ・<div class="GridSet">
54
+
55
+ ・<div class="Grid4">
56
+
57
+ ・<!--#include virtual="/ssi/footer.txt"-->
58
+
59
+
60
+
61
+
62
+
63
+ ```HTML
64
+
65
+ <!DOCTYPE html>
66
+
67
+ <html lang="ja">
68
+
69
+ <head>
70
+
71
+ <title></title>
72
+
73
+
74
+
75
+ <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
76
+
77
+ <script type="text/javascript" src="scroll.js"></script>
78
+
79
+
80
+
81
+ <link rel="index" title="" />
82
+
83
+ <link href="" type="text/css" rel="stylesheet" media="screen,print" />
84
+
85
+ </head>
86
+
87
+
88
+
89
+ <body>
90
+
91
+ <!-- ============== content_start ============= -->
92
+
41
93
  <div id="Contents">
42
94
 
43
95
  <div class="GridSet">
44
96
 
45
97
  <div class="Grid4">
46
98
 
99
+
100
+
101
+ <div class="product">
102
+
103
+
104
+
105
+ <div id="header-fixed">
106
+
107
+ <div id="header-bk">
108
+
109
+ <a class="logo" href=""><img src=""></a>
110
+
111
+ <nav class="global-nav">
112
+
113
+ <p><a href="#top">Menu name</a></p>
114
+
115
+ <p><a href="#content_1">Menu name</a></p>
116
+
117
+ <p><a href="#content_2">Menu name</a></p>
118
+
119
+ <p><a href="#content_3">Menu name</a></p>
120
+
121
+ <p><a href="#content_4">Menu name</a></p>
122
+
123
+ <span class="global-nav--bar"></span>
124
+
125
+ </nav>
126
+
127
+ </div>
128
+
129
+ </div>
130
+
131
+
132
+
133
+ <main id="top">
134
+
135
+ <div id="content_1">
136
+
137
+ </div>
138
+
139
+
140
+
141
+ <div id="content_2">
142
+
143
+ </div>
144
+
145
+
146
+
147
+ <div id="content_3">
148
+
149
+ </div>
150
+
151
+
152
+
153
+ <div id="content_4">
154
+
155
+ </div>
156
+
157
+ </main>
158
+
159
+ <div class="Section">
160
+
161
+ <ul class="PageTop">
162
+
163
+ </ul>
164
+
165
+ </div><!--/Section-->
166
+
167
+
168
+
169
+ </div><!--/product-->
170
+
171
+
172
+
173
+ </div><!--/Grid4-->
174
+
175
+ </div><!--/GridSet-->
176
+
177
+ </div><!--/ContentsArea-->
178
+
179
+
180
+
47
181
  <!--#include virtual="/ssi/footer.txt"-->
48
182
 
49
-
50
-
51
-
52
-
53
- ```HTML
54
-
55
- <!DOCTYPE html>
56
-
57
- <html lang="ja">
58
-
59
- <head>
60
-
61
- <title></title>
62
-
63
-
64
-
65
- <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
66
-
67
- <script type="text/javascript" src="scroll.js"></script>
68
-
69
-
70
-
71
- <link rel="index"" title="" />
72
-
73
- <link href="" type="text/css" rel="stylesheet" media="screen,print" />
74
-
75
- </head>
76
-
77
-
78
-
79
- <body>
80
-
81
- <!-- ============== content_start ============= -->
82
-
83
- <div id="Contents">
84
-
85
- <div class="GridSet">
86
-
87
- <div class="Grid4">
88
-
89
-
90
-
91
- <div class="product">
92
-
93
-
94
-
95
- <div id="header-fixed">
96
-
97
- <div id="header-bk">
98
-
99
- <a class="logo" href=""><img src=""></a>
100
-
101
- <nav class="global-nav">
102
-
103
- <p><a href="#top">Menu name</a></p>
104
-
105
- <p><a href="#content_1">Menu name</a></p>
106
-
107
- <p><a href="#content_2">Menu name</a></p>
108
-
109
- <p><a href="#content_3">Menu name</a></p>
110
-
111
- <p><a href="#content_4">Menu name</a></p>
112
-
113
- <span class="global-nav--bar"></span>
114
-
115
- </nav>
116
-
117
- </div>
118
-
119
- </div>
120
-
121
-
122
-
123
- <main id="top">
124
-
125
- <div id="content_1">
126
-
127
- </div>
128
-
129
-
130
-
131
- <div id="content_2">
132
-
133
- </div>
134
-
135
-
136
-
137
- <div id="content_3">
138
-
139
- </div>
140
-
141
-
142
-
143
- <div id="content_4">
144
-
145
- </div>
146
-
147
- </main>
148
-
149
- <div class="Section">
150
-
151
- <ul class="PageTop">
183
+ </body>
184
+
185
+ </html>
186
+
187
+ ```
188
+
189
+ ```CSS
190
+
191
+ html{overflow-y: scroll;}
192
+
193
+
194
+
195
+ ul li{
196
+
197
+ list-style-type: none;
198
+
199
+ }
200
+
201
+
202
+
203
+ img {
204
+
205
+ border: 0px;
206
+
207
+ }
208
+
209
+
210
+
211
+ body {
212
+
213
+ margin: 0;
214
+
215
+ padding: 0;
216
+
217
+ font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS Pゴシック',sans-serif;
218
+
219
+ color: #333;
220
+
221
+ font-size: 100%;
222
+
223
+ line-height: 100%;
224
+
225
+ text-align: center;
226
+
227
+ background-color:#333333;
228
+
229
+ -webkit-text-size-adjust: 100%;
230
+
231
+ line-height: 160%;
232
+
233
+ }
234
+
235
+
236
+
237
+ sup {
238
+
239
+ margin: auto 1px auto;
240
+
241
+ font-size: 92.2%;
242
+
243
+ vertical-align: 0.15em;
244
+
245
+ line-height: 100%;
246
+
247
+ }
248
+
249
+ * html body sup {font-size: 105%;}
250
+
251
+ *:first-child+html body sup {font-size: 105%;}
252
+
253
+
254
+
255
+ /*========== h3タグ設定 ==========*/
256
+
257
+ .title {
258
+
259
+ margin:0 0 25px 0;
260
+
261
+ padding:0;
262
+
263
+ line-height:40px;
264
+
265
+ }
266
+
267
+
268
+
269
+ /*========== 画像中央配置 ==========*/
270
+
271
+ .img_center {
272
+
273
+ display: block;
274
+
275
+ margin-left: auto;
276
+
277
+ margin-right: auto;
278
+
279
+ }
280
+
281
+
282
+
283
+ /*========== ヘッダー ==========*/
284
+
285
+ /* ヘッダーの固定 */
286
+
287
+ div#header-fixed {
288
+
289
+ background-color:#000000;/* 背景色(黒) */
290
+
291
+ position: fixed;/* ヘッダーの固定 */
292
+
293
+ top: 0px;/* 位置(上0px) */
294
+
295
+ left: 0px;/* 位置(右0px) */
296
+
297
+ width: 100%;/* 横幅100%*/
298
+
299
+ height: 50px;/* 縦幅140px */
300
+
301
+ }
302
+
303
+
304
+
305
+ div#header-bk {
306
+
307
+ background-color:#000000;/* 背景色(黒) */
308
+
309
+ margin:0 auto;
310
+
311
+ padding:0;
312
+
313
+ height:50px;/* 縦の高さ*/
314
+
315
+ width:965px;/* 横の幅*/
316
+
317
+ }
318
+
319
+
320
+
321
+ /*========== ヘッダーボタン ==========*/
322
+
323
+ /* メニュー全体のスタイル */
324
+
325
+ .global-nav {
326
+
327
+ position: relative;
328
+
329
+ width: 100%;
330
+
331
+ height: 50px;
332
+
333
+ line-height: 20px;
334
+
335
+ max-width: 720px;
336
+
337
+ margin: 0;
338
+
339
+ float: right;
340
+
341
+ }
342
+
343
+
344
+
345
+ /* 各メニューのスタイル */
346
+
347
+ .global-nav p {
348
+
349
+ float: left;
350
+
351
+ width: 20%;
352
+
353
+ }
354
+
355
+ .global-nav p a {
356
+
357
+ display: block;
358
+
359
+ color: #ffffff;
360
+
361
+ text-decoration:none;
362
+
363
+ }
364
+
365
+
366
+
367
+ /* 黒いバーのスタイル */
368
+
369
+ .global-nav--bar {
370
+
371
+ position: absolute;
372
+
373
+ display: block;
374
+
375
+ bottom: 0;
376
+
377
+ left: 0;
378
+
379
+ width: 20%;
380
+
381
+ height: 5px;
382
+
383
+ background: #ffffff;
384
+
385
+ -webkit-transition: all .5s;
386
+
387
+ transition: all .5s;
388
+
389
+ }
390
+
391
+
392
+
393
+ /* ホバーでバーの位置を変化 */
394
+
395
+ .global-nav p:nth-child(1):hover ~ .global-nav--bar {
396
+
397
+ left: 0;
398
+
399
+ }
400
+
401
+ .global-nav p:nth-child(2):hover ~ .global-nav--bar {
402
+
403
+ left: 20%;
404
+
405
+ }
406
+
407
+ .global-nav p:nth-child(3):hover ~ .global-nav--bar {
408
+
409
+ left: 40%;
410
+
411
+ }
412
+
413
+ .global-nav p:nth-child(4):hover ~ .global-nav--bar {
414
+
415
+ left: 60%;
416
+
417
+ }
418
+
419
+ .global-nav p:nth-child(5):hover ~ .global-nav--bar {
420
+
421
+ left: 80%;
422
+
423
+ }
424
+
425
+
426
+
427
+ .logo{
428
+
429
+ margin:0;
430
+
431
+ padding:0;
432
+
433
+ height:50px;
434
+
435
+ width:200px;
436
+
437
+ float:left;
438
+
439
+ }
440
+
441
+
442
+
443
+ /*========== メインコンテンツ基本設定 ==========*/
444
+
445
+ div.product {
446
+
447
+ margin:0;
448
+
449
+ padding:0;
450
+
451
+ width:965px;
452
+
453
+ display:inline-block;
454
+
455
+ font-size:83%;
456
+
457
+ }
458
+
459
+
460
+
461
+ /*========== メイン ==========*/
462
+
463
+ main#top{
464
+
465
+ background-color:#333333;
466
+
467
+ margin:0;
468
+
469
+ padding:80px 0 0 0;
470
+
471
+ }
472
+
473
+
474
+
475
+ /*========== メインコンテンツ ==========*/
476
+
477
+ div.top_img{
478
+
479
+ margin:0;
480
+
481
+ padding:0;
482
+
483
+ width:965px;
484
+
485
+ height:600px;
486
+
487
+ }
488
+
489
+
490
+
491
+ div#content_1 {
492
+
493
+ margin:0 30px 0 30px;
494
+
495
+ padding:60px 0 0 0;
496
+
497
+ width:905px;
498
+
499
+ height:500px;
500
+
501
+ }
502
+
503
+
504
+
505
+ div#content_2{
506
+
507
+ margin:0 30px 0 30px;
508
+
509
+ padding:60px 0 0 0;
510
+
511
+ width:905px;
512
+
513
+ height:500px;
514
+
515
+ }
516
+
517
+
518
+
519
+ div#content_3{
520
+
521
+ margin:0 30px 0 30px;
522
+
523
+ padding:60px 0 0 0;
524
+
525
+ width:905px;
526
+
527
+ height:500px;
528
+
529
+ }
530
+
531
+
532
+
533
+ div#content_4{
534
+
535
+ margin:0 30px 0 30px;
536
+
537
+ padding:60px 0 0 0;
538
+
539
+ width:905px;
540
+
541
+ height:500px;
542
+
543
+ }
544
+
545
+
546
+
547
+ div#content_5{
548
+
549
+ margin:0 30px 0 30px;
550
+
551
+ padding:60px 0 0 0;
552
+
553
+ width:905px;
554
+
555
+ height:500px;
556
+
557
+ }
558
+
559
+
560
+
561
+ /*========== 一覧 ==========*/
562
+
563
+
564
+
565
+ .item_box1 {
566
+
567
+ margin:0;
568
+
569
+ padding:0;
570
+
571
+ width:905px;
572
+
573
+ height:173px;
574
+
575
+ font-size:0;
576
+
577
+ }
578
+
579
+
580
+
581
+ .item_box2 {
582
+
583
+ margin:10px 0 0 0;
584
+
585
+ padding:0;
586
+
587
+ width:905px;
588
+
589
+ height:173px;
590
+
591
+ font-size:0;
592
+
593
+ }
594
+
595
+
596
+
597
+ .item1 {
598
+
599
+ margin:0 10px 0 0;
600
+
601
+ padding:0;
602
+
603
+ width:173px;
604
+
605
+ height:173px;
606
+
607
+ line-height:173px;
608
+
609
+ float: left;
610
+
611
+ }
612
+
613
+
614
+
615
+ .item2 {
616
+
617
+ margin:0;
618
+
619
+ padding:0;
620
+
621
+ width:173px;
622
+
623
+ height:173px;
624
+
625
+ line-height:173px;
626
+
627
+ float: left;
628
+
629
+ }
630
+
631
+
632
+
633
+ /*==========リンクボタン ==========*/
634
+
635
+ .button2 {
636
+
637
+ margin:15px 0 0 0;
638
+
639
+ padding:0px;
640
+
641
+ background-color: #C4C4C4;
642
+
643
+ color: #fff;
644
+
645
+ display: inline-block;
646
+
647
+ width:905px;
648
+
649
+ height:35px;
650
+
651
+ text-align: center;
652
+
653
+ text-decoration: none;
654
+
655
+ line-height:35px;
656
+
657
+ outline: none;
658
+
659
+ }
660
+
661
+
662
+
663
+ .button:hover{
664
+
665
+ background-color: #009933;
666
+
667
+ }
668
+
669
+
670
+
671
+ .button::before,
672
+
673
+ .button::after {
674
+
675
+ position: absolute;
676
+
677
+ z-index: -1;
678
+
679
+ display: block;
680
+
681
+ content: '';
682
+
683
+ }
684
+
685
+
686
+
687
+ .button,
688
+
689
+ .button::before,
690
+
691
+ .button::after{
692
+
693
+ -webkit-box-sizing: border-box;
694
+
695
+ -moz-box-sizing: border-box;
696
+
697
+ box-sizing: border-box;
698
+
699
+ -webkit-transition: all .3s;
700
+
701
+ transition: all .3s;
702
+
703
+ }
704
+
705
+
706
+
707
+ /*========== フッター ==========*/
708
+
709
+ #Footer {
710
+
711
+ clear: both;
712
+
713
+ min-width: 965px;
714
+
715
+ padding: 30px 0;
716
+
717
+ background-color: #e5e5e5;
718
+
719
+ overflow: hidden;
720
+
721
+ clear:both;
722
+
723
+ }
724
+
725
+
726
+
727
+ #Footer h2 {
728
+
729
+ margin: 0;
730
+
731
+ padding: 0;
732
+
733
+ border: none;
734
+
735
+ line-height: 0;
736
+
737
+ text-indent: -9999px;
738
+
739
+ }
740
+
741
+
742
+
743
+ #Footer ul {
744
+
745
+ width: 965px;
746
+
747
+ margin: 0 auto;
748
+
749
+ font-size: 67%;
750
+
751
+ }
752
+
753
+
754
+
755
+ #Footer li {
756
+
757
+ float: left;
758
+
759
+ padding: 0 10px;
760
+
761
+ border-left: solid 1px #bbb;
762
+
763
+ line-height: 1.5em;
764
+
765
+ vertical-align: top;
766
+
767
+ }
768
+
769
+ * html #Footer li {
770
+
771
+ position: relative;
772
+
773
+ z-index: 2;
774
+
775
+ }
776
+
777
+ *:first-child+html #Footer li {
778
+
779
+ position: relative;
780
+
781
+ z-index: 2;
782
+
783
+ }
784
+
785
+
786
+
787
+ #Footer li.FirstItem {
788
+
789
+ padding: 0 10px 0 0;
790
+
791
+ border-left: none;
792
+
793
+ }
794
+
795
+ #Footer li a:link,
796
+
797
+ #Footer li a:visited {
798
+
799
+ color: #333;
800
+
801
+ text-decoration: none;
802
+
803
+ }
804
+
805
+ #Footer li a:hover,
806
+
807
+ #Footer li a:active {
808
+
809
+ color: #b1000e;
810
+
811
+ text-decoration: underline;
812
+
813
+ }
814
+
815
+
816
+
817
+ #Footer p {
818
+
819
+ width: 965px;
820
+
821
+ margin: 0 auto;
822
+
823
+ font-size: 65%;
824
+
825
+ text-align: right;
826
+
827
+ line-height: 1.5em;
828
+
829
+ color: #333;
830
+
831
+ vertical-align: top;
832
+
833
+ }
834
+
835
+ * html #Footer p {margin: -1.5em auto 0;}
836
+
837
+ *:first-child+html #Footer p {margin: -1.5em auto 0;}
838
+
839
+ ```
840
+
841
+ ```scroll.js
842
+
843
+ $(function(){
844
+
845
+ // #で始まるアンカーをクリックした場合に処理
846
+
847
+ $('a[href^="#"]').click(function() {
848
+
849
+ // スクロールの速度
850
+
851
+ var speed = 400; // ミリ秒
852
+
853
+ // アンカーの値取得
854
+
855
+ var href= $(this).attr("href");
856
+
857
+ // 移動先を取得
858
+
859
+ var target = $(href == "#" || href == "" ? 'html' : href);
860
+
861
+ // 移動先を数値で取得
862
+
863
+ var position = target.offset().top;
864
+
865
+ // スムーススクロール
866
+
867
+ $('body,html').animate({scrollTop:position}, speed, 'swing');
868
+
869
+ return false;
870
+
871
+ });
872
+
873
+ });
874
+
875
+ ```
876
+
877
+ ```Footer-ssi
878
+
879
+ <div id="Footer">
880
+
881
+ <h2</h2>
882
+
883
+ <ul>
884
+
885
+ <li class="FirstItem"><a href=""></a></li>
886
+
887
+ <li><a href=""></a></li>
888
+
889
+ <li><a href=""></a></li>
890
+
891
+ <li><a href=""></a></li>
152
892
 
153
893
  </ul>
154
894
 
155
- </div><!--/Section-->
156
-
157
-
158
-
159
- </div><!--/product-->
160
-
161
-
162
-
163
- </div><!--/Grid4-->
164
-
165
- </div><!--/GridSet-->
166
-
167
- </div><!--/ContentsArea-->
895
+ </div><!--/FooterArea-->
896
+
897
+
898
+
168
-
899
+ <!-- START OF SmartSource Data Collector TAG -->
900
+
169
-
901
+ <!-- Copyright (c)-->
902
+
170
-
903
+ <!-- Version: 9.4.0 -->
904
+
905
+ <!-- Tag Builder Version: 3.3 -->
906
+
907
+ <!-- Created:-->
908
+
909
+ <script src="/scripts/webtrends.js" type="text/javascript"></script>
910
+
911
+ <!-- ----------------------------------------------------------------------------------- -->
912
+
913
+ <!-- Warning: The two script blocks below must remain inline. Moving them to an external -->
914
+
915
+ <!-- JavaScript include file can cause serious problems with cross-domain tracking. -->
916
+
917
+ <!-- ----------------------------------------------------------------------------------- -->
918
+
171
- <!--#include virtual="/ssi/footer.txt"-->
919
+ <script type="text/javascript">
920
+
172
-
921
+ //<![CDATA[
922
+
923
+ var _tag=new WebTrends();
924
+
925
+ _tag.dcsGetId();
926
+
927
+ //]]>
928
+
173
- </body>
929
+ </script>
930
+
174
-
931
+ <script type="text/javascript">
932
+
933
+ //<![CDATA[
934
+
935
+ _tag.dcsCustom=function(){
936
+
937
+ // Add custom parameters here.
938
+
939
+ //_tag.DCSext.param_name=param_value;
940
+
941
+ }
942
+
943
+ _tag.dcsCollect();
944
+
945
+ //]]>
946
+
175
- </html>
947
+ </script>
948
+
949
+ <noscript>
950
+
951
+ <div></div>
952
+
953
+ </noscript>
954
+
955
+ <!-- END OF SmartSource Data Collector TAG -->
176
956
 
177
957
  ```
178
-
179
- ```CSS
180
-
181
- html{overflow-y: scroll;}
182
-
183
-
184
-
185
- ul li{
186
-
187
- list-style-type: none;
188
-
189
- }
190
-
191
-
192
-
193
- img {
194
-
195
- border: 0px;
196
-
197
- }
198
-
199
-
200
-
201
- body {
202
-
203
- margin: 0;
204
-
205
- padding: 0;
206
-
207
- font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS Pゴシック',sans-serif;
208
-
209
- color: #333;
210
-
211
- font-size: 100%;
212
-
213
- line-height: 100%;
214
-
215
- text-align: center;
216
-
217
- background-color:#333333;
218
-
219
- -webkit-text-size-adjust: 100%;
220
-
221
- line-height: 160%;
222
-
223
- }
224
-
225
-
226
-
227
- sup {
228
-
229
- margin: auto 1px auto;
230
-
231
- font-size: 92.2%;
232
-
233
- vertical-align: 0.15em;
234
-
235
- line-height: 100%;
236
-
237
- }
238
-
239
- * html body sup {font-size: 105%;}
240
-
241
- *:first-child+html body sup {font-size: 105%;}
242
-
243
-
244
-
245
- /*========== h3タグ設定 ==========*/
246
-
247
- .title {
248
-
249
- margin:0 0 25px 0;
250
-
251
- padding:0;
252
-
253
- line-height:40px;
254
-
255
- }
256
-
257
-
258
-
259
- /*========== 画像中央配置 ==========*/
260
-
261
- .img_center {
262
-
263
- display: block;
264
-
265
- margin-left: auto;
266
-
267
- margin-right: auto;
268
-
269
- }
270
-
271
-
272
-
273
- /*========== ヘッダー ==========*/
274
-
275
- /* ヘッダーの固定 */
276
-
277
- div#header-fixed {
278
-
279
- background-color:#000000;/* 背景色(黒) */
280
-
281
- position: fixed;/* ヘッダーの固定 */
282
-
283
- top: 0px;/* 位置(上0px) */
284
-
285
- left: 0px;/* 位置(右0px) */
286
-
287
- width: 100%;/* 横幅100%*/
288
-
289
- height: 50px;/* 縦幅140px */
290
-
291
- }
292
-
293
-
294
-
295
- div#header-bk {
296
-
297
- background-color:#000000;/* 背景色(黒) */
298
-
299
- margin:0 auto;
300
-
301
- padding:0;
302
-
303
- height:50px;/* 縦の高さ*/
304
-
305
- width:965px;/* 横の幅*/
306
-
307
- }
308
-
309
-
310
-
311
- /*========== ヘッダーボタン ==========*/
312
-
313
- /* メニュー全体のスタイル */
314
-
315
- .global-nav {
316
-
317
- position: relative;
318
-
319
- width: 100%;
320
-
321
- height: 50px;
322
-
323
- line-height: 20px;
324
-
325
- max-width: 720px;
326
-
327
- margin: 0;
328
-
329
- float: right;
330
-
331
- }
332
-
333
-
334
-
335
- /* 各メニューのスタイル */
336
-
337
- .global-nav p {
338
-
339
- float: left;
340
-
341
- width: 20%;
342
-
343
- }
344
-
345
- .global-nav p a {
346
-
347
- display: block;
348
-
349
- color: #ffffff;
350
-
351
- text-decoration:none;
352
-
353
- }
354
-
355
-
356
-
357
- /* 黒いバーのスタイル */
358
-
359
- .global-nav--bar {
360
-
361
- position: absolute;
362
-
363
- display: block;
364
-
365
- bottom: 0;
366
-
367
- left: 0;
368
-
369
- width: 20%;
370
-
371
- height: 5px;
372
-
373
- background: #ffffff;
374
-
375
- -webkit-transition: all .5s;
376
-
377
- transition: all .5s;
378
-
379
- }
380
-
381
-
382
-
383
- /* ホバーでバーの位置を変化 */
384
-
385
- .global-nav p:nth-child(1):hover ~ .global-nav--bar {
386
-
387
- left: 0;
388
-
389
- }
390
-
391
- .global-nav p:nth-child(2):hover ~ .global-nav--bar {
392
-
393
- left: 20%;
394
-
395
- }
396
-
397
- .global-nav p:nth-child(3):hover ~ .global-nav--bar {
398
-
399
- left: 40%;
400
-
401
- }
402
-
403
- .global-nav p:nth-child(4):hover ~ .global-nav--bar {
404
-
405
- left: 60%;
406
-
407
- }
408
-
409
- .global-nav p:nth-child(5):hover ~ .global-nav--bar {
410
-
411
- left: 80%;
412
-
413
- }
414
-
415
-
416
-
417
- .logo{
418
-
419
- margin:0;
420
-
421
- padding:0;
422
-
423
- height:50px;
424
-
425
- width:200px;
426
-
427
- float:left;
428
-
429
- }
430
-
431
-
432
-
433
- /*========== メインコンテンツ基本設定 ==========*/
434
-
435
- div.product {
436
-
437
- margin:0;
438
-
439
- padding:0;
440
-
441
- width:965px;
442
-
443
- display:inline-block;
444
-
445
- font-size:83%;
446
-
447
- }
448
-
449
-
450
-
451
- /*========== メイン ==========*/
452
-
453
- main#top{
454
-
455
- background-color:#333333;
456
-
457
- margin:0;
458
-
459
- padding:80px 0 0 0;
460
-
461
- }
462
-
463
-
464
-
465
- /*========== メインコンテンツ ==========*/
466
-
467
- div.top_img{
468
-
469
- margin:0;
470
-
471
- padding:0;
472
-
473
- width:965px;
474
-
475
- height:600px;
476
-
477
- }
478
-
479
-
480
-
481
- div#content_1 {
482
-
483
- margin:0 30px 0 30px;
484
-
485
- padding:60px 0 0 0;
486
-
487
- width:905px;
488
-
489
- height:500px;
490
-
491
- }
492
-
493
-
494
-
495
- div#content_2{
496
-
497
- margin:0 30px 0 30px;
498
-
499
- padding:60px 0 0 0;
500
-
501
- width:905px;
502
-
503
- height:500px;
504
-
505
- }
506
-
507
-
508
-
509
- div#content_3{
510
-
511
- margin:0 30px 0 30px;
512
-
513
- padding:60px 0 0 0;
514
-
515
- width:905px;
516
-
517
- height:500px;
518
-
519
- }
520
-
521
-
522
-
523
- div#content_4{
524
-
525
- margin:0 30px 0 30px;
526
-
527
- padding:60px 0 0 0;
528
-
529
- width:905px;
530
-
531
- height:500px;
532
-
533
- }
534
-
535
-
536
-
537
- div#content_5{
538
-
539
- margin:0 30px 0 30px;
540
-
541
- padding:60px 0 0 0;
542
-
543
- width:905px;
544
-
545
- height:500px;
546
-
547
- }
548
-
549
-
550
-
551
- /*========== 一覧 ==========*/
552
-
553
-
554
-
555
- .item_box1 {
556
-
557
- margin:0;
558
-
559
- padding:0;
560
-
561
- width:905px;
562
-
563
- height:173px;
564
-
565
- font-size:0;
566
-
567
- }
568
-
569
-
570
-
571
- .item_box2 {
572
-
573
- margin:10px 0 0 0;
574
-
575
- padding:0;
576
-
577
- width:905px;
578
-
579
- height:173px;
580
-
581
- font-size:0;
582
-
583
- }
584
-
585
-
586
-
587
- .item1 {
588
-
589
- margin:0 10px 0 0;
590
-
591
- padding:0;
592
-
593
- width:173px;
594
-
595
- height:173px;
596
-
597
- line-height:173px;
598
-
599
- float: left;
600
-
601
- }
602
-
603
-
604
-
605
- .item2 {
606
-
607
- margin:0;
608
-
609
- padding:0;
610
-
611
- width:173px;
612
-
613
- height:173px;
614
-
615
- line-height:173px;
616
-
617
- float: left;
618
-
619
- }
620
-
621
-
622
-
623
- /*==========リンクボタン ==========*/
624
-
625
- .button2 {
626
-
627
- margin:15px 0 0 0;
628
-
629
- padding:0px;
630
-
631
- background-color: #C4C4C4;
632
-
633
- color: #fff;
634
-
635
- display: inline-block;
636
-
637
- width:905px;
638
-
639
- height:35px;
640
-
641
- text-align: center;
642
-
643
- text-decoration: none;
644
-
645
- line-height:35px;
646
-
647
- outline: none;
648
-
649
- }
650
-
651
-
652
-
653
- .button:hover{
654
-
655
- background-color: #009933;
656
-
657
- }
658
-
659
-
660
-
661
- .button::before,
662
-
663
- .button::after {
664
-
665
- position: absolute;
666
-
667
- z-index: -1;
668
-
669
- display: block;
670
-
671
- content: '';
672
-
673
- }
674
-
675
-
676
-
677
- .button,
678
-
679
- .button::before,
680
-
681
- .button::after{
682
-
683
- -webkit-box-sizing: border-box;
684
-
685
- -moz-box-sizing: border-box;
686
-
687
- box-sizing: border-box;
688
-
689
- -webkit-transition: all .3s;
690
-
691
- transition: all .3s;
692
-
693
- }
694
-
695
-
696
-
697
- /*========== フッター ==========*/
698
-
699
- #Footer {
700
-
701
- clear: both;
702
-
703
- min-width: 965px;
704
-
705
- padding: 30px 0;
706
-
707
- background-color: #e5e5e5;
708
-
709
- overflow: hidden;
710
-
711
- clear:both;
712
-
713
- }
714
-
715
-
716
-
717
- #Footer h2 {
718
-
719
- margin: 0;
720
-
721
- padding: 0;
722
-
723
- border: none;
724
-
725
- line-height: 0;
726
-
727
- text-indent: -9999px;
728
-
729
- }
730
-
731
-
732
-
733
- #Footer ul {
734
-
735
- width: 965px;
736
-
737
- margin: 0 auto;
738
-
739
- font-size: 67%;
740
-
741
- }
742
-
743
-
744
-
745
- #Footer li {
746
-
747
- float: left;
748
-
749
- padding: 0 10px;
750
-
751
- border-left: solid 1px #bbb;
752
-
753
- line-height: 1.5em;
754
-
755
- vertical-align: top;
756
-
757
- }
758
-
759
- * html #Footer li {
760
-
761
- position: relative;
762
-
763
- z-index: 2;
764
-
765
- }
766
-
767
- *:first-child+html #Footer li {
768
-
769
- position: relative;
770
-
771
- z-index: 2;
772
-
773
- }
774
-
775
-
776
-
777
- #Footer li.FirstItem {
778
-
779
- padding: 0 10px 0 0;
780
-
781
- border-left: none;
782
-
783
- }
784
-
785
- #Footer li a:link,
786
-
787
- #Footer li a:visited {
788
-
789
- color: #333;
790
-
791
- text-decoration: none;
792
-
793
- }
794
-
795
- #Footer li a:hover,
796
-
797
- #Footer li a:active {
798
-
799
- color: #b1000e;
800
-
801
- text-decoration: underline;
802
-
803
- }
804
-
805
-
806
-
807
- #Footer p {
808
-
809
- width: 965px;
810
-
811
- margin: 0 auto;
812
-
813
- font-size: 65%;
814
-
815
- text-align: right;
816
-
817
- line-height: 1.5em;
818
-
819
- color: #333;
820
-
821
- vertical-align: top;
822
-
823
- }
824
-
825
- * html #Footer p {margin: -1.5em auto 0;}
826
-
827
- *:first-child+html #Footer p {margin: -1.5em auto 0;}
828
-
829
- ```
830
-
831
- ```scroll.js
832
-
833
- $(function(){
834
-
835
- // #で始まるアンカーをクリックした場合に処理
836
-
837
- $('a[href^="#"]').click(function() {
838
-
839
- // スクロールの速度
840
-
841
- var speed = 400; // ミリ秒
842
-
843
- // アンカーの値取得
844
-
845
- var href= $(this).attr("href");
846
-
847
- // 移動先を取得
848
-
849
- var target = $(href == "#" || href == "" ? 'html' : href);
850
-
851
- // 移動先を数値で取得
852
-
853
- var position = target.offset().top;
854
-
855
- // スムーススクロール
856
-
857
- $('body,html').animate({scrollTop:position}, speed, 'swing');
858
-
859
- return false;
860
-
861
- });
862
-
863
- });
864
-
865
- ```
866
-
867
- ```Footer-ssi
868
-
869
- <div id="Footer">
870
-
871
- <h2</h2>
872
-
873
- <ul>
874
-
875
- <li class="FirstItem"><a href=""></a></li>
876
-
877
- <li><a href=""></a></li>
878
-
879
- <li><a href=""></a></li>
880
-
881
- <li><a href=""></a></li>
882
-
883
- </ul>
884
-
885
- </div><!--/FooterArea-->
886
-
887
-
888
-
889
- <!-- START OF SmartSource Data Collector TAG -->
890
-
891
- <!-- Copyright (c)-->
892
-
893
- <!-- Version: 9.4.0 -->
894
-
895
- <!-- Tag Builder Version: 3.3 -->
896
-
897
- <!-- Created:-->
898
-
899
- <script src="/scripts/webtrends.js" type="text/javascript"></script>
900
-
901
- <!-- ----------------------------------------------------------------------------------- -->
902
-
903
- <!-- Warning: The two script blocks below must remain inline. Moving them to an external -->
904
-
905
- <!-- JavaScript include file can cause serious problems with cross-domain tracking. -->
906
-
907
- <!-- ----------------------------------------------------------------------------------- -->
908
-
909
- <script type="text/javascript">
910
-
911
- //<![CDATA[
912
-
913
- var _tag=new WebTrends();
914
-
915
- _tag.dcsGetId();
916
-
917
- //]]>
918
-
919
- </script>
920
-
921
- <script type="text/javascript">
922
-
923
- //<![CDATA[
924
-
925
- _tag.dcsCustom=function(){
926
-
927
- // Add custom parameters here.
928
-
929
- //_tag.DCSext.param_name=param_value;
930
-
931
- }
932
-
933
- _tag.dcsCollect();
934
-
935
- //]]>
936
-
937
- </script>
938
-
939
- <noscript>
940
-
941
- <div></div>
942
-
943
- </noscript>
944
-
945
- <!-- END OF SmartSource Data Collector TAG -->
946
-
947
- ```

5

参考サイトのリンクを修正しました。

2017/07/10 02:01

投稿

yuika39
yuika39

スコア18

test CHANGED
File without changes
test CHANGED
@@ -16,13 +16,13 @@
16
16
 
17
17
  1:CSSのみで実装可能
18
18
 
19
- https://theorthodoxworks.com/web-design/moving-menu-bar-with-mouse-hover/
19
+ https://[theorthodoxworks.com/web-design/moving-menu-bar-with-mouse-hover/](http://theorthodoxworks.com/web-design/moving-menu-bar-with-mouse-hover/)
20
20
 
21
21
 
22
22
 
23
23
  2:jsで実装可能
24
24
 
25
- http://weblabla.m-pokoj.net/nav02/
25
+ http://[weblabla.m-pokoj.net/nav02/](http://weblabla.m-pokoj.net/nav02/)
26
26
 
27
27
 
28
28
 

4

一部追記しました。

2017/07/10 01:43

投稿

yuika39
yuika39

スコア18

test CHANGED
File without changes
test CHANGED
@@ -827,3 +827,121 @@
827
827
  *:first-child+html #Footer p {margin: -1.5em auto 0;}
828
828
 
829
829
  ```
830
+
831
+ ```scroll.js
832
+
833
+ $(function(){
834
+
835
+ // #で始まるアンカーをクリックした場合に処理
836
+
837
+ $('a[href^="#"]').click(function() {
838
+
839
+ // スクロールの速度
840
+
841
+ var speed = 400; // ミリ秒
842
+
843
+ // アンカーの値取得
844
+
845
+ var href= $(this).attr("href");
846
+
847
+ // 移動先を取得
848
+
849
+ var target = $(href == "#" || href == "" ? 'html' : href);
850
+
851
+ // 移動先を数値で取得
852
+
853
+ var position = target.offset().top;
854
+
855
+ // スムーススクロール
856
+
857
+ $('body,html').animate({scrollTop:position}, speed, 'swing');
858
+
859
+ return false;
860
+
861
+ });
862
+
863
+ });
864
+
865
+ ```
866
+
867
+ ```Footer-ssi
868
+
869
+ <div id="Footer">
870
+
871
+ <h2</h2>
872
+
873
+ <ul>
874
+
875
+ <li class="FirstItem"><a href=""></a></li>
876
+
877
+ <li><a href=""></a></li>
878
+
879
+ <li><a href=""></a></li>
880
+
881
+ <li><a href=""></a></li>
882
+
883
+ </ul>
884
+
885
+ </div><!--/FooterArea-->
886
+
887
+
888
+
889
+ <!-- START OF SmartSource Data Collector TAG -->
890
+
891
+ <!-- Copyright (c)-->
892
+
893
+ <!-- Version: 9.4.0 -->
894
+
895
+ <!-- Tag Builder Version: 3.3 -->
896
+
897
+ <!-- Created:-->
898
+
899
+ <script src="/scripts/webtrends.js" type="text/javascript"></script>
900
+
901
+ <!-- ----------------------------------------------------------------------------------- -->
902
+
903
+ <!-- Warning: The two script blocks below must remain inline. Moving them to an external -->
904
+
905
+ <!-- JavaScript include file can cause serious problems with cross-domain tracking. -->
906
+
907
+ <!-- ----------------------------------------------------------------------------------- -->
908
+
909
+ <script type="text/javascript">
910
+
911
+ //<![CDATA[
912
+
913
+ var _tag=new WebTrends();
914
+
915
+ _tag.dcsGetId();
916
+
917
+ //]]>
918
+
919
+ </script>
920
+
921
+ <script type="text/javascript">
922
+
923
+ //<![CDATA[
924
+
925
+ _tag.dcsCustom=function(){
926
+
927
+ // Add custom parameters here.
928
+
929
+ //_tag.DCSext.param_name=param_value;
930
+
931
+ }
932
+
933
+ _tag.dcsCollect();
934
+
935
+ //]]>
936
+
937
+ </script>
938
+
939
+ <noscript>
940
+
941
+ <div></div>
942
+
943
+ </noscript>
944
+
945
+ <!-- END OF SmartSource Data Collector TAG -->
946
+
947
+ ```

3

一部不備ありましたので変更しました

2017/07/10 01:23

投稿

yuika39
yuika39

スコア18

test CHANGED
File without changes
test CHANGED
@@ -620,11 +620,7 @@
620
620
 
621
621
 
622
622
 
623
- /*========== ```ここに言語を入力
624
-
625
- コード
626
-
627
- ```リンクボタン ==========*/
623
+ /*==========リンクボタン ==========*/
628
624
 
629
625
  .button2 {
630
626
 

2

記述を変更しました。

2017/07/10 00:57

投稿

yuika39
yuika39

スコア18

test CHANGED
File without changes
test CHANGED
@@ -48,7 +48,9 @@
48
48
 
49
49
 
50
50
 
51
+
52
+
51
- HTML
53
+ ```HTML
52
54
 
53
55
  <!DOCTYPE html>
54
56
 
@@ -172,11 +174,9 @@
172
174
 
173
175
  </html>
174
176
 
175
-
177
+ ```
176
-
178
+
177
- CSS
179
+ ```CSS
178
-
179
- /*========== ベース設定 ==========*/
180
180
 
181
181
  html{overflow-y: scroll;}
182
182
 
@@ -548,7 +548,7 @@
548
548
 
549
549
 
550
550
 
551
- /*========== 製品一覧 ==========*/
551
+ /*========== 一覧 ==========*/
552
552
 
553
553
 
554
554
 
@@ -829,3 +829,5 @@
829
829
  * html #Footer p {margin: -1.5em auto 0;}
830
830
 
831
831
  *:first-child+html #Footer p {margin: -1.5em auto 0;}
832
+
833
+ ```

1

記述したHTML、CSSを追記しました。

2017/07/10 00:53

投稿

yuika39
yuika39

スコア18

test CHANGED
File without changes
test CHANGED
@@ -24,4 +24,808 @@
24
24
 
25
25
  http://weblabla.m-pokoj.net/nav02/
26
26
 
27
+
28
+
29
+
30
+
31
+ ======================= 追記 ========================
32
+
33
+ 初心者マークの存在を知らず大変申し訳ありません。
34
+
35
+ 教えていただきありがとうございました。
36
+
37
+ 一部リンクなどは削除していますが下記のような記述をしております。
38
+
39
+ また以下の記述は固定で変更不可です。
40
+
41
+ <div id="Contents">
42
+
43
+ <div class="GridSet">
44
+
45
+ <div class="Grid4">
46
+
47
+ <!--#include virtual="/ssi/footer.txt"-->
48
+
49
+
50
+
51
+ 【HTML】
52
+
53
+ <!DOCTYPE html>
54
+
55
+ <html lang="ja">
56
+
57
+ <head>
58
+
59
+ <title></title>
60
+
61
+
62
+
63
+ <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
64
+
65
+ <script type="text/javascript" src="scroll.js"></script>
66
+
67
+
68
+
69
+ <link rel="index"" title="" />
70
+
71
+ <link href="" type="text/css" rel="stylesheet" media="screen,print" />
72
+
73
+ </head>
74
+
75
+
76
+
77
+ <body>
78
+
79
+ <!-- ============== content_start ============= -->
80
+
81
+ <div id="Contents">
82
+
83
+ <div class="GridSet">
84
+
85
+ <div class="Grid4">
86
+
87
+
88
+
89
+ <div class="product">
90
+
91
+
92
+
93
+ <div id="header-fixed">
94
+
95
+ <div id="header-bk">
96
+
97
+ <a class="logo" href=""><img src=""></a>
98
+
99
+ <nav class="global-nav">
100
+
101
+ <p><a href="#top">Menu name</a></p>
102
+
103
+ <p><a href="#content_1">Menu name</a></p>
104
+
105
+ <p><a href="#content_2">Menu name</a></p>
106
+
107
+ <p><a href="#content_3">Menu name</a></p>
108
+
109
+ <p><a href="#content_4">Menu name</a></p>
110
+
111
+ <span class="global-nav--bar"></span>
112
+
113
+ </nav>
114
+
115
+ </div>
116
+
117
+ </div>
118
+
119
+
120
+
121
+ <main id="top">
122
+
123
+ <div id="content_1">
124
+
125
+ </div>
126
+
127
+
128
+
129
+ <div id="content_2">
130
+
131
+ </div>
132
+
133
+
134
+
135
+ <div id="content_3">
136
+
137
+ </div>
138
+
139
+
140
+
141
+ <div id="content_4">
142
+
143
+ </div>
144
+
145
+ </main>
146
+
147
+ <div class="Section">
148
+
149
+ <ul class="PageTop">
150
+
151
+ </ul>
152
+
153
+ </div><!--/Section-->
154
+
155
+
156
+
157
+ </div><!--/product-->
158
+
159
+
160
+
161
+ </div><!--/Grid4-->
162
+
163
+ </div><!--/GridSet-->
164
+
165
+ </div><!--/ContentsArea-->
166
+
167
+
168
+
169
+ <!--#include virtual="/ssi/footer.txt"-->
170
+
171
+ </body>
172
+
173
+ </html>
174
+
175
+
176
+
177
+ 【CSS】
178
+
179
+ /*========== ベース設定 ==========*/
180
+
181
+ html{overflow-y: scroll;}
182
+
183
+
184
+
185
+ ul li{
186
+
187
+ list-style-type: none;
188
+
189
+ }
190
+
191
+
192
+
193
+ img {
194
+
195
+ border: 0px;
196
+
197
+ }
198
+
199
+
200
+
201
+ body {
202
+
203
+ margin: 0;
204
+
205
+ padding: 0;
206
+
207
+ font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS Pゴシック',sans-serif;
208
+
209
+ color: #333;
210
+
211
+ font-size: 100%;
212
+
213
+ line-height: 100%;
214
+
215
+ text-align: center;
216
+
217
+ background-color:#333333;
218
+
219
+ -webkit-text-size-adjust: 100%;
220
+
221
+ line-height: 160%;
222
+
223
+ }
224
+
225
+
226
+
227
+ sup {
228
+
229
+ margin: auto 1px auto;
230
+
231
+ font-size: 92.2%;
232
+
233
+ vertical-align: 0.15em;
234
+
235
+ line-height: 100%;
236
+
237
+ }
238
+
239
+ * html body sup {font-size: 105%;}
240
+
241
+ *:first-child+html body sup {font-size: 105%;}
242
+
243
+
244
+
245
+ /*========== h3タグ設定 ==========*/
246
+
247
+ .title {
248
+
249
+ margin:0 0 25px 0;
250
+
251
+ padding:0;
252
+
253
+ line-height:40px;
254
+
255
+ }
256
+
257
+
258
+
259
+ /*========== 画像中央配置 ==========*/
260
+
261
+ .img_center {
262
+
263
+ display: block;
264
+
265
+ margin-left: auto;
266
+
267
+ margin-right: auto;
268
+
269
+ }
270
+
271
+
272
+
273
+ /*========== ヘッダー ==========*/
274
+
275
+ /* ヘッダーの固定 */
276
+
277
+ div#header-fixed {
278
+
279
+ background-color:#000000;/* 背景色(黒) */
280
+
281
+ position: fixed;/* ヘッダーの固定 */
282
+
283
+ top: 0px;/* 位置(上0px) */
284
+
285
+ left: 0px;/* 位置(右0px) */
286
+
287
+ width: 100%;/* 横幅100%*/
288
+
289
+ height: 50px;/* 縦幅140px */
290
+
291
+ }
292
+
293
+
294
+
295
+ div#header-bk {
296
+
297
+ background-color:#000000;/* 背景色(黒) */
298
+
299
+ margin:0 auto;
300
+
301
+ padding:0;
302
+
303
+ height:50px;/* 縦の高さ*/
304
+
305
+ width:965px;/* 横の幅*/
306
+
307
+ }
308
+
309
+
310
+
311
+ /*========== ヘッダーボタン ==========*/
312
+
313
+ /* メニュー全体のスタイル */
314
+
315
+ .global-nav {
316
+
317
+ position: relative;
318
+
319
+ width: 100%;
320
+
321
+ height: 50px;
322
+
323
+ line-height: 20px;
324
+
325
+ max-width: 720px;
326
+
327
+ margin: 0;
328
+
329
+ float: right;
330
+
331
+ }
332
+
333
+
334
+
335
+ /* 各メニューのスタイル */
336
+
337
+ .global-nav p {
338
+
339
+ float: left;
340
+
341
+ width: 20%;
342
+
343
+ }
344
+
345
+ .global-nav p a {
346
+
347
+ display: block;
348
+
349
+ color: #ffffff;
350
+
351
+ text-decoration:none;
352
+
353
+ }
354
+
355
+
356
+
357
+ /* 黒いバーのスタイル */
358
+
359
+ .global-nav--bar {
360
+
361
+ position: absolute;
362
+
363
+ display: block;
364
+
365
+ bottom: 0;
366
+
367
+ left: 0;
368
+
369
+ width: 20%;
370
+
371
+ height: 5px;
372
+
373
+ background: #ffffff;
374
+
375
+ -webkit-transition: all .5s;
376
+
377
+ transition: all .5s;
378
+
379
+ }
380
+
381
+
382
+
383
+ /* ホバーでバーの位置を変化 */
384
+
385
+ .global-nav p:nth-child(1):hover ~ .global-nav--bar {
386
+
387
+ left: 0;
388
+
389
+ }
390
+
391
+ .global-nav p:nth-child(2):hover ~ .global-nav--bar {
392
+
393
+ left: 20%;
394
+
395
+ }
396
+
397
+ .global-nav p:nth-child(3):hover ~ .global-nav--bar {
398
+
399
+ left: 40%;
400
+
401
+ }
402
+
403
+ .global-nav p:nth-child(4):hover ~ .global-nav--bar {
404
+
405
+ left: 60%;
406
+
407
+ }
408
+
409
+ .global-nav p:nth-child(5):hover ~ .global-nav--bar {
410
+
411
+ left: 80%;
412
+
413
+ }
414
+
415
+
416
+
417
+ .logo{
418
+
419
+ margin:0;
420
+
421
+ padding:0;
422
+
423
+ height:50px;
424
+
425
+ width:200px;
426
+
427
+ float:left;
428
+
429
+ }
430
+
431
+
432
+
433
+ /*========== メインコンテンツ基本設定 ==========*/
434
+
435
+ div.product {
436
+
437
+ margin:0;
438
+
439
+ padding:0;
440
+
441
+ width:965px;
442
+
443
+ display:inline-block;
444
+
445
+ font-size:83%;
446
+
447
+ }
448
+
449
+
450
+
451
+ /*========== メイン ==========*/
452
+
453
+ main#top{
454
+
455
+ background-color:#333333;
456
+
457
+ margin:0;
458
+
459
+ padding:80px 0 0 0;
460
+
461
+ }
462
+
463
+
464
+
465
+ /*========== メインコンテンツ ==========*/
466
+
467
+ div.top_img{
468
+
469
+ margin:0;
470
+
471
+ padding:0;
472
+
473
+ width:965px;
474
+
475
+ height:600px;
476
+
477
+ }
478
+
479
+
480
+
481
+ div#content_1 {
482
+
483
+ margin:0 30px 0 30px;
484
+
485
+ padding:60px 0 0 0;
486
+
487
+ width:905px;
488
+
489
+ height:500px;
490
+
491
+ }
492
+
493
+
494
+
495
+ div#content_2{
496
+
497
+ margin:0 30px 0 30px;
498
+
499
+ padding:60px 0 0 0;
500
+
501
+ width:905px;
502
+
503
+ height:500px;
504
+
505
+ }
506
+
507
+
508
+
509
+ div#content_3{
510
+
511
+ margin:0 30px 0 30px;
512
+
513
+ padding:60px 0 0 0;
514
+
515
+ width:905px;
516
+
517
+ height:500px;
518
+
519
+ }
520
+
521
+
522
+
523
+ div#content_4{
524
+
525
+ margin:0 30px 0 30px;
526
+
527
+ padding:60px 0 0 0;
528
+
529
+ width:905px;
530
+
531
+ height:500px;
532
+
533
+ }
534
+
535
+
536
+
537
+ div#content_5{
538
+
539
+ margin:0 30px 0 30px;
540
+
541
+ padding:60px 0 0 0;
542
+
543
+ width:905px;
544
+
545
+ height:500px;
546
+
547
+ }
548
+
549
+
550
+
551
+ /*========== 製品一覧 ==========*/
552
+
553
+
554
+
555
+ .item_box1 {
556
+
557
+ margin:0;
558
+
559
+ padding:0;
560
+
561
+ width:905px;
562
+
563
+ height:173px;
564
+
565
+ font-size:0;
566
+
567
+ }
568
+
569
+
570
+
571
+ .item_box2 {
572
+
573
+ margin:10px 0 0 0;
574
+
575
+ padding:0;
576
+
577
+ width:905px;
578
+
579
+ height:173px;
580
+
581
+ font-size:0;
582
+
583
+ }
584
+
585
+
586
+
587
+ .item1 {
588
+
589
+ margin:0 10px 0 0;
590
+
591
+ padding:0;
592
+
593
+ width:173px;
594
+
595
+ height:173px;
596
+
597
+ line-height:173px;
598
+
599
+ float: left;
600
+
601
+ }
602
+
603
+
604
+
605
+ .item2 {
606
+
607
+ margin:0;
608
+
609
+ padding:0;
610
+
611
+ width:173px;
612
+
613
+ height:173px;
614
+
615
+ line-height:173px;
616
+
617
+ float: left;
618
+
619
+ }
620
+
621
+
622
+
623
+ /*========== ```ここに言語を入力
624
+
625
+ コード
626
+
627
+ ```リンクボタン ==========*/
628
+
629
+ .button2 {
630
+
631
+ margin:15px 0 0 0;
632
+
633
+ padding:0px;
634
+
635
+ background-color: #C4C4C4;
636
+
637
+ color: #fff;
638
+
639
+ display: inline-block;
640
+
641
+ width:905px;
642
+
643
+ height:35px;
644
+
645
+ text-align: center;
646
+
647
+ text-decoration: none;
648
+
649
+ line-height:35px;
650
+
651
+ outline: none;
652
+
653
+ }
654
+
655
+
656
+
657
+ .button:hover{
658
+
659
+ background-color: #009933;
660
+
661
+ }
662
+
663
+
664
+
665
+ .button::before,
666
+
667
+ .button::after {
668
+
669
+ position: absolute;
670
+
671
+ z-index: -1;
672
+
673
+ display: block;
674
+
675
+ content: '';
676
+
677
+ }
678
+
679
+
680
+
681
+ .button,
682
+
683
+ .button::before,
684
+
685
+ .button::after{
686
+
687
+ -webkit-box-sizing: border-box;
688
+
689
+ -moz-box-sizing: border-box;
690
+
691
+ box-sizing: border-box;
692
+
693
+ -webkit-transition: all .3s;
694
+
695
+ transition: all .3s;
696
+
697
+ }
698
+
699
+
700
+
701
+ /*========== フッター ==========*/
702
+
703
+ #Footer {
704
+
705
+ clear: both;
706
+
707
+ min-width: 965px;
708
+
709
+ padding: 30px 0;
710
+
711
+ background-color: #e5e5e5;
712
+
713
+ overflow: hidden;
714
+
715
+ clear:both;
716
+
717
+ }
718
+
719
+
720
+
721
+ #Footer h2 {
722
+
723
+ margin: 0;
724
+
725
+ padding: 0;
726
+
727
+ border: none;
728
+
729
+ line-height: 0;
730
+
731
+ text-indent: -9999px;
732
+
733
+ }
734
+
735
+
736
+
737
+ #Footer ul {
738
+
739
+ width: 965px;
740
+
741
+ margin: 0 auto;
742
+
743
+ font-size: 67%;
744
+
745
+ }
746
+
747
+
748
+
749
+ #Footer li {
750
+
751
+ float: left;
752
+
753
+ padding: 0 10px;
754
+
755
+ border-left: solid 1px #bbb;
756
+
757
+ line-height: 1.5em;
758
+
759
+ vertical-align: top;
760
+
761
+ }
762
+
763
+ * html #Footer li {
764
+
765
+ position: relative;
766
+
767
+ z-index: 2;
768
+
769
+ }
770
+
771
+ *:first-child+html #Footer li {
772
+
773
+ position: relative;
774
+
775
+ z-index: 2;
776
+
777
+ }
778
+
779
+
780
+
781
+ #Footer li.FirstItem {
782
+
783
+ padding: 0 10px 0 0;
784
+
785
+ border-left: none;
786
+
787
+ }
788
+
789
+ #Footer li a:link,
790
+
791
+ #Footer li a:visited {
792
+
793
+ color: #333;
794
+
795
+ text-decoration: none;
796
+
797
+ }
798
+
27
- ###発生している問題・エラーメッセージ
799
+ #Footer li a:hover,
800
+
801
+ #Footer li a:active {
802
+
803
+ color: #b1000e;
804
+
805
+ text-decoration: underline;
806
+
807
+ }
808
+
809
+
810
+
811
+ #Footer p {
812
+
813
+ width: 965px;
814
+
815
+ margin: 0 auto;
816
+
817
+ font-size: 65%;
818
+
819
+ text-align: right;
820
+
821
+ line-height: 1.5em;
822
+
823
+ color: #333;
824
+
825
+ vertical-align: top;
826
+
827
+ }
828
+
829
+ * html #Footer p {margin: -1.5em auto 0;}
830
+
831
+ *:first-child+html #Footer p {margin: -1.5em auto 0;}