質問編集履歴

2

css追記

2016/09/20 02:49

投稿

fuzno
fuzno

スコア14

test CHANGED
File without changes
test CHANGED
@@ -20,8 +20,6 @@
20
20
 
21
21
  検証ツールでの変更は、反映されます。
22
22
 
23
-
24
-
25
23
  cssでスタイルを指定、
26
24
 
27
25
  jQueryで動きを実装してあります。
@@ -30,15 +28,233 @@
30
28
 
31
29
 
32
30
 
33
-
34
-
35
-
36
-
37
- ▽問題の部分は、こちらです。
31
+ よろしくおねがいいたします。
32
+
33
+
34
+
35
+ ---
36
+
37
+
38
+
39
+ 11:35html追記
40
+
41
+ 11:40css追記
42
+
43
+
44
+
45
+ 実際のコードです。
38
46
 
39
47
  ```html
40
48
 
41
- <p class="pagetop"><a href="#wrap">▲ページトップ</a></p>
49
+ <!doctype html>
50
+
51
+ <html>
52
+
53
+ <head>
54
+
55
+ <meta charset="UTF-8">
56
+
57
+ <link rel="shortcut icon" href="image/dtpfavicon.ico">
58
+
59
+ <link rel="stylesheet" href="reset.css" type="text/css">
60
+
61
+ <link rel="stylesheet" href="style.css" type="text/css">
62
+
63
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
64
+
65
+
66
+
67
+ <title>DTP・WEBデザイナー養成科</title>
68
+
69
+ </head>
70
+
71
+ <body>
72
+
73
+ <header>
74
+
75
+ <p class="ordinal">へこ山県内の求職者の方へ</p>
76
+
77
+ <p class="logo">DTP・WEBデザイナー養成科開講のお知らせ</p>
78
+
79
+ <p>平成28年2月2日(火)〜平成28年8月1日(月)<br>
80
+
81
+ ☆土日祝は休み<br>
82
+
83
+ 9:30〜16:00<br>
84
+
85
+ 定員:20名 <br>
86
+
87
+ 受講料:無料<br>
88
+
89
+ 申込締め切り:平成28年1月7日<br>
90
+
91
+ 委託元:ポリテクセンターへこ山(<a href="#nyushobasho">地図</a>)<br>
92
+
93
+ <a href="#c9" class="button">申し込む</a></p>
94
+
95
+ </header>
96
+
97
+ <ul id="menu">
98
+
99
+ <li class="yoko"><a href="#c1">目的</a></li>
100
+
101
+ <li class="yoko"><a href="#c2">受講場所</a></li>
102
+
103
+ <li class="yoko"><a href="#c8">チラシ</a></li>
104
+
105
+ </ul>
106
+
107
+ <div id="ham-menu">
108
+
109
+ <ul>
110
+
111
+ <li class="ham"><a class="ham" href="#c1">目的</a></li>
112
+
113
+ <li class="ham"><a class="ham" href="#c2">受講場所</a></li>
114
+
115
+ <li class="ham"><a class="ham" href="#c8">チラシ</a></li>
116
+
117
+ </ul>
118
+
119
+ </div>
120
+
121
+ <div id="menu-background"></div>
122
+
123
+ <div id="c1">
124
+
125
+ <h3>目的</h3><br>
126
+
127
+ <p class="bun">
128
+
129
+ へこ山県は、地方では珍しく、印刷業の盛んな土地です。<br>
130
+
131
+ 日々高まる業界からの要請に応じ、<br>
132
+
133
+ 即戦力となるデザイナーを育成するコースとしてこの度、本コースが設置されました。<br>
134
+
135
+ <br>
136
+
137
+ H28年 就職実績 web:30% 印刷業界:40% その他:10%
138
+
139
+ <h5>☆応募は、求職者の方に限らせていただきます。</h5><br></p>
140
+
141
+ </div><!--c1-->
142
+
143
+ <div id="c2">
144
+
145
+ <h3>受講場所</h3>
146
+
147
+ <div id="jyukobasho" class="clearfix">
148
+
149
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3282.2143247068298!2d133.9221955152309!3d34.649289880447746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x355407b879131d31%3A0x14e589272f3f5c97!2z5Lit5Zu944OH44K244Kk44Oz5bCC6ZaA5a2m5qChIO-9ie-9kOmkqA!5e0!3m2!1sja!2sjp!4v1468304771086" width="400" height="300" frameborder="0" style="border:0" allowfullscreen class="chizu"></iframe>
150
+
151
+ <p class="bun">デザイン専門学校</p>
152
+
153
+ <h5><a href="https://www.google.co.jp/maps/place/%E3%80%92700-0861+%E5%B2%A1%E5%B1%B1%E7%9C%8C%E5%B2%A1%E5%B1%B1%E5%B8%82%E5%8C%97%E5%8C%BA%E6%B8%85%E8%BC%9D%E6%A9%8B%EF%BC%93%E4%B8%81%E7%9B%AE%EF%BC%94%E2%88%92%EF%BC%91%EF%BC%90/@34.6492964,133.9221906,17z/data=!3m1!4b1!4m5!3m4!1s0x355407b87912afc3:0x9b07d8db37806728!8m2!3d34.6492964!4d133.9243793">へこ山県へこ山市北区清輝橋3-4-10</a></h5>
154
+
155
+ </div><!--c9-->
156
+
157
+ <footer>
158
+
159
+ <p class="pagetop"><a href="#wrap">▲ページトップ</a></p>
160
+
161
+ <div id="c10">
162
+
163
+ <h3>お問い合わせ先</h3>
164
+
165
+ <p class="bun">
166
+
167
+ 独立行政法人高齢・障害・求職者雇用支援機構へこ山支部<br>
168
+
169
+ へこ山職業能力開発促進センター(ポリテクセンターへこ山)<br>
170
+
171
+ 〒1000-0951 へこ山県へこ山市北区田中980(<a href="#nyushobasho">地図</a>)<br>
172
+
173
+ TEL:086-246-2530<br>
174
+
175
+ FAX:086-241-1909<br>
176
+
177
+ 訓練科 事業主係<br>
178
+
179
+ http://www3.jeed.or.jp/hecoyamasan/poly<br>
180
+
181
+ <a href="banner.html"><img src="image/taro.gif"></a>
182
+
183
+ <h5>&copy;fuzno rensyu</h5>
184
+
185
+ </p>
186
+
187
+ </div><!--c10-->
188
+
189
+
190
+
191
+ </footer>
192
+
193
+
194
+
195
+ <script>
196
+
197
+ $(document).ready(function() {
198
+
199
+ var pagetop = $('.pagetop');
200
+
201
+ $(window).scroll(function () {
202
+
203
+ if ($(this).scrollTop() > 100) {
204
+
205
+ pagetop.fadeIn();
206
+
207
+ } else {
208
+
209
+ pagetop.fadeOut();
210
+
211
+ }
212
+
213
+ });
214
+
215
+ pagetop.click(function () {
216
+
217
+ $('body, html').animate({ scrollTop: 0 }, 500);
218
+
219
+ return false;
220
+
221
+ });
222
+
223
+ });
224
+
225
+ </script>
226
+
227
+ <script>
228
+
229
+ $(function() {
230
+
231
+ var offsetY = -10;
232
+
233
+ var time = 500;
234
+
235
+ $('a[href^=#]').click(function() {
236
+
237
+ var target = $(this.hash);
238
+
239
+ if (!target.length) return ;
240
+
241
+ var targetY = target.offset().top+offsetY;
242
+
243
+ $('html,body').animate({scrollTop: targetY}, time, 'swing');
244
+
245
+ window.history.pushState(null, null, this.hash);
246
+
247
+ return false;
248
+
249
+ });
250
+
251
+ });
252
+
253
+ </script><!--http://phiary.me/jquery-page-link-smooth-scroll/#post-h2-id-1-->
254
+
255
+ </body>
256
+
257
+ </html>
42
258
 
43
259
  ```
44
260
 
@@ -46,6 +262,304 @@
46
262
 
47
263
  ```css
48
264
 
265
+ @charset "UTF-8";
266
+
267
+ /* CSS Document */
268
+
269
+
270
+
271
+ @import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
272
+
273
+ body{
274
+
275
+ color:#fff;
276
+
277
+ background-color:#dbbe92;
278
+
279
+ font-family: 'Noto Sans JP', sans-serif;
280
+
281
+ font-size:14px;
282
+
283
+ font-weight:100;
284
+
285
+ }
286
+
287
+
288
+
289
+ @media screen and (max-width: 900px) {
290
+
291
+ .a { display: block; }
292
+
293
+ .b { display: block; }
294
+
295
+ .c { display: block; }
296
+
297
+ }
298
+
299
+
300
+
301
+ @media screen and (min-width: 791px) {
302
+
303
+ #menu-background{ display: none; }
304
+
305
+ #ham-menu{ display: none; }
306
+
307
+ }
308
+
309
+
310
+
311
+ @media screen and (max-width: 790px) {
312
+
313
+ #menu-background{ display: block; }
314
+
315
+ #ham-menu{ display: block; }
316
+
317
+ #menu { display: none; }
318
+
319
+ }
320
+
321
+
322
+
323
+ @media screen and (max-width: 479px) {
324
+
325
+ .chizu { display: none; }
326
+
327
+ #menu { display: none; }
328
+
329
+ }
330
+
331
+
332
+
333
+ header{
334
+
335
+ padding-top:20px;
336
+
337
+ background-image:url(image/DTPweb_03.png);
338
+
339
+ background-repeat: no-repeat;
340
+
341
+ background-attachment: fixed;
342
+
343
+ background-position:120% 10%;
344
+
345
+ background-color:#e0ae9c;
346
+
347
+ }
348
+
349
+
350
+
351
+
352
+
353
+ p{
354
+
355
+ margin:30px;
356
+
357
+ font-weight:100;
358
+
359
+ }
360
+
361
+
362
+
363
+ p.logo{
364
+
365
+ margin-top:-20px;
366
+
367
+ height:100px;
368
+
369
+ background-image:url(image/kaiko_03.png);
370
+
371
+ background-repeat: no-repeat;
372
+
373
+ text-indent:-9999px;
374
+
375
+ }
376
+
377
+
378
+
379
+ p.ordinal{
380
+
381
+ padding-left:5px;
382
+
383
+ padding-bottom:0;
384
+
385
+ text-align:left;
386
+
387
+ }
388
+
389
+
390
+
391
+ .bun{
392
+
393
+ margin:30px;
394
+
395
+ font-weight:100;
396
+
397
+ }
398
+
399
+
400
+
401
+ div{margin:0;
402
+
403
+ padding:0;
404
+
405
+ }
406
+
407
+
408
+
409
+ .button {
410
+
411
+ padding:10px 20px 10px 20px;
412
+
413
+ margin:-10px 0px 20px 30px;
414
+
415
+ border:solid 1px #ffffff;
416
+
417
+ border-radius:4px;
418
+
419
+ width:auto;
420
+
421
+ display: inline-block;
422
+
423
+ background-color:transparent;
424
+
425
+ position: left;
426
+
427
+ font-weight:100;
428
+
429
+ }
430
+
431
+
432
+
433
+ .button:hover {
434
+
435
+ border:solid 1px #d81d40;
436
+
437
+ background-color: #d81d40;
438
+
439
+ }
440
+
441
+
442
+
443
+ .button,
444
+
445
+ .button::before,
446
+
447
+ .button::after {
448
+
449
+ -webkit-box-sizing: border-box;
450
+
451
+ -moz-box-sizing: border-box;
452
+
453
+ box-sizing: border-box;
454
+
455
+ -webkit-transition: all .3s;
456
+
457
+ transition: all .3s;
458
+
459
+ }
460
+
461
+
462
+
463
+ div.c1{
464
+
465
+ background-color:#0C6;
466
+
467
+ }
468
+
469
+
470
+
471
+ ul{
472
+
473
+ margin:0 0 0 10px;
474
+
475
+ padding:0 0 20px 0;
476
+
477
+ }
478
+
479
+
480
+
481
+ li.yoko{
482
+
483
+ display:inline;
484
+
485
+ margin:0px;
486
+
487
+ padding:10px 20px;
488
+
489
+ border-right: solid 1px #fff;
490
+
491
+ font-weight:100;
492
+
493
+ }
494
+
495
+
496
+
497
+ a:link{
498
+
499
+ text-decoration:none;
500
+
501
+ color:#fff;
502
+
503
+ font-weight:100;
504
+
505
+ }
506
+
507
+
508
+
509
+ a:hover{
510
+
511
+ color:#ffffff;
512
+
513
+ font-weight:100;
514
+
515
+ background-color: #d81d40;
516
+
517
+ }
518
+
519
+
520
+
521
+ a:visited{
522
+
523
+ font-weight:100;
524
+
525
+ color:#fff;
526
+
527
+ }
528
+
529
+
530
+
531
+ a,
532
+
533
+ a::before,
534
+
535
+ a::after {
536
+
537
+ -webkit-box-sizing: border-box;
538
+
539
+ -moz-box-sizing: border-box;
540
+
541
+ box-sizing: border-box;
542
+
543
+ -webkit-transition: all .3s;
544
+
545
+ transition: all .3s;
546
+
547
+ }
548
+
549
+ a.button{
550
+
551
+ padding:10px;
552
+
553
+ text-align:left;
554
+
555
+ margin:20px 0 40px 0px;
556
+
557
+ }
558
+
559
+
560
+
561
+
562
+
49
563
  .pagetop {
50
564
 
51
565
  display: none;
@@ -108,306 +622,330 @@
108
622
 
109
623
  }
110
624
 
625
+
626
+
627
+ footer{
628
+
629
+ background-color:#8b6b3d;
630
+
631
+ margin:0px;
632
+
633
+ padding:20px 0px 20px 0px;}
634
+
635
+
636
+
637
+ #c1{
638
+
639
+ margin:10px 0 0 0;
640
+
641
+ padding:20px 0 10px 30px;
642
+
643
+ }
644
+
645
+
646
+
647
+ #c2{
648
+
649
+ margin:10px 0 0 0;
650
+
651
+ padding:20px 0 10px 30px;
652
+
653
+ }
654
+
655
+
656
+
657
+ #c3{
658
+
659
+ margin:10px 0 0 0;
660
+
661
+ padding:20px 0 10px 30px;
662
+
663
+ }
664
+
665
+
666
+
667
+ #c4{
668
+
669
+ margin:10px 0 0 0;
670
+
671
+ padding:20px 0 10px 30px;
672
+
673
+ }
674
+
675
+
676
+
677
+ #c5{
678
+
679
+ margin:10px 0 0 0;
680
+
681
+ padding:20px 0 10px 30px;
682
+
683
+ }
684
+
685
+
686
+
687
+ #c6{
688
+
689
+ margin:10px 0 0 0;
690
+
691
+ padding:20px 0 10px 30px;
692
+
693
+ }
694
+
695
+
696
+
697
+ #c6c{
698
+
699
+ margin:10px 0 0 0;
700
+
701
+ padding:20px 0 10px 30px;
702
+
703
+ }
704
+
705
+
706
+
707
+ #c7{
708
+
709
+ margin:10px 0 0 0;
710
+
711
+ padding:20px 0 10px 30px;
712
+
713
+
714
+
715
+ }
716
+
717
+
718
+
719
+ #c8{
720
+
721
+ margin:10px 0 0 0;
722
+
723
+ padding:20px 0 10px 30px;
724
+
725
+ }
726
+
727
+
728
+
729
+
730
+
731
+ #c9{
732
+
733
+ margin:10px 0 0 0;
734
+
735
+ padding:20px 0 10px 30px;
736
+
737
+ }
738
+
739
+
740
+
741
+ #c10{
742
+
743
+ margin:10px 0 0 0;
744
+
745
+ padding:20px 0 10px 30px;
746
+
747
+ background-color:transparent;
748
+
749
+ }
750
+
751
+
752
+
753
+ h3{
754
+
755
+ font-size:18px;
756
+
757
+ padding:10px 20px 10px 20px;
758
+
759
+ margin:0px 0px 0px 0px;
760
+
761
+ border:solid 1px #ffffff;
762
+
763
+ width:auto;
764
+
765
+ display: inline-block;
766
+
767
+ background-color:transparent;
768
+
769
+ position: left;
770
+
771
+ font-weight:300;
772
+
773
+ }
774
+
775
+
776
+
777
+ h4{
778
+
779
+ font-weight:400;
780
+
781
+ }
782
+
783
+
784
+
785
+ h5{
786
+
787
+ font-size:12px;
788
+
789
+ padding:0 0 0 30px;
790
+
791
+ font-weight:100;
792
+
793
+ }
794
+
795
+
796
+
797
+ .chizu{
798
+
799
+ float:left;
800
+
801
+ margin-right:10px;
802
+
803
+ }
804
+
805
+ #ham-menu {
806
+
807
+ background-color: #fff;
808
+
809
+ box-sizing: border-box;
810
+
811
+ height: 100%;
812
+
813
+ padding: 10px 40px;
814
+
815
+ position: fixed;
816
+
817
+ right: -300px;
818
+
819
+ top: 0;
820
+
821
+ transition: transform 0.3s linear 0s;
822
+
823
+ width: 300px;
824
+
825
+ z-index: 1000;
826
+
827
+ }
828
+
829
+
830
+
831
+ #ham-menu::before {
832
+
833
+ background-color: #fff;
834
+
835
+ border-radius: 0 0 0 10px;
836
+
837
+ color: #333;
838
+
839
+ content: "≡";
840
+
841
+ display: block;
842
+
843
+ font-size: 50px;
844
+
845
+ height: 50px;
846
+
847
+ line-height: 50px;
848
+
849
+ right: 100%;
850
+
851
+ text-align: center;
852
+
853
+ top: 0;
854
+
855
+ width: 50px;
856
+
857
+ }
858
+
859
+
860
+
861
+ #menu-background {
862
+
863
+ background-color: #333;
864
+
865
+ display: block;
866
+
867
+ height: 100%;
868
+
869
+ opacity: 0;
870
+
871
+ position: fixed;
872
+
873
+ right:0px;
874
+
875
+ width: 100%;
876
+
877
+ z-index: -1;
878
+
879
+ }
880
+
881
+
882
+
883
+ #ham-menu:hover {
884
+
885
+ transform: translate(-300px);}
886
+
887
+
888
+
889
+ #ham-menu:hover + #menu-background {
890
+
891
+ opacity: 0.5;
892
+
893
+ z-index: 999;}
894
+
895
+
896
+
897
+ .ham a{
898
+
899
+ color:#000;
900
+
901
+ margin:0px;
902
+
903
+ font-weight:100;
904
+
905
+ }
906
+
907
+
908
+
909
+ a.ham:hover{
910
+
911
+ color:#000;
912
+
913
+ font-weight:100;
914
+
915
+ background-color:transparent;
916
+
917
+ letter-spacing: 5px;
918
+
919
+ }
920
+
921
+
922
+
923
+ a.ham:visited{
924
+
925
+ color:#000;
926
+
927
+ font-weight:100;
928
+
929
+ }
930
+
931
+
932
+
933
+ a,
934
+
935
+ a::before,
936
+
937
+ a::after {
938
+
939
+ -webkit-box-sizing: border-box;
940
+
941
+ -moz-box-sizing: border-box;
942
+
943
+ box-sizing: border-box;
944
+
945
+ -webkit-transition: all .3s;
946
+
947
+ transition: all .3s;
948
+
949
+ }
950
+
111
951
  ```
112
-
113
-
114
-
115
- ```javascript
116
-
117
- <script>
118
-
119
- $(document).ready(function() {
120
-
121
- var pagetop = $('.pagetop');
122
-
123
- $(window).scroll(function () {
124
-
125
- if ($(this).scrollTop() > 100) {
126
-
127
- pagetop.fadeIn();
128
-
129
- } else {
130
-
131
- pagetop.fadeOut();
132
-
133
- }
134
-
135
- });
136
-
137
- pagetop.click(function () {
138
-
139
- $('body, html').animate({ scrollTop: 0 }, 500);
140
-
141
- return false;
142
-
143
- });
144
-
145
- });
146
-
147
- </script>
148
-
149
-
150
-
151
- ```
152
-
153
-
154
-
155
- よろしくおねがいいたします。
156
-
157
-
158
-
159
- ---
160
-
161
-
162
-
163
- 11:35実際のコードです。
164
-
165
-
166
-
167
- ```html
168
-
169
- <!doctype html>
170
-
171
- <html>
172
-
173
- <head>
174
-
175
- <meta charset="UTF-8">
176
-
177
- <link rel="shortcut icon" href="image/dtpfavicon.ico">
178
-
179
- <link rel="stylesheet" href="reset.css" type="text/css">
180
-
181
- <link rel="stylesheet" href="style.css" type="text/css">
182
-
183
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
184
-
185
-
186
-
187
- <title>DTP・WEBデザイナー養成科</title>
188
-
189
- </head>
190
-
191
- <body>
192
-
193
- <header>
194
-
195
- <p class="ordinal">へこ山県内の求職者の方へ</p>
196
-
197
- <p class="logo">DTP・WEBデザイナー養成科開講のお知らせ</p>
198
-
199
- <p>平成28年2月2日(火)〜平成28年8月1日(月)<br>
200
-
201
- ☆土日祝は休み<br>
202
-
203
- 9:30〜16:00<br>
204
-
205
- 定員:20名 <br>
206
-
207
- 受講料:無料<br>
208
-
209
- 申込締め切り:平成28年1月7日<br>
210
-
211
- 委託元:ポリテクセンターへこ山(<a href="#nyushobasho">地図</a>)<br>
212
-
213
- <a href="#c9" class="button">申し込む</a></p>
214
-
215
- </header>
216
-
217
- <ul id="menu">
218
-
219
- <li class="yoko"><a href="#c1">目的</a></li>
220
-
221
- <li class="yoko"><a href="#c2">受講場所</a></li>
222
-
223
- <li class="yoko"><a href="#c3">訓練受講までの流れ</a></li>
224
-
225
- <li class="yoko"><a href="#c4">入所選考</a></li>
226
-
227
- <li class="yoko"><a href="#c5">カリキュラム</a></li>
228
-
229
- <li class="yoko"><a href="#c6">諸手当</a></li>
230
-
231
- <li class="yoko"><a href="#c8">チラシ</a></li>
232
-
233
- </ul>
234
-
235
- <div id="ham-menu">
236
-
237
- <ul>
238
-
239
- <li class="ham"><a class="ham" href="#c1">目的</a></li>
240
-
241
- <li class="ham"><a class="ham" href="#c2">受講場所</a></li>
242
-
243
- <li class="ham"><a class="ham" href="#c3">訓練受講までの流れ</a></li>
244
-
245
- <li class="ham"><a class="ham" href="#c4">入所選考</a></li>
246
-
247
- <li class="ham"><a class="ham" href="#c5">カリキュラム</a></li>
248
-
249
- <li class="ham"><a class="ham" href="#c6">諸手当</a></li>
250
-
251
- <li class="ham"><a class="ham" href="#c8">チラシ</a></li>
252
-
253
- </ul>
254
-
255
- </div>
256
-
257
- <div id="menu-background"></div>
258
-
259
- <div id="c1">
260
-
261
- <h3>目的</h3><br>
262
-
263
- <p class="bun">
264
-
265
- へこ山県は、地方では珍しく、印刷業の盛んな土地です。<br>
266
-
267
- 日々高まる業界からの要請に応じ、<br>
268
-
269
- 即戦力となるデザイナーを育成するコースとしてこの度、本コースが設置されました。<br>
270
-
271
- <br>
272
-
273
- H28年 就職実績 web:30% 印刷業界:40% その他:10%
274
-
275
- <h5>☆応募は、求職者の方に限らせていただきます。</h5><br></p>
276
-
277
- </div><!--c1-->
278
-
279
- <div id="c2">
280
-
281
- <h3>受講場所</h3>
282
-
283
- <div id="jyukobasho" class="clearfix">
284
-
285
- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3282.2143247068298!2d133.9221955152309!3d34.649289880447746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x355407b879131d31%3A0x14e589272f3f5c97!2z5Lit5Zu944OH44K244Kk44Oz5bCC6ZaA5a2m5qChIO-9ie-9kOmkqA!5e0!3m2!1sja!2sjp!4v1468304771086" width="400" height="300" frameborder="0" style="border:0" allowfullscreen class="chizu"></iframe>
286
-
287
- <p class="bun">中国デザイン専門学校 ip館</p>
288
-
289
- <h5><a href="https://www.google.co.jp/maps/place/%E3%80%92700-0861+%E5%B2%A1%E5%B1%B1%E7%9C%8C%E5%B2%A1%E5%B1%B1%E5%B8%82%E5%8C%97%E5%8C%BA%E6%B8%85%E8%BC%9D%E6%A9%8B%EF%BC%93%E4%B8%81%E7%9B%AE%EF%BC%94%E2%88%92%EF%BC%91%EF%BC%90/@34.6492964,133.9221906,17z/data=!3m1!4b1!4m5!3m4!1s0x355407b87912afc3:0x9b07d8db37806728!8m2!3d34.6492964!4d133.9243793">へこ山県へこ山市北区清輝橋3-4-10</a></h5>
290
-
291
- </div><!--c9-->
292
-
293
- <footer>
294
-
295
- <p class="pagetop"><a href="#wrap">▲ページトップ</a></p>
296
-
297
- <div id="c10">
298
-
299
- <h3>お問い合わせ先</h3>
300
-
301
- <p class="bun">
302
-
303
- 独立行政法人高齢・障害・求職者雇用支援機構へこ山支部<br>
304
-
305
- へこ山職業能力開発促進センター(ポリテクセンターへこ山)<br>
306
-
307
- 〒1000-0951 へこ山県へこ山市北区田中980(<a href="#nyushobasho">地図</a>)<br>
308
-
309
- TEL:086-246-2530<br>
310
-
311
- FAX:086-241-1909<br>
312
-
313
- 訓練科 事業主係<br>
314
-
315
- http://www3.jeed.or.jp/hecoyamasan/poly<br>
316
-
317
- <a href="banner.html"><img src="image/taro.gif"></a>
318
-
319
- <h5>&copy;fuzno rensyu</h5>
320
-
321
- </p>
322
-
323
- </div><!--c10-->
324
-
325
-
326
-
327
- </footer>
328
-
329
-
330
-
331
- <script>
332
-
333
- $(document).ready(function() {
334
-
335
- var pagetop = $('.pagetop');
336
-
337
- $(window).scroll(function () {
338
-
339
- if ($(this).scrollTop() > 100) {
340
-
341
- pagetop.fadeIn();
342
-
343
- } else {
344
-
345
- pagetop.fadeOut();
346
-
347
- }
348
-
349
- });
350
-
351
- pagetop.click(function () {
352
-
353
- $('body, html').animate({ scrollTop: 0 }, 500);
354
-
355
- return false;
356
-
357
- });
358
-
359
- });
360
-
361
- </script>
362
-
363
- <script>
364
-
365
- $(function() {
366
-
367
- // スクロールのオフセット値
368
-
369
- var offsetY = -10;
370
-
371
- // スクロールにかかる時間
372
-
373
- var time = 500;
374
-
375
-
376
-
377
- // ページ内リンクのみを取得
378
-
379
- $('a[href^=#]').click(function() {
380
-
381
- // 移動先となる要素を取得
382
-
383
- var target = $(this.hash);
384
-
385
- if (!target.length) return ;
386
-
387
- // 移動先となる値
388
-
389
- var targetY = target.offset().top+offsetY;
390
-
391
- // スクロールアニメーション
392
-
393
- $('html,body').animate({scrollTop: targetY}, time, 'swing');
394
-
395
- // ハッシュ書き換えとく
396
-
397
- window.history.pushState(null, null, this.hash);
398
-
399
- // デフォルトの処理はキャンセル
400
-
401
- return false;
402
-
403
- });
404
-
405
- });
406
-
407
- </script><!--http://phiary.me/jquery-page-link-smooth-scroll/#post-h2-id-1-->
408
-
409
- </body>
410
-
411
- </html>
412
-
413
- ```

1

html追記

2016/09/20 02:49

投稿

fuzno
fuzno

スコア14

test CHANGED
File without changes
test CHANGED
@@ -153,3 +153,261 @@
153
153
 
154
154
 
155
155
  よろしくおねがいいたします。
156
+
157
+
158
+
159
+ ---
160
+
161
+
162
+
163
+ 11:35実際のコードです。
164
+
165
+
166
+
167
+ ```html
168
+
169
+ <!doctype html>
170
+
171
+ <html>
172
+
173
+ <head>
174
+
175
+ <meta charset="UTF-8">
176
+
177
+ <link rel="shortcut icon" href="image/dtpfavicon.ico">
178
+
179
+ <link rel="stylesheet" href="reset.css" type="text/css">
180
+
181
+ <link rel="stylesheet" href="style.css" type="text/css">
182
+
183
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
184
+
185
+
186
+
187
+ <title>DTP・WEBデザイナー養成科</title>
188
+
189
+ </head>
190
+
191
+ <body>
192
+
193
+ <header>
194
+
195
+ <p class="ordinal">へこ山県内の求職者の方へ</p>
196
+
197
+ <p class="logo">DTP・WEBデザイナー養成科開講のお知らせ</p>
198
+
199
+ <p>平成28年2月2日(火)〜平成28年8月1日(月)<br>
200
+
201
+ ☆土日祝は休み<br>
202
+
203
+ 9:30〜16:00<br>
204
+
205
+ 定員:20名 <br>
206
+
207
+ 受講料:無料<br>
208
+
209
+ 申込締め切り:平成28年1月7日<br>
210
+
211
+ 委託元:ポリテクセンターへこ山(<a href="#nyushobasho">地図</a>)<br>
212
+
213
+ <a href="#c9" class="button">申し込む</a></p>
214
+
215
+ </header>
216
+
217
+ <ul id="menu">
218
+
219
+ <li class="yoko"><a href="#c1">目的</a></li>
220
+
221
+ <li class="yoko"><a href="#c2">受講場所</a></li>
222
+
223
+ <li class="yoko"><a href="#c3">訓練受講までの流れ</a></li>
224
+
225
+ <li class="yoko"><a href="#c4">入所選考</a></li>
226
+
227
+ <li class="yoko"><a href="#c5">カリキュラム</a></li>
228
+
229
+ <li class="yoko"><a href="#c6">諸手当</a></li>
230
+
231
+ <li class="yoko"><a href="#c8">チラシ</a></li>
232
+
233
+ </ul>
234
+
235
+ <div id="ham-menu">
236
+
237
+ <ul>
238
+
239
+ <li class="ham"><a class="ham" href="#c1">目的</a></li>
240
+
241
+ <li class="ham"><a class="ham" href="#c2">受講場所</a></li>
242
+
243
+ <li class="ham"><a class="ham" href="#c3">訓練受講までの流れ</a></li>
244
+
245
+ <li class="ham"><a class="ham" href="#c4">入所選考</a></li>
246
+
247
+ <li class="ham"><a class="ham" href="#c5">カリキュラム</a></li>
248
+
249
+ <li class="ham"><a class="ham" href="#c6">諸手当</a></li>
250
+
251
+ <li class="ham"><a class="ham" href="#c8">チラシ</a></li>
252
+
253
+ </ul>
254
+
255
+ </div>
256
+
257
+ <div id="menu-background"></div>
258
+
259
+ <div id="c1">
260
+
261
+ <h3>目的</h3><br>
262
+
263
+ <p class="bun">
264
+
265
+ へこ山県は、地方では珍しく、印刷業の盛んな土地です。<br>
266
+
267
+ 日々高まる業界からの要請に応じ、<br>
268
+
269
+ 即戦力となるデザイナーを育成するコースとしてこの度、本コースが設置されました。<br>
270
+
271
+ <br>
272
+
273
+ H28年 就職実績 web:30% 印刷業界:40% その他:10%
274
+
275
+ <h5>☆応募は、求職者の方に限らせていただきます。</h5><br></p>
276
+
277
+ </div><!--c1-->
278
+
279
+ <div id="c2">
280
+
281
+ <h3>受講場所</h3>
282
+
283
+ <div id="jyukobasho" class="clearfix">
284
+
285
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3282.2143247068298!2d133.9221955152309!3d34.649289880447746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x355407b879131d31%3A0x14e589272f3f5c97!2z5Lit5Zu944OH44K244Kk44Oz5bCC6ZaA5a2m5qChIO-9ie-9kOmkqA!5e0!3m2!1sja!2sjp!4v1468304771086" width="400" height="300" frameborder="0" style="border:0" allowfullscreen class="chizu"></iframe>
286
+
287
+ <p class="bun">中国デザイン専門学校 ip館</p>
288
+
289
+ <h5><a href="https://www.google.co.jp/maps/place/%E3%80%92700-0861+%E5%B2%A1%E5%B1%B1%E7%9C%8C%E5%B2%A1%E5%B1%B1%E5%B8%82%E5%8C%97%E5%8C%BA%E6%B8%85%E8%BC%9D%E6%A9%8B%EF%BC%93%E4%B8%81%E7%9B%AE%EF%BC%94%E2%88%92%EF%BC%91%EF%BC%90/@34.6492964,133.9221906,17z/data=!3m1!4b1!4m5!3m4!1s0x355407b87912afc3:0x9b07d8db37806728!8m2!3d34.6492964!4d133.9243793">へこ山県へこ山市北区清輝橋3-4-10</a></h5>
290
+
291
+ </div><!--c9-->
292
+
293
+ <footer>
294
+
295
+ <p class="pagetop"><a href="#wrap">▲ページトップ</a></p>
296
+
297
+ <div id="c10">
298
+
299
+ <h3>お問い合わせ先</h3>
300
+
301
+ <p class="bun">
302
+
303
+ 独立行政法人高齢・障害・求職者雇用支援機構へこ山支部<br>
304
+
305
+ へこ山職業能力開発促進センター(ポリテクセンターへこ山)<br>
306
+
307
+ 〒1000-0951 へこ山県へこ山市北区田中980(<a href="#nyushobasho">地図</a>)<br>
308
+
309
+ TEL:086-246-2530<br>
310
+
311
+ FAX:086-241-1909<br>
312
+
313
+ 訓練科 事業主係<br>
314
+
315
+ http://www3.jeed.or.jp/hecoyamasan/poly<br>
316
+
317
+ <a href="banner.html"><img src="image/taro.gif"></a>
318
+
319
+ <h5>&copy;fuzno rensyu</h5>
320
+
321
+ </p>
322
+
323
+ </div><!--c10-->
324
+
325
+
326
+
327
+ </footer>
328
+
329
+
330
+
331
+ <script>
332
+
333
+ $(document).ready(function() {
334
+
335
+ var pagetop = $('.pagetop');
336
+
337
+ $(window).scroll(function () {
338
+
339
+ if ($(this).scrollTop() > 100) {
340
+
341
+ pagetop.fadeIn();
342
+
343
+ } else {
344
+
345
+ pagetop.fadeOut();
346
+
347
+ }
348
+
349
+ });
350
+
351
+ pagetop.click(function () {
352
+
353
+ $('body, html').animate({ scrollTop: 0 }, 500);
354
+
355
+ return false;
356
+
357
+ });
358
+
359
+ });
360
+
361
+ </script>
362
+
363
+ <script>
364
+
365
+ $(function() {
366
+
367
+ // スクロールのオフセット値
368
+
369
+ var offsetY = -10;
370
+
371
+ // スクロールにかかる時間
372
+
373
+ var time = 500;
374
+
375
+
376
+
377
+ // ページ内リンクのみを取得
378
+
379
+ $('a[href^=#]').click(function() {
380
+
381
+ // 移動先となる要素を取得
382
+
383
+ var target = $(this.hash);
384
+
385
+ if (!target.length) return ;
386
+
387
+ // 移動先となる値
388
+
389
+ var targetY = target.offset().top+offsetY;
390
+
391
+ // スクロールアニメーション
392
+
393
+ $('html,body').animate({scrollTop: targetY}, time, 'swing');
394
+
395
+ // ハッシュ書き換えとく
396
+
397
+ window.history.pushState(null, null, this.hash);
398
+
399
+ // デフォルトの処理はキャンセル
400
+
401
+ return false;
402
+
403
+ });
404
+
405
+ });
406
+
407
+ </script><!--http://phiary.me/jquery-page-link-smooth-scroll/#post-h2-id-1-->
408
+
409
+ </body>
410
+
411
+ </html>
412
+
413
+ ```