質問編集履歴

1

ハイライト化を行いました。誤表記を修正しました。ブラウザ確認表記を追加しました。文字化けfont-family部分を削除しました。

2018/06/07 07:47

投稿

n2018
n2018

スコア19

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  html、cssでメールフォームを作成しています。
2
2
 
3
- border-topが効く形に修正したいです。
3
+ #formtable内にあるtrにborder-topが効く形に修正したいです。
4
4
 
5
5
 
6
6
 
@@ -10,983 +10,955 @@
10
10
 
11
11
 
12
12
 
13
+ ```html
14
+
15
+ <!DOCTYPE html>
16
+
17
+ <html>
18
+
19
+ <head>
20
+
21
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
22
+
23
+ <meta http-equiv="Content-Style-Type" content="text/css">
24
+
25
+ <meta http-equiv="Pragma" content="no-cache">
26
+
27
+ <meta http-equiv="Cache-Control" content="no-cache, no-store, max-age=0">
28
+
29
+ <meta http-equiv="Expires" content="-1">
30
+
31
+ <link type="text/css" rel="stylesheet" href="form/css/common.css">
32
+
33
+ <link type="text/css" rel="stylesheet" href="form/css/form.css">
34
+
35
+
36
+
37
+ <script type="text/javascript">
38
+
39
+ if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('Android') > 0) {
40
+
41
+ document.write('<meta name="viewport" content="width=device-width,initial-scale=1">');
42
+
43
+ }else{
44
+
45
+ document.write('<meta name="viewport" content="width=760, maximum-scale=1, user-scalable=0">');
46
+
47
+ }
48
+
49
+ </script>
50
+
51
+ <title></title>
52
+
53
+ <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
54
+
55
+ </head>
56
+
57
+
58
+
59
+ <body>
60
+
61
+ <div id="container">
62
+
63
+ <div id="header">
64
+
65
+ <h2>投稿フォーム</h2>
66
+
67
+ </div>
68
+
69
+ <table id="formtable">
70
+
13
- ※一番下から二番目の
71
+ <tr>
72
+
73
+ <th class="f_th">投稿&nbsp;&nbsp;<span class="req">必須</span></th>
74
+
75
+ <td class="f_td">
76
+
77
+ <p>初めて投稿されますか?</p><input type="radio" name="radio" value="1" id="yes_"><label for="yes_" class="label">&nbsp;&nbsp;はい</label>
78
+
79
+ <input type="radio" name="radio" value="2" id="no_"><label for="no_" class="label">&nbsp;&nbsp;いいえ</label>
80
+
81
+ </td>
82
+
83
+ </tr>
84
+
85
+ </table>
86
+
87
+ </form>
88
+
89
+ </div>
90
+
91
+ </div>
92
+
93
+ </body>
94
+
95
+ </html>
96
+
97
+ ```
98
+
99
+
100
+
101
+ ```css
102
+
103
+ @charset "utf-8";
104
+
105
+
106
+
107
+ html {
108
+
109
+ background: #d6d4d6 url(../images/bgline.gif) scroll repeat-y center 0;
110
+
111
+ }
112
+
113
+
114
+
115
+ body {
116
+
117
+
118
+
119
+ font-family:'ƒqƒ‰ƒMƒmŠpƒS Pro W3','Hiragino Kaku Gothic Pro','ƒƒCƒŠƒI',Meiryo,'‚l‚r ‚oƒSƒVƒbƒN',sans-serif;
120
+
121
+ }
122
+
123
+
124
+
125
+ a {
126
+
127
+ color:#00685c;
128
+
129
+ }
130
+
131
+
132
+
133
+ a:hover {
134
+
135
+ color: #009987
136
+
137
+ }
138
+
139
+
140
+
141
+ .nhkscoop_link{
142
+
143
+ width: 100%;
144
+
145
+ text-align: center;
146
+
147
+ padding: 40px 0 40px 0;
148
+
149
+ margin-top: 40px;
150
+
151
+ border-top: 2px solid #d6d4d6;
152
+
153
+ }
154
+
155
+
156
+
157
+ @media screen and (min-width: 737px){
158
+
159
+
160
+
161
+ span.sp{display: none;}
162
+
163
+ span.pc-ie8{display: none;}
164
+
165
+
166
+
167
+ body{font-size:14px;
168
+
169
+ min-width: 760px;}
170
+
171
+
172
+
173
+
174
+
175
+ #container {
176
+
177
+ width:760px;
178
+
179
+ margin:0 auto;
180
+
181
+ min-width: 760px;
182
+
183
+ }
184
+
185
+
186
+
187
+ #header {
188
+
189
+ width:758px;
190
+
191
+ height:216px;
192
+
193
+ margin: 0 auto 5px auto;
194
+
195
+ background: url(../images/header.jpg) scroll no-repeat 0 0;
196
+
197
+ *background: url(../images/header.jpg) scroll no-repeat 1px 0;
198
+
199
+ position:relative;
200
+
201
+ }
202
+
203
+
204
+
205
+ #header h2 {
206
+
207
+ position:absolute;
208
+
209
+ font-size:15px;
210
+
211
+ letter-spacing:4px;
212
+
213
+ color:#ab272d;
214
+
215
+ }
216
+
217
+
218
+
219
+ #content {
220
+
221
+ width:646px;
222
+
223
+ margin: 0 auto;
224
+
225
+ }
226
+
227
+
228
+
229
+ #btnarea {
230
+
231
+ margin:18px auto;
232
+
233
+ font-weight:bold;
234
+
235
+ color:#ab272d;
236
+
237
+ font-size:12px;
238
+
239
+ text-align:center;
240
+
241
+ }
242
+
243
+
244
+
245
+ #btnarea #button {
246
+
247
+ margin:18px auto;
248
+
249
+ padding: 0;
250
+
251
+ width:230px;
252
+
253
+ height:42px;
254
+
255
+ font-size:15px;
256
+
257
+ letter-spacing:4px;
258
+
259
+ border: 3px solid #ab272d;
260
+
261
+ -moz-border-radius: 13px;
262
+
263
+ -webkit-border-radius: 13px;
264
+
265
+ -khtml-border-radius: 13px;
266
+
267
+ border-radius: 13px;
268
+
269
+ background-color:#f2eff2;
270
+
271
+ }
272
+
273
+ #btnarea #button a {
274
+
275
+ text-decoration:none;
276
+
277
+ padding-top:10px;
278
+
279
+ color:#ab272d;
280
+
281
+ width:236px;
282
+
283
+ height:38px;
284
+
285
+ display:block;
286
+
287
+ }
288
+
289
+
290
+
291
+ .nhkscoop_link img{
292
+
293
+ width: 645px;
294
+
295
+ height: 80px;
296
+
297
+ }
298
+
299
+
300
+
301
+
302
+
303
+ }
304
+
305
+
306
+
307
+ @media screen and (max-width: 736px){
308
+
309
+
310
+
311
+ span.pc-ie8{display: none;}
312
+
313
+
314
+
315
+ body{
316
+
317
+ width: 100%;
318
+
319
+ height: 100%;
320
+
321
+ min-width: 320px;
322
+
323
+ line-height: 1.5;
324
+
325
+ font-size: 16px;
326
+
327
+ }
328
+
329
+
330
+
331
+
332
+
333
+ #container {
334
+
335
+ width:100%;
336
+
337
+ height: 100%;
338
+
339
+ margin: 0 auto;
340
+
341
+ overflow: hidden;
342
+
343
+ }
344
+
345
+
346
+
347
+ #container img{width: 100%;}
348
+
349
+
350
+
351
+ #header {
352
+
353
+ width: 100%;
354
+
355
+ height:150px;
356
+
357
+ background: url(../images/header_sp.jpg) scroll no-repeat 0 0;
358
+
359
+ *background: url(../images/header_sp.jpg) scroll no-repeat 1px 0;
360
+
361
+ background-size: contain;
362
+
363
+ background-position: 50%;
364
+
365
+ position:relative;
366
+
367
+ border-top: solid 12px #ad262a;
368
+
369
+ }
370
+
371
+
372
+
373
+ #header h2 {
374
+
375
+ position:absolute;
376
+
377
+ font-size:20px;
378
+
379
+ letter-spacing:4px;
380
+
381
+ color:#ab272d;
382
+
383
+ }
384
+
385
+
386
+
387
+ #content {
388
+
389
+ width:95%;
390
+
391
+ margin:0 auto;
392
+
393
+ }
394
+
395
+
396
+
397
+ #btnarea {
398
+
399
+ margin:18px auto;
400
+
401
+ font-weight:bold;
402
+
403
+ color:#ab272d;
404
+
405
+ font-size:14px;
406
+
407
+ text-align:center;
408
+
409
+ }
410
+
411
+
412
+
413
+ #btnarea #button {
414
+
415
+ margin:18px auto;
416
+
417
+ padding: 0;
418
+
419
+ width:90%;
420
+
421
+ height:55px;
422
+
423
+ font-size:22px;
424
+
425
+ letter-spacing:4px;
426
+
427
+ border: 3px solid #ab272d;
428
+
429
+ -moz-border-radius: 13px;
430
+
431
+ -webkit-border-radius: 13px;
432
+
433
+ -khtml-border-radius: 13px;
434
+
435
+ border-radius: 13px;
436
+
437
+ background-color:#f2eff2;
438
+
439
+ }
440
+
441
+
442
+
443
+ #btnarea #button a {
444
+
445
+ text-decoration:none;
446
+
447
+ text-align: center;
448
+
449
+ padding-top:11px;
450
+
451
+ color:#ab272d;
452
+
453
+ width:100%;
454
+
455
+ height:38px;
456
+
457
+ display:block;
458
+
459
+ }
460
+
461
+
462
+
463
+ .nhkscoop_link img{
464
+
465
+ max-width: 390px;
466
+
467
+ max-height: 127px;
468
+
469
+ margin: 0 auto;
470
+
471
+ }
472
+
473
+
474
+
475
+ }
476
+
477
+ ```
478
+
479
+
480
+
481
+ ```css
482
+
483
+ @charset "utf-8";
484
+
485
+
486
+
487
+ #termsofuse {
488
+
489
+ background-color:#fff;
490
+
491
+ margin: 0 auto;
492
+
493
+ padding:15px;
494
+
495
+ line-height:200%;
496
+
497
+ border:2px dotted #d6d4d6;
498
+
499
+ -moz-border-radius: 10px;
500
+
501
+ -webkit-border-radius: 10px;
502
+
503
+ -khtml-border-radius: 10px;
504
+
505
+ border-radius: 10px;
506
+
507
+ letter-spacing:-0.2px;
508
+
509
+ font-size: 14px;
510
+
511
+ }
512
+
513
+
514
+
515
+ form {
516
+
517
+ margin:20px 0;
518
+
519
+ }
520
+
521
+
522
+
523
+ #formtable span.req {
524
+
525
+ background-color:#ab272d;
526
+
527
+ color:#fff;
528
+
529
+ padding: 0 5px;
530
+
531
+ }
532
+
533
+
534
+
535
+
536
+
537
+ #formtable td input {
538
+
539
+ width:170px;
540
+
541
+ height:40px;
542
+
543
+ /height:auto;
544
+
545
+ border:none;
546
+
547
+ margin: 1px 0;
548
+
549
+ font-size:16px;
550
+
551
+ -moz-border-radius: 5px;
552
+
553
+ -webkit-border-radius: 5px;
554
+
555
+ -khtml-border-radius: 5px;
556
+
557
+ border-radius: 5px;
558
+
559
+ }
560
+
561
+
562
+
563
+ #formtable td input.long {
564
+
565
+ width:400px;
566
+
567
+ }
568
+
569
+
570
+
571
+ #formtable td textarea {
572
+
573
+ width:400px;
574
+
575
+ height:160px;
576
+
577
+ border:none;
578
+
579
+ margin: 1px 0;
580
+
581
+ font-size:16px;
582
+
583
+ -moz-border-radius: 5px;
584
+
585
+ -webkit-border-radius: 5px;
586
+
587
+ -khtml-border-radius: 5px;
588
+
589
+ border-radius: 5px;
590
+
591
+ }
592
+
593
+
594
+
595
+ #formtable td select {
596
+
597
+ border:none;
598
+
599
+ margin: 7px 0;
600
+
601
+ font-size:16px;
602
+
603
+ -moz-border-radius: 5px;
604
+
605
+ -webkit-border-radius: 5px;
606
+
607
+ -khtml-border-radius: 5px;
608
+
609
+ border-radius: 5px;
610
+
611
+ }
612
+
613
+
614
+
615
+ #formtable div.note {
616
+
617
+ margin-left: 17px;
618
+
619
+ text-indent: -17px;
620
+
621
+ color:#ab272d;
622
+
623
+ }
624
+
625
+ #formtable ul.note {
626
+
627
+ color:#ab272d;
628
+
629
+ margin-left:17px;
630
+
631
+ font-size:12px;
632
+
633
+ }
634
+
635
+ #formtable ul.note li {
636
+
637
+ text-indent: -13px;
638
+
639
+ }
640
+
641
+
642
+
643
+ .valueDefault {color:#999;}
644
+
645
+ .isEnter {color:#000;}
646
+
647
+
648
+
649
+
650
+
651
+ label.error, label.error {
652
+
653
+ /* remove the next line when you have trouble in IE6 with labels in list */
654
+
655
+ color: red;
656
+
657
+ font-weight:bold;
658
+
659
+ display:block;
660
+
661
+ }
662
+
663
+
664
+
665
+ #formtable div.error { display: none; }
666
+
667
+ #formtable input.error { border: 2px solid red; }
668
+
669
+
670
+
671
+ input[type="radio"] {
672
+
673
+ display: none;
674
+
675
+ }
676
+
677
+
678
+
679
+ .label {
680
+
681
+ position: relative
682
+
683
+ padding: 2px 0 2px 40px;
684
+
685
+ margin-right:5px;
686
+
687
+ }
688
+
689
+
690
+
691
+ .label:after {
692
+
693
+ position: absolute; /* ボックスの位置を指定する */
694
+
695
+ content: ""; /* ボックスのコンテンツ */
696
+
697
+ display: block; /* ブロックレベル要素化する */
698
+
699
+ top: 50%; /* 上部から配置の基準位置を決める */
700
+
701
+ left: 15px; /* 左から配置の基準位置を決める */
702
+
703
+ margin-top: -10px; /* チェック枠の位置 */
704
+
705
+ width: 16px; /* ボックスの横幅を指定する */
706
+
707
+ height: 16px; /* ボックスの高さを指定する */
708
+
709
+ border: 3px solid #fff; /* ボックスの境界線を実線で指定する */
710
+
711
+ border-radius: 50%; /* ボックスの角丸を指定する */
712
+
713
+ vertical-align:middle;
714
+
715
+ }
716
+
717
+
718
+
719
+ .label:hover {
720
+
721
+ color: #ab272d;
722
+
723
+ }
724
+
725
+
726
+
727
+ input[type="radio"]:checked + .label:after {
728
+
729
+ background: #ab272d;
730
+
731
+ color: #ab272d; /* マウス選択時のフォント色を指定する */
732
+
733
+ }
734
+
735
+
736
+
737
+ input[type="radio"] {
738
+
739
+ vertical-align:middle;
740
+
741
+ }
742
+
743
+
744
+
745
+ @media screen and (min-width: 737px){
746
+
747
+
748
+
749
+ span.sp{display: none;}
750
+
751
+ span.pc-ie8{display: none;}
752
+
753
+
754
+
755
+ #header h2 {
756
+
757
+ left:175px;
758
+
759
+ top:160px;
760
+
761
+ }
762
+
763
+
764
+
765
+ #formtable td {
766
+
767
+ padding: 5px 0;
768
+
769
+ font-size: 12px;
770
+
771
+ }
772
+
773
+
774
+
775
+ #formtable td span.tel-text {
776
+
777
+ margin-left:4px;
778
+
779
+ }
780
+
781
+
782
+
783
+ #formtable th {
784
+
785
+ width:177px;
786
+
787
+ padding: 16px 0 5px 33px;
788
+
789
+ }
790
+
791
+
792
+
793
+ #formtable th.f_th {
794
+
795
+ padding: 20px 0 5px 33px;
796
+
797
+ }
798
+
799
+
800
+
801
+ }
802
+
803
+
804
+
805
+
806
+
807
+ @media screen and (max-width: 736px){
808
+
809
+
810
+
811
+ span.pc-ie8{display: none;}
812
+
813
+
814
+
815
+ #header h2 {
816
+
817
+ left:50%;
818
+
819
+ top:65%;
820
+
821
+ margin-left:-120px;
822
+
823
+ }
824
+
825
+
826
+
827
+ #formtable {
828
+
829
+ table-layout:fixed;}
830
+
831
+
832
+
833
+ #formtable td,th{
834
+
835
+ width: 100%;
836
+
837
+ display: block;
838
+
839
+ float:left;
840
+
841
+ }
842
+
843
+
844
+
845
+ .ui-datepicker-calendar th{
846
+
847
+ width: auto;
848
+
849
+ display: table-cell;
850
+
851
+ float: none;
852
+
853
+ }
854
+
855
+
856
+
857
+ #formtable td {
858
+
859
+ padding: 15px 0;
860
+
861
+ font-size: 14px;
862
+
863
+ }
864
+
865
+
866
+
867
+ #formtable td p{padding: 10px 0 0;}
868
+
869
+
870
+
871
+ #formtable td span.tel-text {
872
+
873
+ display: block;
874
+
875
+ padding-top: 10px;
876
+
877
+ }
878
+
879
+
880
+
881
+ #formtable td input {width:100%;}
882
+
883
+
884
+
885
+ #formtable td input.long {width:100%;}
886
+
887
+
888
+
889
+ #formtable td textarea {width:100%;}
890
+
891
+
892
+
893
+ #formtable th {
894
+
895
+ width:100%;
896
+
897
+ padding-top: 15px;
898
+
899
+ }
900
+
901
+
902
+
903
+ #formtable th.f_th {
904
+
905
+ width:39%;
906
+
907
+ }
908
+
909
+
910
+
911
+ #formtable td.f_td {
912
+
913
+ width:60%;
914
+
915
+ padding-top:0;
916
+
917
+ }
918
+
919
+
920
+
921
+ #formtable td.f_td p {
922
+
923
+ padding-top:15px;
924
+
925
+ margin-top:0;
926
+
927
+ }
928
+
929
+ }
930
+
931
+
14
932
 
15
933
 
16
934
 
17
935
  #formtable tr {
18
936
 
19
- border-bottom:2px solid #666;
937
+ border-top:2px solid #666;
20
938
 
21
939
  min-height:50px;
22
940
 
23
941
  }
24
942
 
25
- が効くように修正したいのです。
943
+
26
-
27
-
28
-
29
- ------html部分--------
944
+
30
-
31
-
32
-
33
- <!DOCTYPE html>
34
-
35
- <html>
36
-
37
- <head>
38
-
39
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
40
-
41
- <meta http-equiv="Content-Style-Type" content="text/css">
42
-
43
- <meta http-equiv="Pragma" content="no-cache">
44
-
45
- <meta http-equiv="Cache-Control" content="no-cache, no-store, max-age=0">
46
-
47
- <meta http-equiv="Expires" content="-1">
48
-
49
- <link type="text/css" rel="stylesheet" href="form/css/common.css">
50
-
51
- <link type="text/css" rel="stylesheet" href="form/css/form.css">
52
-
53
-
54
-
55
- <script type="text/javascript">
56
-
57
- if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('Android') > 0) {
58
-
59
- document.write('<meta name="viewport" content="width=device-width,initial-scale=1">');
60
-
61
- }else{
62
-
63
- document.write('<meta name="viewport" content="width=760, maximum-scale=1, user-scalable=0">');
64
-
65
- }
66
-
67
- </script>
68
-
69
- <title></title>
70
-
71
- <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
72
-
73
- </head>
74
-
75
-
76
-
77
- <body>
78
-
79
- <div id="container">
80
-
81
- <div id="header">
82
-
83
- <h2>投稿フォーム</h2>
84
-
85
- </div>
86
-
87
- <table id="formtable">
88
-
89
- <tr>
90
-
91
- <th class="f_th">投稿&nbsp;&nbsp;<span class="req">必須</span></th>
92
-
93
- <td class="f_td">
94
-
95
- <p>初めて投稿されますか?</p><input type="radio" name="radio" value="1" id="yes_"><label for="yes_" class="label">&nbsp;&nbsp;はい</label>
96
-
97
- <input type="radio" name="radio" value="2" id="no_"><label for="no_" class="label">&nbsp;&nbsp;いいえ</label>
98
-
99
- </td>
100
-
101
- </tr>
102
-
103
- </table>
945
+ #formtable th {
104
-
946
+
105
- </form>
947
+ font-weight:normal;
106
-
107
- </div>
948
+
108
-
109
- </div>
110
-
111
- </body>
112
-
113
- </html>
114
-
115
-
116
-
117
- ---------------
118
-
119
- -------css部分--------
120
-
121
- (form/css/common.css)
122
-
123
-
124
-
125
- @charset "utf-8";
126
-
127
-
128
-
129
- html {
130
-
131
- background: #d6d4d6 url(../images/bgline.gif) scroll repeat-y center 0;
132
-
133
- }
134
-
135
-
136
-
137
- body {
138
-
139
-
140
-
141
- font-family:'ƒqƒ‰ƒMƒmŠpƒS Pro W3','Hiragino Kaku Gothic Pro','ƒƒCƒŠƒI',Meiryo,'‚l‚r ‚oƒSƒVƒbƒN',sans-serif;
142
-
143
- }
144
-
145
-
146
-
147
- a {
148
-
149
- color:#00685c;
150
-
151
- }
152
-
153
-
154
-
155
- a:hover {
156
-
157
- color: #009987
158
-
159
- }
160
-
161
-
162
-
163
- .nhkscoop_link{
164
-
165
- width: 100%;
166
-
167
- text-align: center;
949
+ text-align:left;
168
-
169
- padding: 40px 0 40px 0;
950
+
170
-
171
- margin-top: 40px;
172
-
173
- border-top: 2px solid #d6d4d6;
174
-
175
- }
176
-
177
-
178
-
179
- @media screen and (min-width: 737px){
180
-
181
-
182
-
183
- span.sp{display: none;}
184
-
185
- span.pc-ie8{display: none;}
186
-
187
-
188
-
189
- body{font-size:14px;
190
-
191
- min-width: 760px;}
192
-
193
-
194
-
195
-
196
-
197
- #container {
198
-
199
- width:760px;
200
-
201
- margin:0 auto;
202
-
203
- min-width: 760px;
204
-
205
- }
206
-
207
-
208
-
209
- #header {
210
-
211
- width:758px;
212
-
213
- height:216px;
214
-
215
- margin: 0 auto 5px auto;
216
-
217
- background: url(../images/header.jpg) scroll no-repeat 0 0;
218
-
219
- *background: url(../images/header.jpg) scroll no-repeat 1px 0;
220
-
221
- position:relative;
222
-
223
- }
224
-
225
-
226
-
227
- #header h2 {
228
-
229
- position:absolute;
230
-
231
- font-size:15px;
232
-
233
- letter-spacing:4px;
951
+ vertical-align:top;
234
952
 
235
953
  color:#ab272d;
236
954
 
237
955
  }
238
956
 
239
-
240
-
241
- #content {
242
-
243
- width:646px;
244
-
245
- margin: 0 auto;
246
-
247
- }
248
-
249
-
250
-
251
- #btnarea {
252
-
253
- margin:18px auto;
254
-
255
- font-weight:bold;
256
-
257
- color:#ab272d;
258
-
259
- font-size:12px;
260
-
261
- text-align:center;
262
-
263
- }
264
-
265
-
266
-
267
- #btnarea #button {
268
-
269
- margin:18px auto;
270
-
271
- padding: 0;
272
-
273
- width:230px;
274
-
275
- height:42px;
276
-
277
- font-size:15px;
278
-
279
- letter-spacing:4px;
280
-
281
- border: 3px solid #ab272d;
282
-
283
- -moz-border-radius: 13px;
284
-
285
- -webkit-border-radius: 13px;
286
-
287
- -khtml-border-radius: 13px;
288
-
289
- border-radius: 13px;
290
-
291
- background-color:#f2eff2;
292
-
293
- }
294
-
295
- #btnarea #button a {
296
-
297
- text-decoration:none;
298
-
299
- padding-top:10px;
300
-
301
- color:#ab272d;
302
-
303
- width:236px;
304
-
305
- height:38px;
306
-
307
- display:block;
308
-
309
- }
310
-
311
-
312
-
313
- .nhkscoop_link img{
314
-
315
- width: 645px;
316
-
317
- height: 80px;
318
-
319
- }
320
-
321
-
322
-
323
-
324
-
325
- }
326
-
327
-
328
-
329
- @media screen and (max-width: 736px){
330
-
331
-
332
-
333
- span.pc-ie8{display: none;}
334
-
335
-
336
-
337
- body{
338
-
339
- width: 100%;
340
-
341
- height: 100%;
342
-
343
- min-width: 320px;
344
-
345
- line-height: 1.5;
346
-
347
- font-size: 16px;
348
-
349
- }
350
-
351
-
352
-
353
-
354
-
355
- #container {
356
-
357
- width:100%;
358
-
359
- height: 100%;
360
-
361
- margin: 0 auto;
362
-
363
- overflow: hidden;
364
-
365
- }
366
-
367
-
368
-
369
- #container img{width: 100%;}
370
-
371
-
372
-
373
- #header {
374
-
375
- width: 100%;
376
-
377
- height:150px;
378
-
379
- background: url(../images/header_sp.jpg) scroll no-repeat 0 0;
380
-
381
- *background: url(../images/header_sp.jpg) scroll no-repeat 1px 0;
382
-
383
- background-size: contain;
384
-
385
- background-position: 50%;
386
-
387
- position:relative;
388
-
389
- border-top: solid 12px #ad262a;
390
-
391
- }
392
-
393
-
394
-
395
- #header h2 {
396
-
397
- position:absolute;
398
-
399
- font-size:20px;
400
-
401
- letter-spacing:4px;
402
-
403
- color:#ab272d;
404
-
405
- }
406
-
407
-
408
-
409
- #content {
410
-
411
- width:95%;
412
-
413
- margin:0 auto;
414
-
415
- }
416
-
417
-
418
-
419
- #btnarea {
420
-
421
- margin:18px auto;
422
-
423
- font-weight:bold;
424
-
425
- color:#ab272d;
426
-
427
- font-size:14px;
428
-
429
- text-align:center;
430
-
431
- }
432
-
433
-
434
-
435
- #btnarea #button {
436
-
437
- margin:18px auto;
438
-
439
- padding: 0;
440
-
441
- width:90%;
442
-
443
- height:55px;
444
-
445
- font-size:22px;
446
-
447
- letter-spacing:4px;
448
-
449
- border: 3px solid #ab272d;
450
-
451
- -moz-border-radius: 13px;
452
-
453
- -webkit-border-radius: 13px;
454
-
455
- -khtml-border-radius: 13px;
456
-
457
- border-radius: 13px;
458
-
459
- background-color:#f2eff2;
460
-
461
- }
462
-
463
-
464
-
465
- #btnarea #button a {
466
-
467
- text-decoration:none;
468
-
469
- text-align: center;
470
-
471
- padding-top:11px;
472
-
473
- color:#ab272d;
474
-
475
- width:100%;
476
-
477
- height:38px;
478
-
479
- display:block;
480
-
481
- }
482
-
483
-
484
-
485
- .nhkscoop_link img{
486
-
487
- max-width: 390px;
488
-
489
- max-height: 127px;
490
-
491
- margin: 0 auto;
492
-
493
- }
494
-
495
-
496
-
497
- }
498
-
499
-
500
-
501
- ----------------------------
502
-
503
-
504
-
505
- (form/css/form.css)
506
-
507
-
508
-
509
- @charset "utf-8";
510
-
511
-
512
-
513
- #termsofuse {
514
-
515
- background-color:#fff;
516
-
517
- margin: 0 auto;
518
-
519
- padding:15px;
520
-
521
- line-height:200%;
522
-
523
- border:2px dotted #d6d4d6;
524
-
525
- -moz-border-radius: 10px;
526
-
527
- -webkit-border-radius: 10px;
528
-
529
- -khtml-border-radius: 10px;
530
-
531
- border-radius: 10px;
532
-
533
- letter-spacing:-0.2px;
534
-
535
- font-size: 14px;
536
-
537
- }
538
-
539
-
540
-
541
- form {
542
-
543
- margin:20px 0;
544
-
545
- }
546
-
547
-
548
-
549
- #formtable span.req {
550
-
551
- background-color:#ab272d;
552
-
553
- color:#fff;
554
-
555
- padding: 0 5px;
556
-
557
- }
558
-
559
-
560
-
561
-
562
-
563
- #formtable td input {
564
-
565
- width:170px;
566
-
567
- height:40px;
568
-
569
- /height:auto;
570
-
571
- border:none;
572
-
573
- margin: 1px 0;
574
-
575
- font-size:16px;
576
-
577
- -moz-border-radius: 5px;
578
-
579
- -webkit-border-radius: 5px;
580
-
581
- -khtml-border-radius: 5px;
582
-
583
- border-radius: 5px;
584
-
585
- }
586
-
587
-
588
-
589
- #formtable td input.long {
590
-
591
- width:400px;
592
-
593
- }
594
-
595
-
596
-
597
- #formtable td textarea {
598
-
599
- width:400px;
600
-
601
- height:160px;
602
-
603
- border:none;
604
-
605
- margin: 1px 0;
606
-
607
- font-size:16px;
608
-
609
- -moz-border-radius: 5px;
610
-
611
- -webkit-border-radius: 5px;
612
-
613
- -khtml-border-radius: 5px;
614
-
615
- border-radius: 5px;
616
-
617
- }
618
-
619
-
620
-
621
- #formtable td select {
622
-
623
- border:none;
624
-
625
- margin: 7px 0;
626
-
627
- font-size:16px;
628
-
629
- -moz-border-radius: 5px;
630
-
631
- -webkit-border-radius: 5px;
632
-
633
- -khtml-border-radius: 5px;
634
-
635
- border-radius: 5px;
636
-
637
- }
638
-
639
-
640
-
641
- #formtable div.note {
642
-
643
- margin-left: 17px;
644
-
645
- text-indent: -17px;
646
-
647
- color:#ab272d;
648
-
649
- }
650
-
651
- #formtable ul.note {
652
-
653
- color:#ab272d;
654
-
655
- margin-left:17px;
656
-
657
- font-size:12px;
658
-
659
- }
660
-
661
- #formtable ul.note li {
662
-
663
- text-indent: -13px;
664
-
665
- }
666
-
667
-
668
-
669
- .valueDefault {color:#999;}
670
-
671
- .isEnter {color:#000;}
672
-
673
-
674
-
675
-
676
-
677
- label.error, label.error {
678
-
679
- /* remove the next line when you have trouble in IE6 with labels in list */
680
-
681
- color: red;
682
-
683
- font-weight:bold;
684
-
685
- display:block;
686
-
687
- }
688
-
689
-
690
-
691
- #formtable div.error { display: none; }
692
-
693
- #formtable input.error { border: 2px solid red; }
694
-
695
-
696
-
697
- input[type="radio"] {
698
-
699
- display: none;
700
-
701
- }
702
-
703
-
704
-
705
- .label {
706
-
707
- position: relative
708
-
709
- padding: 2px 0 2px 40px;
710
-
711
- margin-right:5px;
712
-
713
- }
714
-
715
-
716
-
717
- .label:after {
718
-
719
- position: absolute; /* ボックスの位置を指定する */
720
-
721
- content: ""; /* ボックスのコンテンツ */
722
-
723
- display: block; /* ブロックレベル要素化する */
724
-
725
- top: 50%; /* 上部から配置の基準位置を決める */
726
-
727
- left: 15px; /* 左から配置の基準位置を決める */
728
-
729
- margin-top: -10px; /* チェック枠の位置 */
730
-
731
- width: 16px; /* ボックスの横幅を指定する */
732
-
733
- height: 16px; /* ボックスの高さを指定する */
734
-
735
- border: 3px solid #fff; /* ボックスの境界線を実線で指定する */
736
-
737
- border-radius: 50%; /* ボックスの角丸を指定する */
738
-
739
- vertical-align:middle;
740
-
741
- }
742
-
743
-
744
-
745
- .label:hover {
746
-
747
- color: #ab272d;
748
-
749
- }
750
-
751
-
752
-
753
- input[type="radio"]:checked + .label:after {
754
-
755
- background: #ab272d;
756
-
757
- color: #ab272d; /* マウス選択時のフォント色を指定する */
758
-
759
- }
760
-
761
-
762
-
763
- input[type="radio"] {
764
-
765
- vertical-align:middle;
766
-
767
- }
768
-
769
-
770
-
771
- @media screen and (min-width: 737px){
772
-
773
-
774
-
775
- span.sp{display: none;}
776
-
777
- span.pc-ie8{display: none;}
778
-
779
-
780
-
781
- #header h2 {
782
-
783
- left:175px;
784
-
785
- top:160px;
786
-
787
- }
788
-
789
-
790
-
791
- #formtable td {
792
-
793
- *border-top:2px solid #d6d4d6;
794
-
795
- padding: 5px 0;
796
-
797
- font-size: 12px;
798
-
799
- }
800
-
801
-
802
-
803
- #formtable td span.tel-text {
804
-
805
- margin-left:4px;
806
-
807
- }
808
-
809
-
810
-
811
- #formtable th {
812
-
813
- width:177px;
814
-
815
- padding: 16px 0 5px 33px;
816
-
817
- }
818
-
819
-
820
-
821
- #formtable th.f_th {
822
-
823
- padding: 20px 0 5px 33px;
824
-
825
- }
826
-
827
-
828
-
829
- }
830
-
831
-
832
-
833
-
834
-
835
- @media screen and (max-width: 736px){
836
-
837
-
838
-
839
- span.pc-ie8{display: none;}
840
-
841
-
842
-
843
- #header h2 {
844
-
845
- left:50%;
846
-
847
- top:65%;
848
-
849
- margin-left:-120px;
850
-
851
- }
852
-
853
-
854
-
855
- #formtable {
856
-
857
- table-layout:fixed;}
858
-
859
-
860
-
861
- #formtable td,th{
862
-
863
- width: 100%;
864
-
865
- display: block;
866
-
867
- float:left;
868
-
869
- }
870
-
871
-
872
-
873
- .ui-datepicker-calendar th{
874
-
875
- width: auto;
876
-
877
- display: table-cell;
878
-
879
- float: none;
880
-
881
- }
882
-
883
-
884
-
885
- #formtable td {
886
-
887
- padding: 15px 0;
888
-
889
- font-size: 14px;
890
-
891
- }
892
-
893
-
894
-
895
- #formtable td p{padding: 10px 0 0;}
896
-
897
-
898
-
899
- #formtable td span.tel-text {
900
-
901
- display: block;
902
-
903
- padding-top: 10px;
904
-
905
- }
906
-
907
-
908
-
909
- #formtable td input {width:100%;}
910
-
911
-
912
-
913
- #formtable td input.long {width:100%;}
914
-
915
-
916
-
917
- #formtable td textarea {width:100%;}
918
-
919
-
920
-
921
- #formtable th {
922
-
923
- width:100%;
924
-
925
- padding-top: 15px;
926
-
927
- }
928
-
929
-
930
-
931
- #formtable th.f_th {
932
-
933
- width:39%;
934
-
935
- }
936
-
937
-
938
-
939
- #formtable td.f_td {
940
-
941
- width:60%;
942
-
943
- padding-top:0;
944
-
945
- }
946
-
947
-
948
-
949
- #formtable td.f_td p {
950
-
951
- padding-top:15px;
952
-
953
- margin-top:0;
954
-
955
- }
956
-
957
- }
958
-
959
-
960
-
961
-
962
-
963
- #formtable tr {
964
-
965
- border-bottom:2px solid #666;
966
-
967
- min-height:50px;
968
-
969
- }
970
-
971
-
972
-
973
- #formtable th {
974
-
975
- font-weight:normal;
976
-
977
- text-align:left;
978
-
979
- vertical-align:top;
980
-
981
- color:#ab272d;
982
-
983
- }
984
-
985
- ---------------------
986
-
987
-
988
-
989
- trの記述や順位を入れ替えてみたり、importantを入れたりしてみましたがだめでした。
957
+ ```
958
+
959
+
960
+
961
+ trの記述や順位を入れ替えてみたり、tdのボーダーを消してみたり、importantを入れたりしてみましたがだめでした。
990
962
 
991
963
  使用環境はIMAC OSX バージョン10.9.5
992
964
 
@@ -994,4 +966,8 @@
994
966
 
995
967
 
996
968
 
969
+ ※Chromeでは効いていることになっているようで、原因が分かりませんでした。
970
+
971
+
972
+
997
973
  ご回答よろしくお願いいたします。