質問編集履歴

1

試したことを追加しました

2020/06/12 11:28

投稿

ypk
ypk

スコア83

test CHANGED
File without changes
test CHANGED
@@ -20,6 +20,10 @@
20
20
 
21
21
 
22
22
 
23
+ ![イメージ説明](b1dc10eaf95064572740f5d0b8edf616.png)
24
+
25
+
26
+
23
27
  解決策をご存じの方いらっしゃいましたら、ご教授いただけたら幸いです。どうぞよろしくお願いいたします。
24
28
 
25
29
 
@@ -183,3 +187,195 @@
183
187
  .container { position: relative; width: 100%; height: auto !important; height: 100%; min-height: 100%; }
184
188
 
185
189
  ```
190
+
191
+
192
+
193
+ 下記のようなコードにすると、フッターは確かに一番下に来てくれるのですがフッターに書いた文字が中央に来てくれません。
194
+
195
+
196
+
197
+ ```HTML
198
+
199
+ <html>
200
+
201
+ <head>
202
+
203
+ <meta charset="UTF-8">
204
+
205
+ <title>xxxxx(※1)-ログイン管理</title>
206
+
207
+ <link rel="stylesheet" href="header.css">
208
+
209
+ </head>
210
+
211
+
212
+
213
+ <div class="container">
214
+
215
+ <header>
216
+
217
+
218
+
219
+ <div class="header">
220
+
221
+
222
+
223
+ <div class="header_logo">
224
+
225
+ <img src="ITマーク+ロゴタイプ(カラー)_72dpi.jpg" width="50%" height="50%" >
226
+
227
+ </div>
228
+
229
+ <div class="header_logo_font">
230
+
231
+ <p>書籍管理システムログイン</p>
232
+
233
+ </div>
234
+
235
+ </div>
236
+
237
+
238
+
239
+ <hr>
240
+
241
+ </header>
242
+
243
+ <body>
244
+
245
+ <div class="body">
246
+
247
+ <div class="content">
248
+
249
+ <div align="left">
250
+
251
+ <table border="0">
252
+
253
+ <form action="list.html" method="get">
254
+
255
+ <p>ユーザID<br>
256
+
257
+ <input type="text" name="user_id" value="" size="24">
258
+
259
+
260
+
261
+ <p>パスワード<br>
262
+
263
+ <input type="password" name="password" value="" size="24">
264
+
265
+ <br>
266
+
267
+ <input type="submit" value="ログイン">
268
+
269
+
270
+
271
+ </form>
272
+
273
+ </table>
274
+
275
+
276
+
277
+ </div>
278
+
279
+ </div>
280
+
281
+
282
+
283
+ <footer>
284
+
285
+ <hr>
286
+
287
+ <div align="center">
288
+
289
+ <p>フッター</p>
290
+
291
+ </div>
292
+
293
+ </footer>
294
+
295
+
296
+
297
+ </body>
298
+
299
+ </div>
300
+
301
+ </html>
302
+
303
+ ```
304
+
305
+
306
+
307
+ ```CSS
308
+
309
+ @charset "UTF-8";
310
+
311
+
312
+
313
+ .header_logo_font{
314
+
315
+ color:white;
316
+
317
+ }
318
+
319
+
320
+
321
+ .header{
322
+
323
+ float:left;
324
+
325
+
326
+
327
+
328
+
329
+ height:100px;
330
+
331
+ width:100%;
332
+
333
+ background-color:rgba(34, 49, 52, 0.9);
334
+
335
+ padding:10px;
336
+
337
+
338
+
339
+ }
340
+
341
+ .header_logo{
342
+
343
+ float:left
344
+
345
+ }
346
+
347
+
348
+
349
+
350
+
351
+
352
+
353
+ html {
354
+
355
+ min-height: 100%;
356
+
357
+ position: relative;
358
+
359
+ }
360
+
361
+
362
+
363
+ body {
364
+
365
+ margin-bottom: 5em;
366
+
367
+ }
368
+
369
+
370
+
371
+ footer {
372
+
373
+ bottom: 0;
374
+
375
+ height: 5em;
376
+
377
+ position: absolute;
378
+
379
+ }
380
+
381
+ ```