質問編集履歴

4

誤字修正

2019/09/11 00:28

投稿

anpan___
anpan___

スコア28

test CHANGED
@@ -1 +1 @@
1
- <aplet>タグが廃止になり、その代替案を探しています。
1
+ <applet>タグが廃止になり、その代替案を探しています。
test CHANGED
@@ -2,6 +2,10 @@
2
2
 
3
3
 
4
4
 
5
+ 研修内容は「HTML、CSSの中にJavaを挿入して数独のWebサービスをつくれ」というものです
6
+
7
+
8
+
5
9
  HTML、CSSで大枠のデザインを完成させ、そこにJavaのコードを挿入していきたいと考えております。
6
10
 
7
11
 

3

誤字修正

2019/09/11 00:28

投稿

anpan___
anpan___

スコア28

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- 参考書等では「アプレット(aplet)」を用いて、それを実現させているのですが、 Olacle がアプレットタグが廃止された状態となっております。
9
+ 参考書等では「アプレット(applet)」を用いて、それを実現させているのですが、 Oracle がアプレットタグが廃止された状態となっております。
10
10
 
11
11
 
12
12
 

2

質問に対する回答を追加

2019/09/11 00:24

投稿

anpan___
anpan___

スコア28

test CHANGED
File without changes
test CHANGED
@@ -18,6 +18,24 @@
18
18
 
19
19
 
20
20
 
21
+ 主に行いたいことは下記のとおりです。
22
+
23
+ ・Javaで作成した問題を、HTML上で表示
24
+
25
+ ・その問題の合否をチェックするためのボタン
26
+
27
+ ・終了時解答があっているかの確認
28
+
29
+ ・数字入力をボタンで出来るように
30
+
31
+ ・経過時間を表示
32
+
33
+ 等行いたいと考えています。
34
+
35
+
36
+
37
+
38
+
21
39
  ご回答よろしくお願いいたします。
22
40
 
23
41
  念のため、作成中のコードを記載させていただきます。
@@ -28,7 +46,7 @@
28
46
 
29
47
  <!DOCTYPE html>
30
48
 
31
- <html lang="ja">
49
+ <html>
32
50
 
33
51
  <head>
34
52
 

1

コードの追加

2019/09/11 00:23

投稿

anpan___
anpan___

スコア28

test CHANGED
File without changes
test CHANGED
@@ -26,12 +26,730 @@
26
26
 
27
27
  ```HTML
28
28
 
29
+ <!DOCTYPE html>
30
+
31
+ <html lang="ja">
32
+
33
+ <head>
34
+
35
+ <meta charset="UTF-8">
36
+
37
+ <title>数独問題</title>
38
+
39
+ <link rel="stylesheet" href="NewFile.css">
40
+
41
+ </head>
42
+
43
+ <body>
44
+
45
+ <header>
46
+
47
+ <div class="logo">数独</div>
48
+
49
+ <div class="hlist">
50
+
29
- コード
51
+ <ul>
52
+
53
+ <li>ヘッダー1</li>
54
+
55
+ <li>ヘッダー2</li>
56
+
57
+ <li>ヘッダー3</li>
58
+
59
+ </ul>
60
+
61
+ </div>
62
+
63
+ </header>
64
+
65
+
66
+
67
+ <div class="main">
68
+
69
+ <div class="sudoku">
70
+
71
+ <h2 class="section-title">数独問題自動作成ツール</h2>
72
+
73
+ <div class="btn">
74
+
75
+ <button type="button" class="btn1">1</button>
76
+
77
+ <button type="button" class="btn1">2</button>
78
+
79
+ <button type="button" class="btn1">3</button>
80
+
81
+ <button type="button" class="btn1">4</button>
82
+
83
+ <button type="button" class="btn1">5</button>
84
+
85
+ <button type="button" class="btn1">6</button>
86
+
87
+ <button type="button" class="btn1">7</button>
88
+
89
+ <button type="button" class="btn1">8</button>
90
+
91
+ <button type="button" class="btn1">9</button>
92
+
93
+ </div>
94
+
95
+ <div class="feild">
96
+
97
+ <table border="1" style="border-collapse: collapse">
98
+
99
+ <tbody>
100
+
101
+ <tr>
102
+
103
+ <td>0</td>
104
+
105
+ <td>0</td>
106
+
107
+ <td>0</td>
108
+
109
+ <td>0</td>
110
+
111
+ <td>0</td>
112
+
113
+ <td>0</td>
114
+
115
+ <td>0</td>
116
+
117
+ <td>0</td>
118
+
119
+ <td>0</td>
120
+
121
+ </tr>
122
+
123
+ <tr>
124
+
125
+ <td>0</td>
126
+
127
+ <td>0</td>
128
+
129
+ <td>0</td>
130
+
131
+ <td>0</td>
132
+
133
+ <td>0</td>
134
+
135
+ <td>0</td>
136
+
137
+ <td>0</td>
138
+
139
+ <td>0</td>
140
+
141
+ <td>0</td>
142
+
143
+ </tr>
144
+
145
+ <tr>
146
+
147
+ <td>0</td>
148
+
149
+ <td>0</td>
150
+
151
+ <td>0</td>
152
+
153
+ <td>0</td>
154
+
155
+ <td>0</td>
156
+
157
+ <td>0</td>
158
+
159
+ <td>0</td>
160
+
161
+ <td>0</td>
162
+
163
+ <td>0</td>
164
+
165
+ </tr>
166
+
167
+ <tr>
168
+
169
+ <td>0</td>
170
+
171
+ <td>0</td>
172
+
173
+ <td>0</td>
174
+
175
+ <td>0</td>
176
+
177
+ <td>0</td>
178
+
179
+ <td>0</td>
180
+
181
+ <td>0</td>
182
+
183
+ <td>0</td>
184
+
185
+ <td>0</td>
186
+
187
+ </tr>
188
+
189
+ <tr>
190
+
191
+ <td>0</td>
192
+
193
+ <td>0</td>
194
+
195
+ <td>0</td>
196
+
197
+ <td>0</td>
198
+
199
+ <td>0</td>
200
+
201
+ <td>0</td>
202
+
203
+ <td>0</td>
204
+
205
+ <td>0</td>
206
+
207
+ <td>0</td>
208
+
209
+ </tr>
210
+
211
+ <tr>
212
+
213
+ <td>0</td>
214
+
215
+ <td>0</td>
216
+
217
+ <td>0</td>
218
+
219
+ <td>0</td>
220
+
221
+ <td>0</td>
222
+
223
+ <td>0</td>
224
+
225
+ <td>0</td>
226
+
227
+ <td>0</td>
228
+
229
+ <td>0</td>
230
+
231
+ </tr>
232
+
233
+ <tr>
234
+
235
+ <td>0</td>
236
+
237
+ <td>0</td>
238
+
239
+ <td>0</td>
240
+
241
+ <td>0</td>
242
+
243
+ <td>0</td>
244
+
245
+ <td>0</td>
246
+
247
+ <td>0</td>
248
+
249
+ <td>0</td>
250
+
251
+ <td>0</td>
252
+
253
+ </tr>
254
+
255
+ <tr>
256
+
257
+ <td>0</td>
258
+
259
+ <td>0</td>
260
+
261
+ <td>0</td>
262
+
263
+ <td>0</td>
264
+
265
+ <td>0</td>
266
+
267
+ <td>0</td>
268
+
269
+ <td>0</td>
270
+
271
+ <td>0</td>
272
+
273
+ <td>0</td>
274
+
275
+ </tr>
276
+
277
+ <tr>
278
+
279
+ <td>0</td>
280
+
281
+ <td>0</td>
282
+
283
+ <td>0</td>
284
+
285
+ <td>0</td>
286
+
287
+ <td>0</td>
288
+
289
+ <td>0</td>
290
+
291
+ <td>0</td>
292
+
293
+ <td>0</td>
294
+
295
+ <td>0</td>
296
+
297
+ </tr>
298
+
299
+ </tbody>
300
+
301
+ </table>
302
+
303
+ </div>
304
+
305
+ <div class="btn">
306
+
307
+ <button type="button" class="btn2">1</button>
308
+
309
+ <button type="button" class="btn2">2</button>
310
+
311
+ <button type="button" class="btn2">3</button>
312
+
313
+ <button type="button" class="btn2">4</button>
314
+
315
+ <button type="button" class="btn2">5</button>
316
+
317
+ <button type="button" class="btn2">6</button>
318
+
319
+ <button type="button" class="btn2">7</button>
320
+
321
+ <button type="button" class="btn2">8</button>
322
+
323
+ <button type="button" class="btn2">9</button>
324
+
325
+ </div>
326
+
327
+ <div class="btn">
328
+
329
+ <button type="button" class="btn3">リセット</button>
330
+
331
+ <button type="button" class="btn3">チェック</button>
332
+
333
+ </div>
334
+
335
+ </div>
336
+
337
+ </div>
338
+
339
+
340
+
341
+ <aside>
342
+
343
+ <div class="side">
344
+
345
+ <div class="slist">
346
+
347
+ <h2 class="section-title">難易度選択</h2>
348
+
349
+ <ul>
350
+
351
+ <li><a href="#">簡単</a></li>
352
+
353
+ <li><a href="#">普通</a></li>
354
+
355
+ <li><a href="#">難しい</a></li>
356
+
357
+ </ul>
358
+
359
+ </div>
360
+
361
+ </div>
362
+
363
+ </aside>
364
+
365
+
366
+
367
+ <div class="contact-form">
368
+
369
+ <h2 class="section-title">お問い合わせ</h2>
370
+
371
+ <p>メールアドレス(必須)</p>
372
+
373
+ <input>
374
+
375
+ <p>お問い合わせ内容(必須)</p>
376
+
377
+ <textarea></textarea>
378
+
379
+ <p>※必須項目は必ずご入力ください</p>
380
+
381
+ <input class="contact-submit" type="submit" value="送信">
382
+
383
+ </div>
384
+
385
+ <div class="clear"></div>
386
+
387
+
388
+
389
+
390
+
391
+ <footer>
392
+
393
+ <h2 class="logo">数独</h2>
394
+
395
+ <div class="flist">
396
+
397
+ <ul>
398
+
399
+ <li>フッター1</li>
400
+
401
+ <li>フッター2</li>
402
+
403
+ <li>フッター3</li>
404
+
405
+ </ul>
406
+
407
+ </div>
408
+
409
+ </footer>
410
+
411
+ </body>
412
+
413
+ </html>
30
414
 
31
415
  ```
32
416
 
33
417
  ```CSS
34
418
 
419
+ @charset "UTF-8";
420
+
421
+
422
+
423
+ html, body, ul, li, h1, h2, h3, h4, h5, h6, p, form, input, div {
424
+
425
+ margin: 0;
426
+
427
+ padding: 0;
428
+
429
+ }
430
+
431
+
432
+
433
+ body {
434
+
435
+ font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
436
+
437
+ background-color: #eedcb3;
438
+
439
+ }
440
+
441
+
442
+
35
- コード
443
+ li {
444
+
445
+ list-style: none;
446
+
447
+ }
448
+
449
+
450
+
451
+ header {
452
+
453
+ color: #fff;
454
+
455
+ height: 90px;
456
+
457
+ background-color: #139697
458
+
459
+ }
460
+
461
+
462
+
463
+ .logo {
464
+
465
+ font-size: 36px;
466
+
467
+ padding: 20px 40px;
468
+
469
+ float: left;
470
+
471
+ }
472
+
473
+
474
+
475
+ .hlist li {
476
+
477
+ float: left;
478
+
479
+ padding: 33px 20px;
480
+
481
+ }
482
+
483
+
484
+
485
+ .main {
486
+
487
+ float: left;
488
+
489
+ padding: 20px 50px;
490
+
491
+ margin: 50px 0;
492
+
493
+ font-weight: bold;
494
+
495
+ color: black;
496
+
497
+ background-color: #fff;
498
+
499
+ border: solid 3px #6091d3;
500
+
501
+ border-radius: 10px;
502
+
503
+ padding: 20px 50px;
504
+
505
+ margin: 50px 0;
506
+
507
+ font-weight: bold;
508
+
509
+ }
510
+
511
+
512
+
513
+ table {
514
+
515
+ text-algin: ceneter;
516
+
517
+ }
518
+
519
+
520
+
521
+ .section-title {
522
+
523
+ padding-bottom: 5px;
524
+
525
+ border-bottom: double #6091d3;
526
+
527
+ margin: 10px 0 20px;
528
+
529
+ }
530
+
531
+
532
+
533
+ .btn {
534
+
535
+ text-align: center;
536
+
537
+ color: black;
538
+
539
+ }
540
+
541
+
542
+
543
+ .btn1 {
544
+
545
+ margin-bottom: 10px;
546
+
547
+ font-size: 20px;
548
+
549
+ height: 41px;
550
+
551
+ width: 41px;
552
+
553
+ }
554
+
555
+
556
+
557
+ .feild td:nth-child(odd) {
558
+
559
+ background-color: #EAF6FD;
560
+
561
+ }
562
+
563
+
564
+
565
+ .feild td:nth-child(even) {
566
+
567
+ background-color: #EFEFEF;
568
+
569
+ }
570
+
571
+
572
+
573
+ table {
574
+
575
+ width: 410px;
576
+
577
+ height: 410px;
578
+
579
+ border: 3px solid black;
580
+
581
+ }
582
+
583
+
584
+
585
+ td {
586
+
587
+ text-align: center;
588
+
589
+ }
590
+
591
+
592
+
593
+ .btn2 {
594
+
595
+ margin: 10px 0 20px;
596
+
597
+ font-size: 20px;
598
+
599
+ height: 41px;
600
+
601
+ width: 41px;
602
+
603
+ }
604
+
605
+
606
+
607
+ .btn3 {
608
+
609
+ width: 200px;
610
+
611
+ height: 40px;
612
+
613
+ }
614
+
615
+
616
+
617
+ .side {
618
+
619
+ padding: 20px 80px;
620
+
621
+ margin: 50px 100px 10px 0;
622
+
623
+ width: 300px;
624
+
625
+ height: 150px;
626
+
627
+ float: right;
628
+
629
+ font-weight: bold;
630
+
631
+ color: black;
632
+
633
+ background-color: #fff;
634
+
635
+ float: right;
636
+
637
+ border: solid 3px #6091d3;
638
+
639
+ border-radius: 10px;
640
+
641
+ }
642
+
643
+
644
+
645
+ .slist li {
646
+
647
+ float: left;
648
+
649
+ padding: 15px 20px 33px 20px;
650
+
651
+ font-size: 20px;
652
+
653
+ }
654
+
655
+
656
+
657
+ .contact-form {
658
+
659
+ padding: 20px 80px;
660
+
661
+ margin: 0 100px 50px 0;
662
+
663
+ width: 300px;
664
+
665
+ height: 440px;
666
+
667
+ float: right;
668
+
669
+ font-weight: bold;
670
+
671
+ color: black;
672
+
673
+ background-color: #fff;
674
+
675
+ border: solid 3px #6091d3;
676
+
677
+ border-radius: 10px;
678
+
679
+ }
680
+
681
+
682
+
683
+ input, textarea {
684
+
685
+ width: 270px;
686
+
687
+ margin-top: 10px;
688
+
689
+ margin-bottom: 15px;
690
+
691
+ padding: 15px;
692
+
693
+ font-size: 13px;
694
+
695
+ border: 1px solid #dee7ec;
696
+
697
+ }
698
+
699
+
700
+
701
+ textarea {
702
+
703
+ height: 100px;
704
+
705
+ }
706
+
707
+
708
+
709
+ .clear {
710
+
711
+ clear: both;
712
+
713
+ }
714
+
715
+
716
+
717
+ footer {
718
+
719
+ height: 120px;
720
+
721
+ padding: 40px;
722
+
723
+ color: #fff;
724
+
725
+ background-color: #139697
726
+
727
+ }
728
+
729
+
730
+
731
+ .flogo {
732
+
733
+ font-size: 32px;
734
+
735
+ float: left;
736
+
737
+ }
738
+
739
+
740
+
741
+ .flist {
742
+
743
+ float: right;
744
+
745
+ }
746
+
747
+
748
+
749
+ .flist li {
750
+
751
+ padding-top: 20px;
752
+
753
+ }
36
754
 
37
755
  ```