質問編集履歴

5

変更

2021/03/04 07:53

投稿

let
let

スコア41

test CHANGED
File without changes
test CHANGED
@@ -130,7 +130,7 @@
130
130
 
131
131
  </main>
132
132
 
133
- </body>
133
+
134
134
 
135
135
  <footer>
136
136
 
@@ -152,6 +152,8 @@
152
152
 
153
153
  </footer>
154
154
 
155
+ </body>
156
+
155
157
  </html>
156
158
 
157
159
  ```

4

変更

2021/03/04 07:53

投稿

let
let

スコア41

test CHANGED
@@ -1 +1 @@
1
- footerがtopのぐ下に表示されてしまう
1
+ footerがタグだけでは一番下CSS適用ると画面中央付近に表示され
test CHANGED
File without changes

3

変更

2021/03/04 04:09

投稿

let
let

スコア41

test CHANGED
File without changes
test CHANGED
@@ -758,8 +758,6 @@
758
758
 
759
759
  position: absolute;
760
760
 
761
-     bottom: 0;
762
-
763
761
  margin-top: 80px;
764
762
 
765
763
  background-color:#e0ffff;

2

追記

2021/03/04 03:47

投稿

let
let

スコア41

test CHANGED
File without changes
test CHANGED
@@ -756,7 +756,9 @@
756
756
 
757
757
  footer{
758
758
 
759
- position: relative;
759
+ position: absolute;
760
+
761
+     bottom: 0;
760
762
 
761
763
  margin-top: 80px;
762
764
 

1

追記

2021/03/04 03:45

投稿

let
let

スコア41

test CHANGED
File without changes
test CHANGED
@@ -6,6 +6,132 @@
6
6
 
7
7
  ```HHTML
8
8
 
9
+ <!DOCTYPE html>
10
+
11
+ <html lang="ja">
12
+
13
+ <head>
14
+
15
+ <meta charset="utf-8">
16
+
17
+ <meta name="description" content="********************************">
18
+
19
+ <link href="reset.css" rel="stylesheet" type="text/css" madia="screen">
20
+
21
+ <link href="style.css" rel="stylesheet" type="text/css" madia="screen">
22
+
23
+ <link rel="shortcut icon" href="/favicon.ico">
24
+
25
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
26
+
27
+ <title>*************|***********</title>
28
+
29
+ </head>
30
+
31
+ <body>
32
+
33
+ <header>
34
+
35
+ <div class="top"></div>
36
+
37
+ <div class="wapper">
38
+
39
+ <a href="./"><img class="mainlogo" src="imges/ks_logo1.png" alt=""></a>
40
+
41
+ <a href="./"><img class="mainlogo2" src="imges/ks_logol2.png" alt=""></a>
42
+
43
+ </div>
44
+
45
+ </header>
46
+
47
+ <main>
48
+
49
+ <div class="topnav">
50
+
51
+ <nav>
52
+
53
+ <ul>
54
+
55
+ <li><a href="./">HOME</a></li>
56
+
57
+ <li><a href="kaisyaannai.html">*****</a></li>
58
+
59
+ <li><a href="seihinsyoukai.html">*****</a></li>
60
+
61
+ <li><a href="otoiawase.html">*******</a></li>
62
+
63
+ </ul>
64
+
65
+ </nav>
66
+
67
+ </div>
68
+
69
+ <div class="topga">
70
+
71
+ <br><br><br><br><br><br><br><br>
72
+
73
+ <p>TOP画</p>
74
+
75
+ </div>
76
+
77
+ <div class="topmongon">
78
+
79
+ <h1><span class="aikya">**</span>、<span class="kyatti">**</span>、<span class="kya">**</span>**********。<br>*******************</h1>
80
+
81
+ <p><br><br><br>************************<br><br><br><br><br></p>
82
+
83
+ </div>
84
+
85
+ <div class="topics">
86
+
87
+ <h2>**********</h2>
88
+
89
+ <p><br><br><br><br><br><br>**************<br><br><br><br><br></p>
90
+
91
+ </div>
92
+
93
+ <div class="meinsetumei">
94
+
95
+ <h2 class="meinsyousai1">***********</h2>
96
+
97
+ <h2 class="meinsyousai"><span class="henkou">***********</span>で<span class="henkou2">************</span>***********、<br>******************。</h2>
98
+
99
+ </div>
100
+
101
+ <h2 class="topsyoukai">*********</h2>
102
+
103
+ <div class="henatuki">
104
+
105
+ <ul class="syoukai">
106
+
107
+ <li class="syouhin"><p><a href="seihinsyoukai.html">**********</a></p></li>
108
+
109
+ <li class="gazou"><img src="imges/IMG_0355-1.png"></li>
110
+
111
+ </ul>
112
+
113
+ <ul class="syoukai">
114
+
115
+ <li class="syouhin2"><p><a href="seihinsyoukai.html">**********</a></p></li>
116
+
117
+ <li class="gazou"><img src="imges/IMG_0355-1.png"></li>
118
+
119
+ </ul>
120
+
121
+ <ul class="syoukai">
122
+
123
+ <li class="syouhin3"><p><a href="seihinsyoukai.html">***********</a></p></li>
124
+
125
+ <li class="gazou"><img src="imges/IMG_0355-1.png"></li>
126
+
127
+ </ul>
128
+
129
+ </div>
130
+
131
+ </main>
132
+
133
+ </body>
134
+
9
135
  <footer>
10
136
 
11
137
  <div class="sita">
@@ -32,6 +158,602 @@
32
158
 
33
159
  ```CSS
34
160
 
161
+ @charset "utf-8";
162
+
163
+ /* CSS Document */
164
+
165
+ html{
166
+
167
+ font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Osaka,'MS Pゴシック',sans-serif
168
+
169
+ }
170
+
171
+ .top{
172
+
173
+ margin-top:0;
174
+
175
+ padding-top:0;
176
+
177
+ border-top: solid 5px;
178
+
179
+ border-color: #32cd32;
180
+
181
+ }
182
+
183
+ .wapper{
184
+
185
+ margin: 0 auto;
186
+
187
+ width: 960px;
188
+
189
+ max-width: 100%;
190
+
191
+ }
192
+
193
+ .logo{
194
+
195
+ display: flex;
196
+
197
+ list-style-type: none;
198
+
199
+ }
200
+
201
+ .mainlogo{
202
+
203
+ width:10%;
204
+
205
+ height: auto;
206
+
207
+ padding-right: 5px;
208
+
209
+ margin-bottom:20px;
210
+
211
+ margin-top:20px;
212
+
213
+ }
214
+
215
+ .mainlogo2{
216
+
217
+ margin-left: 0;
218
+
219
+ width:50%;
220
+
221
+ height: auto;
222
+
223
+ margin-bottom:35px;
224
+
225
+ margin-top:0;
226
+
227
+ margin-left: 5px;
228
+
229
+ }
230
+
231
+ .topnav{
232
+
233
+ margin: 0 auto;
234
+
235
+ background-color: #32cd32;
236
+
237
+ text-align: center;
238
+
239
+ }
240
+
241
+ .topnav ul{
242
+
243
+ display: flex;
244
+
245
+ /* ↓一応いれます */
246
+
247
+ justify-content: space-between;
248
+
249
+ list-style-type: none;
250
+
251
+ margin-left: auto;
252
+
253
+ margin-right: auto;
254
+
255
+ text-align: center;
256
+
257
+ width: 960px;
258
+
259
+ max-width: 100%;
260
+
261
+ font-size: 20px;
262
+
263
+ font-weight: bold; /*太字に*/
264
+
265
+ color: #ffffff;
266
+
267
+ }
268
+
269
+ .topnav li {
270
+
271
+ width:25%;
272
+
273
+ text-align: center;
274
+
275
+ -webkit-box-sizing: border-box;
276
+
277
+ box-sizing: border-box;
278
+
279
+ /* ボーダー(左)入れます */
280
+
281
+ border-left:1px solid #fff;
282
+
283
+ }
284
+
285
+ /* リストの最後だけ右にもボーダー*/
286
+
287
+ .topnav li:last-child {
288
+
289
+ border-right:1px solid #fff;
290
+
291
+ }
292
+
293
+ .topnav ul li a{
294
+
295
+ text-decoration: none;
296
+
297
+ color: #ffffff;
298
+
299
+ text-align: center;
300
+
301
+ display:block; /* 追加 */
302
+
303
+ padding:20px; /* 追加 */
304
+
305
+ }
306
+
307
+ .topnav li:hover a{
308
+
309
+ opacity:0.6;
310
+
311
+ }
312
+
313
+ .topga {
314
+
315
+ background-color: #afeeee;
316
+
317
+ height: 400px;
318
+
319
+ width:auto;
320
+
321
+ text-align: center;
322
+
323
+ }
324
+
325
+ .topmongon{
326
+
327
+ margin: 0 auto;
328
+
329
+ width: 960px;
330
+
331
+ max-width: 100%;
332
+
333
+ line-height:1.4;
334
+
335
+ }
336
+
337
+ .topmongon h1{
338
+
339
+ padding-top: 15px;
340
+
341
+ font-size: 28px;
342
+
343
+ border-bottom:solid 1px #b0c4de;
344
+
345
+ padding-bottom: 5px;
346
+
347
+ line-height:1.3;
348
+
349
+ margin: 0 auto;
350
+
351
+ width: 960px;
352
+
353
+ max-width: 100%;
354
+
355
+ }
356
+
357
+ .topmongon p{
358
+
359
+ text-align: center;
360
+
361
+ }
362
+
363
+ .aikya{
364
+
365
+ font-size:37px;
366
+
367
+ color: #32cd32;
368
+
369
+ }
370
+
371
+ .kyatti{
372
+
373
+ font-size:37px;
374
+
375
+ color: #9932cc;
376
+
377
+ }
378
+
379
+ .kya{
380
+
381
+ font-size: 37px;
382
+
383
+ color: #ff6347;
384
+
385
+ }
386
+
387
+ .meinsyousai1{
388
+
389
+ padding-top:15px;
390
+
391
+ }
392
+
393
+ .meinsetumei h2{
394
+
395
+ padding-bottom: 5px;
396
+
397
+ font-size: 28px;
398
+
399
+ margin: 0 auto;
400
+
401
+ width: 960px;
402
+
403
+ max-width: 100%;
404
+
405
+ line-height:1.4
406
+
407
+ }
408
+
409
+ .henkou{
410
+
411
+ font-size:34px;
412
+
413
+ color: #32cd32;
414
+
415
+ }
416
+
417
+ .henkou2{
418
+
419
+ font-size:34px;
420
+
421
+ color: #ff0000;
422
+
423
+ }
424
+
425
+ .meinsetumei p{
426
+
427
+ text-align: center;
428
+
429
+ }
430
+
431
+ .zigyouannai{
432
+
433
+ margin-bottom: 5px;
434
+
435
+ margin: 0 auto;
436
+
437
+ width: 960px;
438
+
439
+ max-width: 100%;
440
+
441
+ }
442
+
443
+ .zigyouannai h1{
444
+
445
+ font-size: 35px;
446
+
447
+ margin: 0 auto;
448
+
449
+ width: 960px;
450
+
451
+ max-width: 100%;
452
+
453
+ margin-top:-15px;
454
+
455
+ }
456
+
457
+ .zigyouannai h2{
458
+
459
+ padding-top: 10px;
460
+
461
+ margin: 0 auto;
462
+
463
+ width: 960px;
464
+
465
+ max-width: 100%;
466
+
467
+ font-size:25px;
468
+
469
+ }
470
+
471
+ .zigyouannai p{
472
+
473
+ margin: 0 auto;
474
+
475
+ width: 960px;
476
+
477
+ padding-left: 20px;
478
+
479
+ max-width: 100%;
480
+
481
+ font-size: 22px;
482
+
483
+ margin-top:15px;
484
+
485
+ }
486
+
487
+ .zigyouannai img{
488
+
489
+ padding-top: 10px;
490
+
491
+ height: 700px;
492
+
493
+ width: auto;
494
+
495
+ text-align: center;
496
+
497
+ }
498
+
499
+ .setumei02 h2{
500
+
501
+ font-size: 20px;
502
+
503
+ text-align: center;
504
+
505
+ margin: 0 auto;
506
+
507
+ width: 960px;
508
+
509
+ max-width: 100%;
510
+
511
+ }
512
+
513
+ .setumei02 p{
514
+
515
+ text-align: center;
516
+
517
+ margin: 0 auto;
518
+
519
+ width: 960px;
520
+
521
+ max-width: 100%;
522
+
523
+ }
524
+
525
+ /*teble*/
526
+
527
+ .table-wrapper{
528
+
529
+ padding-bottom: 30px;
530
+
531
+ }
532
+
533
+ .teble-midasi{
534
+
535
+ opacity:0;
536
+
537
+ }
538
+
539
+ .kaisya-annai{
540
+
541
+ margin: 0 auto;
542
+
543
+ width: 960px;
544
+
545
+ max-width: 100%;
546
+
547
+ }
548
+
549
+ .topsetumei{
550
+
551
+ margin-top:50px;
552
+
553
+ }
554
+
555
+ h2{
556
+
557
+ margin-top: 20px;
558
+
559
+ margin-bottom:15px;
560
+
561
+ font-size: 18px;
562
+
563
+ }
564
+
565
+ .gaiyou{
566
+
567
+ margin-left: auto;
568
+
569
+ margin-right:auto;
570
+
571
+ margin: 0 auto;
572
+
573
+ width: 960px;
574
+
575
+ max-width: 100%;
576
+
577
+ border: solid 1px #90ee90;
578
+
579
+ }
580
+
581
+ .gaiyou th{
582
+
583
+ background: #90ee90;
584
+
585
+ white-space: nowrap;
586
+
587
+ padding:20px 10px;
588
+
589
+ border: solid 1px #90ee90;
590
+
591
+ }
592
+
593
+ .gaiyou td{
594
+
595
+ padding:20px 10px;
596
+
597
+ vertical-align:middle;
598
+
599
+ border: solid 1px #90ee90;
600
+
601
+ }
602
+
603
+ .iti{
604
+
605
+ background-color: #32cd32;
606
+
607
+ text-align: center;
608
+
609
+ }
610
+
611
+ .torihikisaki{
612
+
613
+ list-style-type:none;
614
+
615
+ }
616
+
617
+ .topics h2{
618
+
619
+ padding-top: 10px;
620
+
621
+ padding-bottom: 8px;
622
+
623
+ padding-left: 0.2em;
624
+
625
+ color: #ffffff;
626
+
627
+ font-size:25px;
628
+
629
+ border-bottom: solid 1px #b0c4de;
630
+
631
+ background-color: #32cd32;
632
+
633
+ margin: 0 auto;
634
+
635
+ width: 960px;
636
+
637
+ max-width: 100%;
638
+
639
+ }
640
+
641
+ .topics p{
642
+
643
+ border-right: solid 1px #b0c4de;
644
+
645
+ border-left: solid 1px #b0c4de;
646
+
647
+ border-bottom: solid 1px #b0c4de;
648
+
649
+ margin: 0 auto;
650
+
651
+ width: 960px;
652
+
653
+ max-width: 100%;
654
+
655
+ text-align: center;
656
+
657
+ }
658
+
659
+ .henatuki{
660
+
661
+ margin: 0 auto;
662
+
663
+ width: 960px;
664
+
665
+ max-width: 100%;
666
+
667
+ display: flex;
668
+
669
+ }
670
+
671
+ .topsyoukai{
672
+
673
+ font-size:28px;
674
+
675
+ margin: 0 auto;
676
+
677
+ width: 960px;
678
+
679
+ max-width: 100%;
680
+
681
+ padding-top: 30px;
682
+
683
+ border-bottom: solid 1px #dcdcdc;
684
+
685
+ }
686
+
687
+ .syoukai{
688
+
689
+ display: flex;
690
+
691
+ margin-top: 50px;
692
+
693
+ list-style-type: none;
694
+
695
+ margin-left: auto;
696
+
697
+ margin-right: auto;
698
+
699
+ align-items: center;
700
+
701
+ }
702
+
703
+ .syouhin{
704
+
705
+ text-decoration: none;
706
+
707
+ color: #32cd32;
708
+
709
+ margin-left: 10px;
710
+
711
+ margin-right: 10px;
712
+
713
+ width: 80px;
714
+
715
+ }
716
+
717
+ .syouhin2{
718
+
719
+ text-decoration: none;
720
+
721
+ color: #32cd32;
722
+
723
+ margin-right: 15px;
724
+
725
+ margin-left: 60px;
726
+
727
+ width: 80px;
728
+
729
+ }
730
+
731
+ .syouhin3{
732
+
733
+ text-decoration: none;
734
+
735
+ color: #32cd32;
736
+
737
+ margin-right: 15px;
738
+
739
+ margin-left: 80px;
740
+
741
+ width: 80px;
742
+
743
+
744
+
745
+ }
746
+
747
+ .gazou{
748
+
749
+ width: 50px;
750
+
751
+ height: auto;
752
+
753
+ padding-right:15px;
754
+
755
+ }
756
+
35
757
  footer{
36
758
 
37
759
  position: relative;