質問編集履歴

2

タグ追加

2017/02/10 03:37

投稿

hide09090909
hide09090909

スコア68

test CHANGED
@@ -1 +1 @@
1
- ヘッダー追加及び編集についてこーd
1
+ ヘッダー追加及び編集について
test CHANGED
File without changes

1

コードの追加

2017/02/10 03:37

投稿

hide09090909
hide09090909

スコア68

test CHANGED
@@ -1 +1 @@
1
- ヘッダー追加及び編集について
1
+ ヘッダー追加及び編集についてこーd
test CHANGED
@@ -7,3 +7,615 @@
7
7
 
8
8
 
9
9
  どなたかわかるかた教えて下さい。
10
+
11
+ 以下は現在のコードです。
12
+
13
+ HTMLのtable上部でヘッダを記述し、CSSに記載するヘッダ情報を呼び出したいです。
14
+
15
+
16
+
17
+ ```html
18
+
19
+ <!DOCTYPE html>
20
+
21
+ <html>
22
+
23
+ <head>
24
+
25
+ <meta charset="utf-8">
26
+
27
+ <title>Home</title>
28
+
29
+ <link rel="stylesheet"
30
+
31
+ href="${pageContext.request.contextPath}/resources/app/css/styles.css">
32
+
33
+ </head>
34
+
35
+ <body>
36
+
37
+ <!--<header>
38
+
39
+ <section class="content-header">
40
+
41
+ <h1>
42
+
43
+ <FONT color="white">あああ</FONT>
44
+
45
+ </h1>
46
+
47
+ </section>
48
+
49
+ </header>-->
50
+
51
+ <table>
52
+
53
+ <div class="line">
54
+
55
+ <tr>
56
+
57
+ <th>aaaa</th>
58
+
59
+ <th>aaaa</th>
60
+
61
+ <th>aaaa</th>
62
+
63
+ </tr>
64
+
65
+ </div>
66
+
67
+ <tr bgcolor="wheat">
68
+
69
+ <td>aaaaa</td>
70
+
71
+ <td>aaaaa</td>
72
+
73
+ <td>aaaaa</td>
74
+
75
+ </tr>
76
+
77
+ <tr bgcolor="lightyellow">
78
+
79
+ <td>aaaaaaaa</td>
80
+
81
+ <td>aaaaaaa</td>
82
+
83
+ <td>aaaaaaa</td>
84
+
85
+ </tr>
86
+
87
+ </table>
88
+
89
+ </body>
90
+
91
+ </html>
92
+
93
+
94
+
95
+ ```
96
+
97
+
98
+
99
+ ```css
100
+
101
+ /* @import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700); */
102
+
103
+
104
+
105
+ body {
106
+
107
+ padding:50px;
108
+
109
+ font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
110
+
111
+ color:#777;
112
+
113
+ font-weight:300;
114
+
115
+ }
116
+
117
+
118
+
119
+ h1, h2, h3, h4, h5, h6 {
120
+
121
+ color:#222;
122
+
123
+ margin:0 0 20px;
124
+
125
+ }
126
+
127
+
128
+
129
+ p, ul, ol, table, pre, dl {
130
+
131
+ margin:0 0 20px;
132
+
133
+ }
134
+
135
+
136
+
137
+ h1, h2, h3 {
138
+
139
+ line-height:1.1;
140
+
141
+ }
142
+
143
+
144
+
145
+ h1 {
146
+
147
+ font-size:28px;
148
+
149
+ }
150
+
151
+
152
+
153
+ h2 {
154
+
155
+ color:#393939;
156
+
157
+ }
158
+
159
+
160
+
161
+ h3, h4, h5, h6 {
162
+
163
+ color:#494949;
164
+
165
+ }
166
+
167
+
168
+
169
+ a {
170
+
171
+ color:#39c;
172
+
173
+ font-weight:400;
174
+
175
+ text-decoration:none;
176
+
177
+ }
178
+
179
+
180
+
181
+ a small {
182
+
183
+ font-size:11px;
184
+
185
+ color:#777;
186
+
187
+ margin-top:-0.6em;
188
+
189
+ display:block;
190
+
191
+ }
192
+
193
+
194
+
195
+ .wrapper {
196
+
197
+ width:860px;
198
+
199
+ margin:0 auto;
200
+
201
+ }
202
+
203
+
204
+
205
+ blockquote {
206
+
207
+ border-left:1px solid #e5e5e5;
208
+
209
+ margin:0;
210
+
211
+ padding:0 0 0 20px;
212
+
213
+ font-style:italic;
214
+
215
+ }
216
+
217
+
218
+
219
+ code, pre {
220
+
221
+ font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
222
+
223
+ color:#333;
224
+
225
+ font-size:12px;
226
+
227
+ }
228
+
229
+
230
+
231
+ pre {
232
+
233
+ padding:8px 15px;
234
+
235
+ background: #f8f8f8;
236
+
237
+ border-radius:5px;
238
+
239
+ border:1px solid #e5e5e5;
240
+
241
+ overflow-x: auto;
242
+
243
+ }
244
+
245
+
246
+
247
+ table {
248
+
249
+ width:100%;
250
+
251
+ border-collapse:collapse;
252
+
253
+ }
254
+
255
+
256
+
257
+ th, td {
258
+
259
+ text-align:left;
260
+
261
+ padding:5px 10px;
262
+
263
+ border-bottom:1px solid #e5e5e5;
264
+
265
+ }
266
+
267
+
268
+
269
+ dt {
270
+
271
+ color:#444;
272
+
273
+ font-weight:700;
274
+
275
+ }
276
+
277
+
278
+
279
+ th {
280
+
281
+ color:#444;
282
+
283
+ }
284
+
285
+
286
+
287
+ img {
288
+
289
+ max-width:100%;
290
+
291
+ }
292
+
293
+
294
+
295
+ header {
296
+
297
+ width:270px;
298
+
299
+ float:left;
300
+
301
+ position:fixed;
302
+
303
+ }
304
+
305
+
306
+
307
+ header ul {
308
+
309
+ list-style:none;
310
+
311
+ height:40px;
312
+
313
+
314
+
315
+ padding:0;
316
+
317
+
318
+
319
+ background: #eee;
320
+
321
+ background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
322
+
323
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
324
+
325
+ background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
326
+
327
+ background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
328
+
329
+ background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
330
+
331
+ background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
332
+
333
+
334
+
335
+ border-radius:5px;
336
+
337
+ border:1px solid #d2d2d2;
338
+
339
+ box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
340
+
341
+ width:270px;
342
+
343
+ }
344
+
345
+
346
+
347
+ header li {
348
+
349
+ width:89px;
350
+
351
+ float:left;
352
+
353
+ border-right:1px solid #d2d2d2;
354
+
355
+ height:40px;
356
+
357
+ }
358
+
359
+
360
+
361
+ header ul a {
362
+
363
+ line-height:1;
364
+
365
+ font-size:11px;
366
+
367
+ color:#999;
368
+
369
+ display:block;
370
+
371
+ text-align:center;
372
+
373
+ padding-top:6px;
374
+
375
+ height:40px;
376
+
377
+ }
378
+
379
+
380
+
381
+ strong {
382
+
383
+ color:#222;
384
+
385
+ font-weight:700;
386
+
387
+ }
388
+
389
+
390
+
391
+ header ul li + li {
392
+
393
+ width:88px;
394
+
395
+ border-left:1px solid #fff;
396
+
397
+ }
398
+
399
+
400
+
401
+ header ul li + li + li {
402
+
403
+ border-right:none;
404
+
405
+ width:89px;
406
+
407
+ }
408
+
409
+
410
+
411
+ header ul a strong {
412
+
413
+ font-size:14px;
414
+
415
+ display:block;
416
+
417
+ color:#222;
418
+
419
+ }
420
+
421
+
422
+
423
+ section {
424
+
425
+ width:500px;
426
+
427
+ float:right;
428
+
429
+ padding-bottom:50px;
430
+
431
+ }
432
+
433
+
434
+
435
+ small {
436
+
437
+ font-size:11px;
438
+
439
+ }
440
+
441
+
442
+
443
+ hr {
444
+
445
+ border:0;
446
+
447
+ background:#e5e5e5;
448
+
449
+ height:1px;
450
+
451
+ margin:0 0 20px;
452
+
453
+ }
454
+
455
+
456
+
457
+ footer {
458
+
459
+ width:270px;
460
+
461
+ float:left;
462
+
463
+ position:fixed;
464
+
465
+ bottom:50px;
466
+
467
+ }
468
+
469
+
470
+
471
+ @media print, screen and (max-width: 960px) {
472
+
473
+
474
+
475
+ div.wrapper {
476
+
477
+ width:auto;
478
+
479
+ margin:0;
480
+
481
+ }
482
+
483
+
484
+
485
+ header, section, footer {
486
+
487
+ float:none;
488
+
489
+ position:static;
490
+
491
+ width:auto;
492
+
493
+ }
494
+
495
+
496
+
497
+ header {
498
+
499
+ padding-right:320px;
500
+
501
+ }
502
+
503
+
504
+
505
+ section {
506
+
507
+ border:1px solid #e5e5e5;
508
+
509
+ border-width:1px 0;
510
+
511
+ padding:20px 0;
512
+
513
+ margin:0 0 20px;
514
+
515
+ }
516
+
517
+
518
+
519
+ header a small {
520
+
521
+ display:inline;
522
+
523
+ }
524
+
525
+
526
+
527
+ header ul {
528
+
529
+ position:absolute;
530
+
531
+ right:50px;
532
+
533
+ top:52px;
534
+
535
+ }
536
+
537
+ }
538
+
539
+
540
+
541
+ @media print, screen and (max-width: 720px) {
542
+
543
+ body {
544
+
545
+ word-wrap:break-word;
546
+
547
+ }
548
+
549
+
550
+
551
+ header {
552
+
553
+ padding:0;
554
+
555
+ }
556
+
557
+
558
+
559
+ header ul, header p.view {
560
+
561
+ position:static;
562
+
563
+ }
564
+
565
+
566
+
567
+ pre, code {
568
+
569
+ word-wrap:normal;
570
+
571
+ }
572
+
573
+ }
574
+
575
+
576
+
577
+ @media print, screen and (max-width: 480px) {
578
+
579
+ body {
580
+
581
+ padding:15px;
582
+
583
+ }
584
+
585
+
586
+
587
+ header ul {
588
+
589
+ display:none;
590
+
591
+ }
592
+
593
+ }
594
+
595
+
596
+
597
+ @media print {
598
+
599
+ body {
600
+
601
+ padding:0.4in;
602
+
603
+ font-size:12pt;
604
+
605
+ color:#444;
606
+
607
+ }
608
+
609
+ }
610
+
611
+
612
+
613
+ .line {
614
+
615
+ bgcolor:gold;
616
+
617
+ color: White;
618
+
619
+ }
620
+
621
+ ```