質問編集履歴

1

test.css⇒画面上部青枠と左部緑枠の調整。common.css⇒お見せできないです。

2020/09/28 04:02

投稿

0sksksk
0sksksk

スコア17

test CHANGED
File without changes
test CHANGED
@@ -29,3 +29,889 @@
29
29
  - vhの値を大きくしすぎた場合(例:200vh)、テーブル2よりさらに下の空白の部分が増えてしまう。
30
30
 
31
31
  ![イメージ説明](3249795a28f1f61b6269a4fe5106b4bf.png)
32
+
33
+
34
+
35
+
36
+
37
+ ```html
38
+
39
+ <!DOCTYPEhtml>
40
+
41
+ <html>
42
+
43
+ <head>
44
+
45
+ <metacharset="utf-8">
46
+
47
+ <title>test</title>
48
+
49
+ <linkrel="stylesheet"href="./css/common.css"/>
50
+
51
+ <linkrel="stylesheet"href="./css/test.css"/>
52
+
53
+ </head>
54
+
55
+ <body>
56
+
57
+ <divclass="main">
58
+
59
+ <divclass="top-box"style="text-align:left;">
60
+
61
+ </div>
62
+
63
+ <divclass="nav">
64
+
65
+ <divclass="nav-item">
66
+
67
+ <divid='i1'class="itemno-act">メニュー</div>
68
+
69
+ <divclass="hide">
70
+
71
+ <div>
72
+
73
+ <divid='i11'class="item1no-act">メニュー</div>
74
+
75
+ <divclass="">
76
+
77
+ <divclass="item2">メニュー</div>
78
+
79
+ <divclass="item2">メニュー</div>
80
+
81
+ </div>
82
+
83
+ </div>
84
+
85
+ </div>
86
+
87
+ </div>
88
+
89
+ <divclass="nav-item">
90
+
91
+ <divclass="hide">
92
+
93
+ <div>
94
+
95
+ <divid='i31'class="itemno-act">メニュー</div>
96
+
97
+ <divclass="hide">
98
+
99
+ <divclass="item2">メニュー</div>
100
+
101
+ <divclass="item2">メニュー</div>
102
+
103
+ </div>
104
+
105
+ </div>
106
+
107
+ <div>
108
+
109
+ <divid='i32'class="item1no-act">メニュー</div>
110
+
111
+ <divclass="hide">
112
+
113
+ <divclass="item2">メニュー</div>
114
+
115
+ <divclass="item2">メニュー</div>
116
+
117
+ </div>
118
+
119
+ </div>
120
+
121
+ <div>
122
+
123
+ <divid='i33'class="item1no-act">メニュー</div>
124
+
125
+ <divclass="hide">
126
+
127
+ <divclass="item2">メニュー</div>
128
+
129
+ <divclass="item2">メニュー</div>
130
+
131
+ </div>
132
+
133
+ </div>
134
+
135
+ </div>
136
+
137
+ </div>
138
+
139
+ <divclass="nav-item">
140
+
141
+ <divid='i3'class="itemchoose">メニュー</div>
142
+
143
+ </div>
144
+
145
+ <divclass="nav-item">
146
+
147
+ <divid='i4'class="itemno-act">メニュー</div>
148
+
149
+ <divclass="hide">
150
+
151
+ <div>
152
+
153
+ <divid='i41'class="item1no-act">メニュー</div>
154
+
155
+ <divclass="">
156
+
157
+ <divclass="item2">メニュー</div>
158
+
159
+ <divclass="item2">メニュー</div>
160
+
161
+ <divclass="item2">メニュー</div>
162
+
163
+ </div>
164
+
165
+ </div>
166
+
167
+ </div>
168
+
169
+ </div>
170
+
171
+ </div>
172
+
173
+ <divclass="content">
174
+
175
+ <divclass="content">
176
+
177
+ <divclass="title">項目</div>
178
+
179
+ <formaction=""class="default-form">
180
+
181
+ <tableclass="input-table">
182
+
183
+ <thead>
184
+
185
+ <tr>
186
+
187
+ <thclass="start-restart-box"><labelclass="default-label"for="">項目</label></th>
188
+
189
+ <tdclass="start-restart-box">
190
+
191
+ <inputtype="checkbox">
192
+
193
+ <labelfor="start-restart"class="choose-label"/>
194
+
195
+ </td>
196
+
197
+ </tr>
198
+
199
+ <thead>
200
+
201
+ <tbody>
202
+
203
+ <tr>
204
+
205
+ <th><labelclass="default-label">項目</label></th>
206
+
207
+ <td><inputtype="text"class="default-input"placeholder="項目"/></td>
208
+
209
+ </tr>
210
+
211
+ <tr>
212
+
213
+ <th><labelclass="default-label"for="">項目</label></th>
214
+
215
+ <td>
216
+
217
+ <labelstyle="display:block;">
218
+
219
+ <inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
220
+
221
+ </label>
222
+
223
+ <labelstyle="display:block;">
224
+
225
+ <inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
226
+
227
+ </label>
228
+
229
+ <labelstyle="display:block;">
230
+
231
+ <inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
232
+
233
+ </label>
234
+
235
+ <labelstyle="display:block;">
236
+
237
+ <inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
238
+
239
+ </label>
240
+
241
+ </td>
242
+
243
+ </tr>
244
+
245
+ <tr>
246
+
247
+ <th><label>項目</label></th>
248
+
249
+ <td><inputtype="text"placeholder="項目"/>
250
+
251
+ </td>
252
+
253
+ </tr>
254
+
255
+ <tr>
256
+
257
+ <th><labelclass="default-label">項目</label>
258
+
259
+ </th>
260
+
261
+ <td>
262
+
263
+ <labelstyle="display:block;">
264
+
265
+ <inputtype="radio"><spanclass="b-radio"></span>項目
266
+
267
+ </label>
268
+
269
+ <labelstyle="display:block;">
270
+
271
+ <inputtype="radio"><spanclass="b-radio"></span>項目
272
+
273
+ </label>
274
+
275
+ <labelstyle="display:block;">
276
+
277
+ <inputtype="radio"><spanclass="b-radio"></span>項目
278
+
279
+ </label>
280
+
281
+
282
+
283
+ </td>
284
+
285
+ </tr>
286
+
287
+ <tr>
288
+
289
+ <th><labelclass="default-label">項目</label></th>
290
+
291
+ <td>
292
+
293
+ <selectclass="default-select">
294
+
295
+ <option>項目</option>
296
+
297
+ <option>項目</option>
298
+
299
+ <option>項目</option>
300
+
301
+ <option>項目</option>
302
+
303
+ <option>項目</option>
304
+
305
+ <option>項目</option>
306
+
307
+ <option>項目</option>
308
+
309
+ <option>項目</option>
310
+
311
+ <option>項目</option>
312
+
313
+ <option>項目</option>
314
+
315
+ <option>項目</option>
316
+
317
+ <option>項目</option>
318
+
319
+ </select>
320
+
321
+ </td>
322
+
323
+ </tr>
324
+
325
+ <tr>
326
+
327
+ <th><labelclass="default-label">項目</label></th>
328
+
329
+ <td>
330
+
331
+ <selectclass="default-select">
332
+
333
+ <option>項目</option>
334
+
335
+ <option>項目</option>
336
+
337
+ <option>項目</option>
338
+
339
+ <option>項目</option>
340
+
341
+ <option>項目</option>
342
+
343
+ <option>項目</option>
344
+
345
+ <option>項目</option>
346
+
347
+ <option>項目</option>
348
+
349
+ <option>項目</option>
350
+
351
+ <option>項目</option>
352
+
353
+ <option>項目</option>
354
+
355
+ <option>項目</option>
356
+
357
+ <option>項目</option>
358
+
359
+ <option>項目</option>
360
+
361
+ <option>項目</option>
362
+
363
+ <option>項目</option>
364
+
365
+ <option>項目</option>
366
+
367
+ <option>項目</option>
368
+
369
+ <option>項目</option>
370
+
371
+ <option>項目</option>
372
+
373
+ </select>
374
+
375
+ </td>
376
+
377
+ </tr>
378
+
379
+ <tr>
380
+
381
+ <th><labelclass="default-label">項目</label></th>
382
+
383
+ <td>
384
+
385
+ <labelstyle="display:block;">
386
+
387
+ <inputclass="a-radio"type="radio"></span>項目
388
+
389
+ </label>
390
+
391
+ <labelstyle="display:block;">
392
+
393
+ <inputclass="a-radio"type="radio"></span>項目
394
+
395
+ </label>
396
+
397
+ </td>
398
+
399
+ </tr>
400
+
401
+ <tr>
402
+
403
+ <th><labelclass="default-label">項目</label></th>
404
+
405
+ <td>
406
+
407
+ <labelstyle="display:block;">
408
+
409
+ <inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
410
+
411
+ </label>
412
+
413
+ <labelstyle="display:block;">
414
+
415
+ <inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
416
+
417
+ </label>
418
+
419
+ <labelstyle="display:block;">
420
+
421
+ <inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
422
+
423
+ </label>
424
+
425
+ <labelstyle="display:block;">
426
+
427
+ <inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
428
+
429
+ </label>
430
+
431
+ <labelstyle="display:block;">
432
+
433
+ <inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
434
+
435
+ </label>
436
+
437
+ <labelstyle="display:block;">
438
+
439
+ <inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
440
+
441
+ </label>
442
+
443
+ </td>
444
+
445
+ </tr>
446
+
447
+ </tbody>
448
+
449
+ </table>
450
+
451
+
452
+
453
+ <divclass="form-box"style="padding:10px">
454
+
455
+ <divstyle="color:#333333;font:bold;font-size:24px;border-bottom:1pxsolid#000">項目
456
+
457
+ </div>
458
+
459
+ </div>
460
+
461
+
462
+
463
+ <tableclass="input-table">
464
+
465
+ <tbody>
466
+
467
+ <tr>
468
+
469
+ <th><labelclass="default-label">項目</label></th>
470
+
471
+ <td>
472
+
473
+ <labelstyle="display:block;">
474
+
475
+ <inputclass="a-radio"type="radio"name="invisible"><span
476
+
477
+ class="b-radio"></span>項目
478
+
479
+ </label>
480
+
481
+ <labelstyle="display:block;">
482
+
483
+ <inputclass="a-radio"type="radio"name="invisible"><span
484
+
485
+ class="b-radio"></span>項目
486
+
487
+ </label>
488
+
489
+ </td>
490
+
491
+ </tr>
492
+
493
+ <tr>
494
+
495
+ <th><labelclass="default-label">項目</label></th>
496
+
497
+ <td>
498
+
499
+ <labelstyle="display:block;">
500
+
501
+ <inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
502
+
503
+ </label>
504
+
505
+ <labelstyle="display:block;">
506
+
507
+ <inputclass="a-radio"type="radio"><spanclass="b-radio"></span>項目
508
+
509
+ </label>
510
+
511
+ </td>
512
+
513
+ </tr>
514
+
515
+ <tr>
516
+
517
+ <th><labelclass="default-label">項目</label></th>
518
+
519
+ <td>
520
+
521
+ <inputtype="text"placeholder="項目"/>
522
+
523
+ </td>
524
+
525
+ </tr>
526
+
527
+ <tr>
528
+
529
+ <th><labelclass="default-label">項目</label></th>
530
+
531
+ <td>
532
+
533
+ <inputtype="text"placeholder="項目"/>
534
+
535
+ </td>
536
+
537
+ </tr>
538
+
539
+
540
+
541
+ <tr>
542
+
543
+ <th><labelclass="default-label"for="prefix_length">項目</label></th>
544
+
545
+ <td>
546
+
547
+ <inputoninput="value=value.replace(/[^\d]/g,'')"type="text"placeholder="項目"/>
548
+
549
+ </td>
550
+
551
+ </tr>
552
+
553
+
554
+
555
+ <tr>
556
+
557
+ <th><labelclass="default-label"for="gateway_ip">項目</label></th>
558
+
559
+ <td>
560
+
561
+ <inputtype="text"placeholder="項目"/>
562
+
563
+ </td>
564
+
565
+ </tr>
566
+
567
+ </tbody>
568
+
569
+ </table>
570
+
571
+ <divclass="horizontal-button">
572
+
573
+ <divonclick="apConfigSet()"class="button-common">項目</div>
574
+
575
+ </div>
576
+
577
+ </form>
578
+
579
+ </div>
580
+
581
+ </div>
582
+
583
+ </div>
584
+
585
+ </body>
586
+
587
+ </html>
588
+
589
+ ```
590
+
591
+
592
+
593
+ ```css
594
+
595
+ html,body{
596
+
597
+ height:100%;
598
+
599
+
600
+
601
+ }
602
+
603
+ .main{
604
+
605
+ height:100%;
606
+
607
+ }
608
+
609
+ .main.top-box{
610
+
611
+ text-align:center;
612
+
613
+ font-size:20px;
614
+
615
+ height:100px;
616
+
617
+ line-height:150px;
618
+
619
+ background-color:#118;
620
+
621
+ color:#D8FF9D;
622
+
623
+ position:relative;
624
+
625
+ }
626
+
627
+ div{
628
+
629
+ font-weight:bold;
630
+
631
+ color:#383838
632
+
633
+ }
634
+
635
+ .main.top-boxspan{
636
+
637
+ font-weight:600;
638
+
639
+ color:#fff
640
+
641
+ }
642
+
643
+ .main.nav{
644
+
645
+ float:left;
646
+
647
+ height:100%;
648
+
649
+ width:25%;
650
+
651
+ border-right:1pxsolid#999999;
652
+
653
+ background-color:#181;
654
+
655
+
656
+
657
+ overflow:hidden;
658
+
659
+ }
660
+
661
+ .main.nav.hide{
662
+
663
+ display:none;
664
+
665
+ }
666
+
667
+ .main.nav.item,
668
+
669
+ .main.nav.item1,
670
+
671
+ .main.nav.item2{
672
+
673
+ position:relative;
674
+
675
+ line-height:60px;
676
+
677
+ border-bottom:1pxsolid#999999;
678
+
679
+ cursor:pointer;
680
+
681
+ white-space:normal;
682
+
683
+ text-overflow:ellipsis;
684
+
685
+ word-break:break-all;
686
+
687
+ }
688
+
689
+ .main.nav.item{
690
+
691
+ padding:010px;
692
+
693
+ font-size:16px;
694
+
695
+ }
696
+
697
+ .main.nav.item1{
698
+
699
+ padding:020px;
700
+
701
+ font-size:14px;
702
+
703
+ }
704
+
705
+ .main.nav.item2{
706
+
707
+ padding:030px;
708
+
709
+ font-size:12px;
710
+
711
+ }
712
+
713
+ .main.nav.choose{
714
+
715
+ background-color:#5b9bd5;
716
+
717
+ }
718
+
719
+ .main.nav.hide.choose{
720
+
721
+ background-color:#fff;
722
+
723
+ }
724
+
725
+ .main.nav.active::after{
726
+
727
+ content:'';
728
+
729
+ width:0;
730
+
731
+ height:0;
732
+
733
+ position:absolute;
734
+
735
+ border-right:10pxsolidtransparent;
736
+
737
+ border-left:10pxsolidtransparent;
738
+
739
+ border-bottom:10pxsolid#d8d8d8;
740
+
741
+ right:20px;
742
+
743
+ top:20px;
744
+
745
+ }
746
+
747
+ .main.nav.no-act::after{
748
+
749
+ content:'';
750
+
751
+ width:0;
752
+
753
+ height:0;
754
+
755
+ position:absolute;
756
+
757
+ border-right:10pxsolidtransparent;
758
+
759
+ border-left:10pxsolidtransparent;
760
+
761
+ border-top:10pxsolid#d8d8d8;
762
+
763
+ right:20px;
764
+
765
+ top:20px;
766
+
767
+ }
768
+
769
+ .main.content{
770
+
771
+ position:relative;
772
+
773
+ text-align:left;
774
+
775
+ float:right;
776
+
777
+ width:calc(75%-5px);
778
+
779
+ height:calc(100%-84px);
780
+
781
+ overflow-y:visible;
782
+
783
+ background-color:#fff;
784
+
785
+ }
786
+
787
+ .main.contentiframe{
788
+
789
+ width:100%;
790
+
791
+ height:100%;
792
+
793
+ }
794
+
795
+
796
+
797
+ .main.nav2{
798
+
799
+ float:left;
800
+
801
+ height:100%;
802
+
803
+ width:25%;
804
+
805
+ border-right:1pxsolid#999999;
806
+
807
+ }
808
+
809
+ .main.nav2.hide{
810
+
811
+ display:none;
812
+
813
+ }
814
+
815
+ .main.nav2.item,
816
+
817
+ .main.nav2.item1,
818
+
819
+ .main.nav2.item2{
820
+
821
+ position:relative;
822
+
823
+ line-height:60px;
824
+
825
+ border-bottom:1pxsolid#999999;
826
+
827
+ cursor:pointer;
828
+
829
+ white-space:nowrap;
830
+
831
+ text-overflow:ellipsis;
832
+
833
+ word-break:break-all;
834
+
835
+ }
836
+
837
+ .main.nav2.item{
838
+
839
+ padding:010px;
840
+
841
+ font-size:16px;
842
+
843
+ }
844
+
845
+ .main.nav2.item1{
846
+
847
+ padding:020px;
848
+
849
+ font-size:14px;
850
+
851
+ }
852
+
853
+ .main.nav2.item2{
854
+
855
+ padding:030px;
856
+
857
+ font-size:12px;
858
+
859
+ }
860
+
861
+ .main.nav2.choose{
862
+
863
+ background-color:#5b9bd5;
864
+
865
+ }
866
+
867
+ .main.nav2.hide.choose{
868
+
869
+ background-color:#fff;
870
+
871
+ }
872
+
873
+ .main.nav2.active::after{
874
+
875
+ content:'';
876
+
877
+ width:0;
878
+
879
+ height:0;
880
+
881
+ position:absolute;
882
+
883
+ border-right:10pxsolidtransparent;
884
+
885
+ border-left:10pxsolidtransparent;
886
+
887
+ border-bottom:10pxsolid#d8d8d8;
888
+
889
+ right:20px;
890
+
891
+ top:20px;
892
+
893
+ }
894
+
895
+ .main.nav2.no-act::after{
896
+
897
+ content:'';
898
+
899
+ width:0;
900
+
901
+ height:0;
902
+
903
+ position:absolute;
904
+
905
+ border-right:10pxsolidtransparent;
906
+
907
+ border-left:10pxsolidtransparent;
908
+
909
+ border-top:10pxsolid#d8d8d8;
910
+
911
+ right:20px;
912
+
913
+ top:20px;
914
+
915
+ }
916
+
917
+ ```