質問編集履歴

1

CSSの掲示が抜かっておりました。

2020/06/20 01:07

投稿

atlana
atlana

スコア0

test CHANGED
File without changes
test CHANGED
@@ -10,8 +10,6 @@
10
10
 
11
11
 
12
12
 
13
-
14
-
15
13
  ### 発生している問題・エラーメッセージ
16
14
 
17
15
 
@@ -68,7 +66,9 @@
68
66
 
69
67
  <div class="site">
70
68
 
71
- <h1><a href="form_noble.html">TEST TABLE レスポンシブサイト</a></h1>
69
+ <h1><a href="form_noble.html">
70
+
71
+ TEST TABLE レスポンシブサイト</a></h1>
72
72
 
73
73
  </div>
74
74
 
@@ -100,17 +100,11 @@
100
100
 
101
101
  </div>
102
102
 
103
-
104
-
105
- <div class="box7">
106
-
107
-
108
-
109
- <article class="database">
103
+ <div class="box7"><article class="database">
110
-
111
-
112
-
104
+
105
+
106
+
113
- <h2>給与 計算フォーム</h2>
107
+ <h2>給与 計算フォーム</h2>
114
108
 
115
109
 
116
110
 
@@ -130,11 +124,11 @@
130
124
 
131
125
  <option value="800">5時間</option></select></td></tr></tbody></table>
132
126
 
133
- <br>
127
+ <br>
134
-
128
+
135
- <p><input type="button" value="計算する" onClick="kyuuyo_keisan()" style="width:100%;padding:10px;font-size:20px;text-align:center"></p>
129
+ <p><input type="button" value="計算する" onClick="kyuuyo_keisan()" style="width:100%;padding:10px;font-size:20px;text-align:center"></p>
136
-
130
+
137
- <p><input type="reset" value="リセット" onClick="kyuuyo_reset()" style="width:100%;padding:10px;font-size:20px;;text-align: center"></p>
131
+ <p><input type="reset" value="リセット" onClick="kyuuyo_reset()" style="width:100%;padding:10px;font-size:20px;;text-align: center"></p>
138
132
 
139
133
 
140
134
 
@@ -172,15 +166,9 @@
172
166
 
173
167
  </article>
174
168
 
175
- </div>
176
-
177
- <div class="box5">
178
-
179
- <div class="box5-inner">
169
+ </div><div class="box5"><div class="box5-inner">
180
-
181
- <div class="copyright">
170
+
182
-
183
- <p>&copy; >TEST TABLE レスポンシブサイト</p></div>
171
+ <div class="copyright"><p>&copy; >TEST TABLE レスポンシブサイト</p></div>
184
172
 
185
173
  </div></div></body></html>
186
174
 
@@ -194,9 +182,1047 @@
194
182
 
195
183
 
196
184
 
197
-
198
-
199
-
185
+ @charset "UTF-8";
186
+
187
+
188
+
189
+ body
190
+
191
+ {margin:0;
192
+
193
+ font-family:'メイリオ','Hiragino Kaku Gothic Pro', sans-serif}
194
+
195
+
196
+
197
+
198
+
199
+ /* サイト名 */
200
+
201
+
202
+
203
+ .site h1 a{color:#666;
204
+
205
+ text-decoration: none}
206
+
207
+
208
+
209
+ .site h1{margin:0;
210
+
211
+ font-size:20px}
212
+
213
+
214
+
215
+
216
+
217
+ /* BOX A の下に罫線を挿入 (コンテンツページのみ) */
218
+
219
+
220
+
221
+
222
+
223
+ .contents .boxA
224
+
225
+ {border-bottom: solid 1px #dddddd}
226
+
227
+
228
+
229
+ /* BOX5をバーの形にする */
230
+
231
+
232
+
233
+ .box5
234
+
235
+ {padding-top:15px;
236
+
237
+ padding-bottom:15px;
238
+
239
+ background-color: #dddddd}
240
+
241
+
242
+
243
+ /* ボックスの左右 */
244
+
245
+ .boxA, .box5,.box7{padding-left:15px;
246
+
247
+ padding-right:15px}
248
+
249
+
250
+
251
+ /* ボックスの上下 */
252
+
253
+
254
+
255
+ .boxA{padding-top:20px;
256
+
257
+ padding-bottom:10px}
258
+
259
+
260
+
261
+ .box7{padding-top: 25px;
262
+
263
+ padding-bottom:25px}
264
+
265
+
266
+
267
+
268
+
269
+ /* ### 359px 以下 ### */
270
+
271
+
272
+
273
+ @media (max-width:359px){
274
+
275
+
276
+
277
+ /* サイト名 */
278
+
279
+
280
+
281
+ .site img{width:225px;
282
+
283
+ height:auto}
284
+
285
+
286
+
287
+ }
288
+
289
+ /* BOX Aの背景 */
290
+
291
+
292
+
293
+ .boxA{background-color: #fcf9ed}
294
+
295
+
296
+
297
+
298
+
299
+ /* ### 599px 以下 ### */
300
+
301
+
302
+
303
+
304
+
305
+ @media (max-width:599px){
306
+
307
+
308
+
309
+
310
+
311
+ /* ナビゲーション */
312
+
313
+
314
+
315
+
316
+
317
+ .menu li a
318
+
319
+ {padding: 10px 7px;
320
+
321
+ font-size: 11px}
322
+
323
+
324
+
325
+
326
+
327
+ /* キャッチコピー */
328
+
329
+
330
+
331
+
332
+
333
+ .catch{padding:5px 10px;
334
+
335
+ font-size:12px}
336
+
337
+
338
+
339
+ /* 記事 */
340
+
341
+ .content h1{font-size: 26px}
342
+
343
+
344
+
345
+
346
+
347
+ .content .lead{font-size: 16px}
348
+
349
+
350
+
351
+ }
352
+
353
+
354
+
355
+ /* ### 767px 以下 ### */
356
+
357
+
358
+
359
+
360
+
361
+ @media (max-width:767px){
362
+
363
+
364
+
365
+
366
+
367
+ /* トグルボタン */
368
+
369
+
370
+
371
+
372
+
373
+ #menubtn{padding:6px 12px;
374
+
375
+ border:solid 1px #aaaaaa;
376
+
377
+ border-radius:5px;
378
+
379
+ background-color: #ffffff;
380
+
381
+ position: absolute;
382
+
383
+ top:20px;
384
+
385
+ right:15px;
386
+
387
+ cursor: pointer}
388
+
389
+
390
+
391
+
392
+
393
+ #menubtn:hover{background-color: #dddddd}
394
+
395
+
396
+
397
+ #menubtn:focus{outline:none}
398
+
399
+
400
+
401
+ #menubtn i{color:#888888;
402
+
403
+ font-size:18px}
404
+
405
+
406
+
407
+ #menubtn span{display:inline-block;
408
+
409
+ text-indent: -9999px}
410
+
411
+
412
+
413
+
414
+
415
+ /* ナビゲーションメニュー (縦並び) */
416
+
417
+
418
+
419
+
420
+
421
+ #menu{display: none}
422
+
423
+
424
+
425
+ .menu ul{margin: 0;
426
+
427
+ padding: 0;
428
+
429
+ list-style: none}
430
+
431
+
432
+
433
+
434
+
435
+ .menu li a{display: block;
436
+
437
+ padding: 5px;
438
+
439
+ color: #000000;
440
+
441
+ font-size: 14px;
442
+
443
+ text-decoration: none}
444
+
445
+
446
+
447
+
448
+
449
+ .menu li a:hover{
450
+
451
+ background-color: #eeeeee}
452
+
453
+
454
+
455
+
456
+
457
+ }
458
+
459
+
460
+
461
+ /* ### 768px 以上 ### */
462
+
463
+
464
+
465
+ @media(min-width: 768px){
466
+
467
+
468
+
469
+
470
+
471
+ /* トグルボタン */
472
+
473
+
474
+
475
+ #menubtn{display: none}
476
+
477
+
478
+
479
+
480
+
481
+ /* ナビゲーション */
482
+
483
+
484
+
485
+
486
+
487
+ #menu{display: block !important}
488
+
489
+
490
+
491
+
492
+
493
+ .menu ul{margin: 0;
494
+
495
+ padding: 0;
496
+
497
+ list-style: none}
498
+
499
+
500
+
501
+
502
+
503
+ .menu li a{display: block;
504
+
505
+ padding: 10px 15px;
506
+
507
+ color: #000000;
508
+
509
+ font-size: 14px;
510
+
511
+ text-decoration: none}
512
+
513
+
514
+
515
+
516
+
517
+ .menu li a:hover{
518
+
519
+ background-color: #eeeeee}
520
+
521
+
522
+
523
+
524
+
525
+ .menu ul:after{content: "";
526
+
527
+ display: block;
528
+
529
+ clear: both}
530
+
531
+
532
+
533
+
534
+
535
+ .menu li{float: left;
536
+
537
+ width: auto}
538
+
539
+
540
+
541
+
542
+
543
+ /* BOX1とBOX2を横に並べる設定 */
544
+
545
+
546
+
547
+
548
+
549
+ .boxA:after{content:"";
550
+
551
+ display:block;
552
+
553
+ clear:both}
554
+
555
+
556
+
557
+ .box1{float:left;
558
+
559
+ width:auto}
560
+
561
+
562
+
563
+ .box2{float:right;
564
+
565
+ width:auto}
566
+
567
+
568
+
569
+
570
+
571
+ }
572
+
573
+
574
+
575
+ /* ### 1190px 以上 ### */
576
+
577
+
578
+
579
+
580
+
581
+ @media(min-width:1190px){
582
+
583
+
584
+
585
+
586
+
587
+ /* 全体の横幅を固定 */
588
+
589
+
590
+
591
+ .box3, .boxA-inner, .box5-inner, .box6, .box7{
592
+
593
+ width:1140px;
594
+
595
+ margin-left:auto;
596
+
597
+ margin-right:auto}
598
+
599
+
600
+
601
+
602
+
603
+ /* BOX Aの下に罫線を挿入 */
604
+
605
+ .boxA{margin-bottom: 20px;
606
+
607
+ border-bottom: solid 1px #dddddd}
608
+
609
+
610
+
611
+ }
612
+
613
+
614
+
615
+ /* コンテンツ内の共通 */
616
+
617
+ .content h1{
618
+
619
+ margin-top: 0px;
620
+
621
+ margin-bottom: 20px;
622
+
623
+ padding-left: 20px;
624
+
625
+ border-left: solid 10px #c50018;
626
+
627
+ font-size: 22px;
628
+
629
+ font-weight: normal
630
+
631
+ }
632
+
633
+
634
+
635
+ .content h2{
636
+
637
+ margin-top: 50px;
638
+
639
+ margin-bottom: 20px;
640
+
641
+ font-size: 20px;
642
+
643
+ font-weight: normal;
644
+
645
+ background-color: #f3f3f3;
646
+
647
+ color: #366;
648
+
649
+ padding: 10px;
650
+
651
+ }
652
+
653
+
654
+
655
+ .content h2 i{margin-right: 7px;
656
+
657
+ color: #888888}
658
+
659
+
660
+
661
+
662
+
663
+ .content h3{
664
+
665
+ margin-top: 50px;
666
+
667
+ margin-bottom: 20px;
668
+
669
+ font-size: 23px;
670
+
671
+ font-weight: normal
672
+
673
+ }
674
+
675
+
676
+
677
+ .content h3 i {margin-right: 7px;
678
+
679
+ color: #888888}
680
+
681
+
682
+
683
+
684
+
685
+ .content p{max-width: 640px;
686
+
687
+ margin-top: 0;
688
+
689
+ margin-bottom: 20px}
690
+
691
+
692
+
693
+ .content .lead{max-width: 100%;
694
+
695
+ font-size: 20px;
696
+
697
+ color: #666666}
698
+
699
+
700
+
701
+ .contentimg{max-width: 100%;
702
+
703
+ height: auto;
704
+
705
+ margin-bottom: 20px}
706
+
707
+
708
+
709
+ /*各コンテンツ内ページ共通の見出し*/
710
+
711
+
712
+
713
+
714
+
715
+ .content p{
716
+
717
+ max-width: 640px;
718
+
719
+ margin-top: 0;
720
+
721
+ margin-bottom: 20px;
722
+
723
+ line-height: 1.5em
724
+
725
+ }
726
+
727
+
728
+
729
+
730
+
731
+ .content section
732
+
733
+ {color:#eb5c01}
734
+
735
+
736
+
737
+
738
+
739
+ ul {
740
+
741
+ display: block;
742
+
743
+ unicode-bidi: isolate;
744
+
745
+ margin-top: 1em;
746
+
747
+ margin-bottom: 1em;
748
+
749
+ padding-left: 40px;
750
+
751
+ list-style-type: square
752
+
753
+ }
754
+
755
+
756
+
757
+
758
+
759
+
760
+
761
+ /* データベース内のコンテンツ用 (下層)*/
762
+
763
+ .database h1{
764
+
765
+ margin-top: 0px;
766
+
767
+ margin-bottom: 5px;
768
+
769
+ border-bottom: solid 1px #dddddd;
770
+
771
+ font-size: 24px;
772
+
773
+ font-weight: normal
774
+
775
+ }
776
+
777
+
778
+
779
+ .database h2{
780
+
781
+ margin-top: 30px;
782
+
783
+ margin-bottom: 20px;
784
+
785
+ padding-left: 20;
786
+
787
+ font-size: 17px;
788
+
789
+ font-weight: normal;
790
+
791
+ border-bottom: 1px solid #dddddd;
792
+
793
+ border-left-width: 10px;
794
+
795
+ border-left-style: solid;
796
+
797
+ border-left-color: #c50018;
798
+
799
+ padding-left: 10px;
800
+
801
+ }
802
+
803
+
804
+
805
+ .database h2 i{margin-right: 7px;
806
+
807
+ color: #888888}
808
+
809
+
810
+
811
+ .database h3{
812
+
813
+ margin-top: 0px;
814
+
815
+ margin-bottom: 15px;
816
+
817
+ color: #366;
818
+
819
+ font-size: 16px;
820
+
821
+ border-bottom: solid 1px #dddddd;
822
+
823
+ background-color: #f3f3f3;
824
+
825
+ padding: 10px;
826
+
827
+ }
828
+
829
+
830
+
831
+
832
+
833
+ .database img{
834
+
835
+ max-width: 100%;
836
+
837
+ height: auto;
838
+
839
+ margin-bottom: 10px;
840
+
841
+ padding-top: 10px
842
+
843
+ }
844
+
845
+
846
+
847
+
848
+
849
+ .database-link {border-bottom:dotted 1px #333}
850
+
851
+
852
+
853
+
854
+
855
+ /*データベースページ内部のコンテンツ共通 (下層)*/
856
+
857
+
858
+
859
+
860
+
861
+ .database p{
862
+
863
+ max-width: 640px;
864
+
865
+ margin-top: 0;
866
+
867
+ margin-bottom: 20px;
868
+
869
+ line-height: 1.5em
870
+
871
+ }
872
+
873
+
874
+
875
+
876
+
877
+ .database section{color:#eb5c01}
878
+
879
+
880
+
881
+
882
+
883
+
884
+
885
+ ul li{line-height:1.5em;
886
+
887
+ padding: 0.5em 0 /*前後の文との余白*/
888
+
889
+ }
890
+
891
+
892
+
893
+
894
+
895
+ .database section{color:#eb5c01}
896
+
897
+
898
+
899
+
900
+
901
+ /* 計算フォーム用 レスポンシブ調整 */
902
+
903
+
904
+
905
+ select,
906
+
907
+ textarea,
908
+
909
+ button{
910
+
911
+ -moz-appearance: none;
912
+
913
+ -webkit-appearance: none;
914
+
915
+ -webkit-box-shadow: none;
916
+
917
+ box-shadow: none;
918
+
919
+ outline: none;
920
+
921
+ border: none;
922
+
923
+ }
924
+
925
+
926
+
927
+ input[type="number"],
928
+
929
+ textarea {
930
+
931
+ background: #fff;
932
+
933
+ display: block;
934
+
935
+ font-size: 30px;
936
+
937
+ padding: 12px 15px;
938
+
939
+ width: 100%;
940
+
941
+ transition: 0.8s;
942
+
943
+ border-radius: 0;
944
+
945
+ }
946
+
947
+
948
+
949
+ input[type="text"]:focus,
950
+
951
+ textarea:focus {
952
+
953
+ background: #e9f5fb;
954
+
955
+ width:100%;
956
+
957
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
958
+
959
+ }
960
+
961
+
962
+
963
+ table {
964
+
965
+ border-collapse: collapse;
966
+
967
+ }
968
+
969
+
970
+
971
+ /* 給与 計算フォーム */
972
+
973
+
974
+
975
+
976
+
977
+ .form-table {
978
+
979
+ width: 100%;
980
+
981
+ }
982
+
983
+
984
+
985
+ .form-table th,
986
+
987
+ .form-table td {
988
+
989
+ border-top: 1px solid #d7d7d7;
990
+
991
+ border-bottom: 1px solid #d7d7d7;
992
+
993
+ padding: 20px;
994
+
995
+ }
996
+
997
+
998
+
999
+
1000
+
1001
+ /* th テーブル共通の背景 */
1002
+
1003
+ .form-table th {
1004
+
1005
+
1006
+
1007
+ background:#3D5A6C;
1008
+
1009
+ color:#fff;
1010
+
1011
+ padding-left: 50px;
1012
+
1013
+ position: relative;
1014
+
1015
+ font-size:22px;
1016
+
1017
+ text-align: left;
1018
+
1019
+ }
1020
+
1021
+
1022
+
1023
+ .form-table th,
1024
+
1025
+ .form-table td {
1026
+
1027
+ display: block;
1028
+
1029
+ width: 100%;
1030
+
1031
+ border-bottom: none;
1032
+
1033
+ }
1034
+
1035
+
1036
+
1037
+
1038
+
1039
+ .form-table th,
1040
+
1041
+ .form-table td {
1042
+
1043
+ display: block;
1044
+
1045
+ width: 100%;
1046
+
1047
+ border-bottom: none;
1048
+
1049
+ }
1050
+
1051
+
1052
+
1053
+ .form-table {
1054
+
1055
+ margin-left: -20px;
1056
+
1057
+ width:600px;
1058
+
1059
+ width: -webkit-calc(100% + 40px);
1060
+
1061
+ width: calc(100% + 40px);
1062
+
1063
+ }
1064
+
1065
+
1066
+
1067
+
1068
+
1069
+ .form-table select{
1070
+
1071
+ background: #f0f0f0;
1072
+
1073
+ display: block;
1074
+
1075
+ font-size: 16px;
1076
+
1077
+ padding: 12px 15px;
1078
+
1079
+ width: 100%;
1080
+
1081
+ transition: 0.8s;
1082
+
1083
+ border-radius: 0;
1084
+
1085
+ }
1086
+
1087
+
1088
+
1089
+
1090
+
1091
+ /* OUTPUT タグ */
1092
+
1093
+
1094
+
1095
+ output[type="number"]
1096
+
1097
+ textarea {
1098
+
1099
+ background:#455A64;
1100
+
1101
+ display: block;
1102
+
1103
+ padding: 12px 15px;
1104
+
1105
+ width: 400px;
1106
+
1107
+ transition: 0.8s;
1108
+
1109
+ border-radius: 0;
1110
+
1111
+ }
1112
+
1113
+
1114
+
1115
+
1116
+
1117
+ /* 計算 結果 */
1118
+
1119
+
1120
+
1121
+ .result_NP {
1122
+
1123
+ width: 100%;
1124
+
1125
+ }
1126
+
1127
+ .result_NP th,
1128
+
1129
+ .result_NP td {
1130
+
1131
+
1132
+
1133
+ border-top: 1px solid #d7d7d7;
1134
+
1135
+ border-bottom: 1px solid #d7d7d7;
1136
+
1137
+ padding: 20px;
1138
+
1139
+ }
1140
+
1141
+
1142
+
1143
+ .result_NP th {
1144
+
1145
+ background-color:#f5f5d1;
1146
+
1147
+ color:#000;
1148
+
1149
+ padding-left: 50px;
1150
+
1151
+ position: relative;
1152
+
1153
+ font-size:22px;
1154
+
1155
+ text-align: left;
1156
+
1157
+ }
1158
+
1159
+
1160
+
1161
+ .result_NP th,
1162
+
1163
+ .result_NP td {
1164
+
1165
+ display: block;
1166
+
1167
+ width: 100%;
1168
+
1169
+ border-bottom: none;
1170
+
1171
+ }
1172
+
1173
+
1174
+
1175
+
1176
+
1177
+ .result_NP th,
1178
+
1179
+ .result_NP td {
1180
+
1181
+ display: block;
1182
+
1183
+ width: 100%;
1184
+
1185
+ border-bottom: none;
1186
+
1187
+ }
1188
+
1189
+
1190
+
1191
+ .result_NP {
1192
+
1193
+ margin-left: -20px;
1194
+
1195
+ width:600px;
1196
+
1197
+ width: -webkit-calc(100% + 40px);
1198
+
1199
+ width: calc(100% + 40px);
1200
+
1201
+ }
1202
+
1203
+
1204
+
1205
+
1206
+
1207
+ .result_NP select{
1208
+
1209
+
1210
+
1211
+ background: #f0f0f0;
1212
+
1213
+ display: block;
1214
+
1215
+ font-size: 16px;
1216
+
1217
+ padding: 12px 15px;
1218
+
1219
+ width: 100%;
1220
+
1221
+ transition: 0.8s;
1222
+
1223
+ border-radius: 0;
1224
+
1225
+ }
200
1226
 
201
1227
 
202
1228
 
@@ -204,13 +1230,13 @@
204
1230
 
205
1231
 
206
1232
 
207
-
208
-
209
1233
  ### 試したこと
210
1234
 
211
1235
 
212
1236
 
213
- 分かる範囲でCSSを見直ました
1237
+ tableタグ以外は正常に動作しました
1238
+
1239
+ tableを入れるとページ全体が横幅が短くなります。
214
1240
 
215
1241
 
216
1242
 
@@ -218,4 +1244,4 @@
218
1244
 
219
1245
 
220
1246
 
221
- ここにより詳細な情報を記載してください。![![イメージ説明](0eeb819fd6f6ff70a4e30f2d5ab3032a.png)](e41f4bb9e3c4294981ecf40f2324cac0.png)
1247
+ ここにより詳細な情報を記載してください。![![イメージ説明](0eeb819fd6f6ff70a4e30f2d5ab3032a.png)