質問編集履歴

1

完成形とさせてるHTMLソースとCSSコードを追加しました。

2016/12/15 09:15

投稿

Asibe
Asibe

スコア14

test CHANGED
File without changes
test CHANGED
@@ -26,6 +26,774 @@
26
26
 
27
27
 
28
28
 
29
+ ※下記のソースコードが予定しているフォームの完成形です。
30
+
31
+
32
+
33
+ ```HTMLコード
34
+
35
+ <section id="contact">
36
+
37
+ <div id="contents cf">
38
+
39
+ <div class="content_Title">
40
+
41
+ <h1>基本情報</h1>
42
+
43
+ </div><!-- contents end -->
44
+
45
+
46
+
47
+ <div class="contents_in">
48
+
49
+ <div class="mod-lead">
50
+
51
+ <p>お客様の基本情報入力項目となります。必ずご記入ください。<br>
52
+
53
+ ※必ず個人様名でご登録をお願いいたします。お勤め先目でのご登録はご遠慮ください。
54
+
55
+ </p>
56
+
57
+ </div><!-- mod-lead end -->
58
+
59
+ </div><!--contents_in end -->
60
+
61
+
62
+
63
+ <section class="cf">
64
+
65
+ <form action="" method="post" name="contact_form">
66
+
67
+
68
+
69
+ <div class="mod-dl-table">
70
+
71
+ <h1>お問い合せ情報入力</h1>
72
+
73
+ <dl class="cf">
74
+
75
+ <dt>お問合せ項目<span class="notes nRed">必須</span></dt>
76
+
77
+ <dd>
78
+
79
+ <select name="pamphlet_selector_value">
80
+
81
+ <option value="">選択してください</option>
82
+
83
+ <option value="資料請求">資料請求</option>
84
+
85
+ <option value="お問い合せ">お問い合せ</option>
86
+
87
+ </select>
88
+
89
+ </dd>
90
+
91
+ </dl>
92
+
93
+
94
+
95
+
96
+
97
+ <dl class="cf">
98
+
99
+ <dt>氏名(漢字)<span class="notes nRed">必須</span></dt>
100
+
101
+ <dd>
102
+
103
+ <input type="text" name="pamphlet_name" class="pamphlet_name w-long validate[required]" id="pamphlet_name" placeholder="例)静岡 太郎 姓と名の間にスペースを入れてください。" autofocus>
104
+
105
+ </dd>
106
+
107
+ </dl>
108
+
109
+
110
+
111
+
112
+
113
+ <dl class="cf">
114
+
115
+ <dt>氏名(フリガナ)<span class="notes nRed">必須</span></dt>
116
+
117
+ <dd>
118
+
119
+ <input type="text" name="pamphlet_kana" class="pamphlet_kana w-long validate[required]" id="pamphlet_kana" placeholder="シズオカ タロウ 姓と名の間にスペースを入れてください。">
120
+
121
+ </dd>
122
+
123
+ </dl>
124
+
125
+
126
+
127
+ <dl class="cf">
128
+
129
+ <dt>電話番号(携帯可)<span class="notes nRed">任意</span></dt>
130
+
131
+ <dd>
132
+
133
+ <input type="text" name="pamphlet_tel1" class="pamphlet_tel w-short" id="pamphlet_tel1" placeholder="090" size="7"> &nbsp;-&nbsp; <input type="text" name="pamphlet_tel2" class="pamphlet_tel w-short" id="pamphlet_tel2" placeholder="1111" size="7"> &nbsp;-&nbsp; <input type="text" name="pamphlet_tel3" class="pamphlet_tel w-short" id="pamphlet_tel3" placeholder="2222" size="7">
134
+
135
+ </dd>
136
+
137
+ </dl>
138
+
139
+
140
+
141
+ <dl class="cf">
142
+
143
+ <dt>郵便番号<span class="notes nRed">必須</span></dt>
144
+
145
+ <dd>
146
+
147
+ <input type="text" name="pamphlet_address" class="pamphlet_address w-long" id="pamphlet_address" placeholder="例)1112222 ハイフン不要" onKeyUp="AjaxZip3.zip2addr(this,'','pamphlet_address1','pamphlet_address2');">
148
+
149
+
150
+
151
+ <input type="text" name="pamphlet_address1" class="pamphlet_address w-long" id="pamphlet_address">
152
+
153
+
154
+
155
+ <input type="text" name="pamphlet_address2" class="pamphlet_address w-long" id="pamphlet_address" placeholder="例)○○○ビル000">
156
+
157
+ </dd>
158
+
159
+ </dl>
160
+
161
+
162
+
163
+ <dl class="cf">
164
+
165
+ <dt>ご住所<span class="notes nRed">必須</span></dt>
166
+
167
+ <dd>
168
+
169
+ <input type="text" name="address" class="pamphlet_address w-long" id="input_Address" placeholder="郵便番号を入力すると住所が自動的に入力されます。">
170
+
171
+ </dd>
172
+
173
+ </dl>
174
+
175
+
176
+
177
+ <dl class="cf">
178
+
179
+ <dt>E-mail<span class="notes nRed">必須</span></dt>
180
+
181
+ <dd>
182
+
183
+ <input type="email" name="pamphlet_email" class="pamphlet_email w-long validate[custom[email]]" id="pamphlet_Email" placeholder="@example.co.jp">
184
+
185
+ <p class="onemore">確認のため、コピーせず再度入力してください。</p>
186
+
187
+ <input type="email" name="pamphlet_email" class="pamphlet_email w-long validate[custom[email]]" id="pamphlet_Email" placeholder="@example.co.jp">
188
+
189
+ </dd>
190
+
191
+ </dl>
192
+
193
+
194
+
195
+ <dl class="cf">
196
+
197
+ <dt>お問い合わせ内容<span class="notes nGray">任意</span></dt>
198
+
199
+ <dd>
200
+
201
+ <textarea rows="10" cols="30" name="pamphlet_contact" class="pamphlet_contact w-long" id="pamphlet_contact" placeholder="ご質問内容をお書きください"></textarea>
202
+
203
+ </dd>
204
+
205
+ </dl>
206
+
207
+ </div><!-- mod-dl-table end -->
208
+
209
+ </section>
210
+
211
+ <section class="Agreement cf">
212
+
213
+ <h3>個人情報保護方針</h3>
214
+
215
+ <div class="mod-scroll-box w-long">
216
+
217
+ <pre>
218
+
219
+ 制定日 : 平成28年01月01日
220
+
221
+ 改定日 : 平成28年01月01日
222
+
223
+ 会社名
224
+
225
+ 代表取締役名
226
+
227
+
228
+
229
+ 1.個人情報の取得、利用及び提供について
230
+
231
+ 当社で取り扱う個人情報及び従業員の個人情報について、適切な取得、利用及び提供を行い、特定した利用目的の達成に必要な範囲を超えて個人情報を取り扱うことはありません、利用目的を超えて個人情報を取り扱いを行う場合には、予めご本人の同意を得ます。
232
+
233
+
234
+
235
+ 2.個人情報に関する法令や指針、規範について
236
+
237
+
238
+
239
+ 個人情報に関する法令・国が定める指針その他の規範を守ります。
240
+
241
+
242
+
243
+ 3.個人情報の安全管理について
244
+
245
+
246
+
247
+ 個人情報への不正アクセスや、個人情報の漏洩、紛失、破壊、改ざんに対して、合理的な防止並びに処置を行います。
248
+
249
+
250
+
251
+ 4.個人情報に関する苦情および相談について
252
+
253
+
254
+
255
+ 個人情報に関する苦情および相談には、速やかに対処します。
256
+
257
+
258
+
259
+ 5.個人情報保護の取り組み
260
+
261
+
262
+
263
+ 個人情報の保護を適切に行うため、継続的にその取り組みを見直し、改善します。
264
+
265
+
266
+
267
+ 個人情報保護方針に関するお問い合わせ先
268
+
269
+
270
+
271
+ 会社名
272
+
273
+ ・個人情報保護責任者
274
+
275
+ ・TEL:000-111-2222
276
+
277
+ ・FAX:000-111-2222
278
+
279
+ ・Eメール:example.co.jp
280
+
281
+
282
+
283
+ 6.開示請求のお手続きについて
284
+
285
+
286
+
287
+ (1)開示等の請求の受付
288
+
289
+ 開示等の請求に関しては、メール又は直接来訪ください。
290
+
291
+
292
+
293
+ (2)本人確認方法
294
+
295
+ ・お電話:氏名・電話番号・メールアドレス
296
+
297
+ ・ご来訪:免許書・その他パスポートなど
298
+
299
+
300
+
301
+ (4)手数料
302
+
303
+ 無料。
304
+
305
+
306
+
307
+ 7.お問合せ先・苦情の申出先
308
+
309
+
310
+
311
+ 会社名
312
+
313
+ ・顧客相談窓口責任者
314
+
315
+ ・Eメール : example.co.jp
316
+
317
+
318
+
319
+ </pre>
320
+
321
+ </div>
322
+
323
+
324
+
325
+ <div class="mod-center">
326
+
327
+ <input type="checkbox" name="check_agreement" id="check_agreement"><label for="check_agreement">上記の内容を確認し、同意します</label>
328
+
329
+ </div>
330
+
331
+
332
+
333
+ <div class="mod-center">
334
+
335
+ <input class="mod-btn" name="confirm" value="内容の確認へ" type="submit">
336
+
337
+ </div>
338
+
339
+ </section>
340
+
341
+ ```
342
+
343
+
344
+
345
+ ```CSSソース
346
+
347
+ @charset "utf-8";
348
+
349
+
350
+
351
+ body{
352
+
353
+ color: #333;
354
+
355
+ font-size: 14px;
356
+
357
+ line-height: 1.5;
358
+
359
+ letter-spacing: 0.2em;
360
+
361
+ }
362
+
363
+
364
+
365
+ .cf::before,
366
+
367
+ .cf::after{
368
+
369
+ content:"";
370
+
371
+ display: table;
372
+
373
+ }
374
+
375
+
376
+
377
+ .cf::after{
378
+
379
+ clear: both;
380
+
381
+ }
382
+
383
+
384
+
385
+ .cf{
386
+
387
+ zoom: 1;
388
+
389
+ }
390
+
391
+
392
+
393
+ section#contact{
394
+
395
+ position: relative;
396
+
397
+ width: 100%;
398
+
399
+ max-width: 1200px;
400
+
401
+ min-height: 550px;
402
+
403
+ height: auto;
404
+
405
+ }
406
+
407
+
408
+
409
+ #contents{
410
+
411
+ overflow: hidden;
412
+
413
+ margin: 0 auto;
414
+
415
+ zoom: 1;
416
+
417
+ max-width: 1000px;
418
+
419
+ }
420
+
421
+
422
+
423
+ #contents > .content_Title{
424
+
425
+ position: relative;
426
+
427
+ }
428
+
429
+
430
+
431
+ #contents > .content_Title > h1{
432
+
433
+ padding: 10px;
434
+
435
+ letter-spacing: 0.2em;
436
+
437
+ }
438
+
439
+
440
+
441
+ .mod-lead{
442
+
443
+ margin-bottom: 25px;
444
+
445
+ padding: 10px;
446
+
447
+ line-height: 1.5;
448
+
449
+ letter-spacing: 0.2em;
450
+
451
+ font-size: 14px;
452
+
453
+ font-size:115%;
454
+
455
+ font-weight: 300;
456
+
457
+ }
458
+
459
+
460
+
461
+ .mod-dl-table h1{
462
+
463
+ padding-left: 5%;
464
+
465
+ border-left: 6px solid #00a0e9;
466
+
467
+ }
468
+
469
+
470
+
471
+ .mod-dl-table dl{
472
+
473
+ margin-bottom: 25px;
474
+
475
+ border-bottom: 1px dotted #333;
476
+
477
+ }
478
+
479
+
480
+
481
+ .mod-dl-table dl dt{
482
+
483
+ padding-top: 15px;
484
+
485
+ padding-bottom: 15px;
486
+
487
+ font-weight: 700;
488
+
489
+ }
490
+
491
+
492
+
493
+ .mod-dl-table dl dd{
494
+
495
+ margin-left: auto;
496
+
497
+ margin-right: auto;
498
+
499
+ padding-top: 20px;
500
+
501
+ padding-bottom: 25px;
502
+
503
+ width: 100%;
504
+
505
+ text-align: center;
506
+
507
+ }
508
+
509
+
510
+
511
+ span.notes{
512
+
513
+ margin-left: 25px;
514
+
515
+ padding: 2px 6px;
516
+
517
+ background-color:#00a0e9;
518
+
519
+ color: #fff;
520
+
521
+ font-size: 72%;
522
+
523
+ letter-spacing: 0.2em;
524
+
525
+ }
526
+
527
+
528
+
529
+ span.nGray{
530
+
531
+ color:#333;
532
+
533
+ background-color:#eee;
534
+
535
+ }
536
+
537
+
538
+
539
+ .w-long{
540
+
541
+ width:100%;
542
+
543
+ }
544
+
545
+
546
+
547
+ .w-short{
548
+
549
+ margin: 0 auto;
550
+
551
+ width: 20%;
552
+
553
+ text-align: center;
554
+
555
+ }
556
+
557
+
558
+
559
+ .pamphlet_name,
560
+
561
+ .pamphlet_kana,
562
+
563
+ .pamphlet_tel,
564
+
565
+ .pamphlet_address,
566
+
567
+ .pamphlet_email,
568
+
569
+ .pamphlet_contact,
570
+
571
+ textarea{
572
+
573
+ vertical-align: middle;
574
+
575
+ padding: 7px;
576
+
577
+ -moz-box-sizing: border-box;
578
+
579
+ box-sizing: border-box;
580
+
581
+ border:1px solid #cfcfcf;
582
+
583
+ border-radius: 5px;
584
+
585
+ }
586
+
587
+
588
+
589
+ .onemore{
590
+
591
+ padding: 10px;
592
+
593
+ font-size: 15%;
594
+
595
+ }
596
+
597
+
598
+
599
+ input,
600
+
601
+ textarea{
602
+
603
+ font-size: 100%;
604
+
605
+ outline: none;
606
+
607
+ }
608
+
609
+
610
+
611
+ select:focus,
612
+
613
+ input:focus,
614
+
615
+ textarea:focus{
616
+
617
+ background-color:#ccffcc;
618
+
619
+ }
620
+
621
+
622
+
623
+ ::-webkit-input-placeholder {
624
+
625
+ font-size: 20%;
626
+
627
+ padding-left: 5px;
628
+
629
+ letter-spacing: 0.2em;
630
+
631
+ }
632
+
633
+
634
+
635
+ ::-moz-placeholder {
636
+
637
+ font-size: 20%;
638
+
639
+ padding-left: 5px;
640
+
641
+ letter-spacing: 0.2em;
642
+
643
+ }
644
+
645
+
646
+
647
+ :-ms-input-placeholder {
648
+
649
+ font-size: 20%;
650
+
651
+ padding-left: 5px;
652
+
653
+ letter-spacing: 0.2em;
654
+
655
+ }
656
+
657
+
658
+
659
+ section.Agreement{
660
+
661
+ position: relative;
662
+
663
+ width: 100%;
664
+
665
+ }
666
+
667
+
668
+
669
+ section.Agreement > h3{
670
+
671
+ margin-bottom: 25px;
672
+
673
+ padding: 15px;
674
+
675
+ font-size: 129%;
676
+
677
+ font-weight: 700;
678
+
679
+ text-align: center;
680
+
681
+ border-bottom: 3px solid #00a0e9;
682
+
683
+ }
684
+
685
+
686
+
687
+ .mod-scroll-box{
688
+
689
+ overflow-y: scroll;
690
+
691
+ overflow-x: hidden;
692
+
693
+ margin-bottom: 50px;
694
+
695
+ padding: 15px;
696
+
697
+ border: 1px solid #cfcfcf;
698
+
699
+ height: 140px;
700
+
701
+ }
702
+
703
+
704
+
705
+ pre{
706
+
707
+ font-size: 100%;
708
+
709
+ white-space: pre-wrap;
710
+
711
+ word-wrap: break-word;
712
+
713
+ }
714
+
715
+
716
+
717
+ .mod-center{
718
+
719
+ margin-bottom: 25px;
720
+
721
+ padding: 10px;
722
+
723
+ text-align: center;
724
+
725
+ }
726
+
727
+
728
+
729
+ input.mod-btn,
730
+
731
+ input.mod-btn-mini{
732
+
733
+ display: inline-block;
734
+
735
+ padding: 25px 45px;
736
+
737
+ border: none;
738
+
739
+ border-radius: 5px;
740
+
741
+ background-color: #00a0e9;
742
+
743
+ color: #fff;
744
+
745
+ font-size: 95%;
746
+
747
+ letter-spacing: 0.2em;
748
+
749
+ white-space: nowrap;
750
+
751
+ }
752
+
753
+
754
+
755
+ @media only screen and (min-width:768px){
756
+
757
+ .mod-dl-table dl{
758
+
759
+ display: table;
760
+
761
+ margin: 0 auto;
762
+
763
+ width: 95%;
764
+
765
+ border-bottom: none;
766
+
767
+ }
768
+
769
+
770
+
771
+ .mod-dl-table dl dt{
772
+
773
+ display: table-cell;
774
+
775
+ padding-top: 22px;
776
+
777
+ padding-left: 10px;
778
+
779
+ width: 30%;
780
+
781
+ vertical-align: middle;
782
+
783
+ }
784
+
785
+
786
+
787
+ .mod-dl-table dl dd{
788
+
789
+ width: 100%;
790
+
791
+ }
792
+
793
+ }
794
+
795
+ ```
796
+
29
797
  ##補足情報
30
798
 
31
799
  補足というか個人的な疑問なのですが、上記画像内のタグ入力欄で入力されたコードをそのまま保存しショートコードとして出しているだけなので、普通に自分で作成したフォームコードでも問題ないのかどうか疑問に思っています。