ヘッダー追加及び編集について

Webアプリの画面にヘッダーを追加したいです。
ヘッダーの背景は色付きで、その上に色付き文字とメニューボタンを配置したいです。
1つの画面にメニューアイコン以外を表示することは出来たのですが、他の画面でもヘッダーは固定して表示したいので、CSSでヘッダーを登録して、HTMLから呼び出したいです。

どなたかわかるかた教えて下さい。
以下は現在のコードです。
HTMLのtable上部でヘッダを記述し、CSSに記載するヘッダ情報を呼び出したいです。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>Home</title>
6<link rel="stylesheet"
7	href="${pageContext.request.contextPath}/resources/app/css/styles.css">
8</head>
9<body>
10	<!--<header>
11		<section class="content-header">
12			<h1>
13				<FONT color="white">あああ</FONT>
14			</h1>
15		</section>
16	</header>-->
17	<table>
18	<div  class="line">
19		<tr>
20			<th>aaaa</th>
21			<th>aaaa</th>
22			<th>aaaa</th>
23		</tr>
24		</div>
25		<tr bgcolor="wheat">
26			<td>aaaaa</td>
27			<td>aaaaa</td>
28			<td>aaaaa</td>
29		</tr>
30		<tr bgcolor="lightyellow">
31			<td>aaaaaaaa</td>
32			<td>aaaaaaa</td>
33			<td>aaaaaaa</td>
34		</tr>
35	</table>
36</body>
37</html>
38

css
1/* @import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700); */
2
3body {
4  padding:50px;
5  font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
6  color:#777;
7  font-weight:300;
8}
9
10h1, h2, h3, h4, h5, h6 {
11  color:#222;
12  margin:0 0 20px;
13}
14
15p, ul, ol, table, pre, dl {
16  margin:0 0 20px;
17}
18
19h1, h2, h3 {
20  line-height:1.1;
21}
22
23h1 {
24  font-size:28px;
25}
26
27h2 {
28  color:#393939;
29}
30
31h3, h4, h5, h6 {
32  color:#494949;
33}
34
35a {
36  color:#39c;
37  font-weight:400;
38  text-decoration:none;
39}
40
41a small {
42  font-size:11px;
43  color:#777;
44  margin-top:-0.6em;
45  display:block;
46}
47
48.wrapper {
49  width:860px;
50  margin:0 auto;
51}
52
53blockquote {
54  border-left:1px solid #e5e5e5;
55  margin:0;
56  padding:0 0 0 20px;
57  font-style:italic;
58}
59
60code, pre {
61  font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
62  color:#333;
63  font-size:12px;
64}
65
66pre {
67  padding:8px 15px;
68  background: #f8f8f8;  
69  border-radius:5px;
70  border:1px solid #e5e5e5;
71  overflow-x: auto;
72}
73
74table {
75  width:100%;
76  border-collapse:collapse;
77}
78
79th, td {
80  text-align:left;
81  padding:5px 10px;
82  border-bottom:1px solid #e5e5e5;
83}
84
85dt {
86  color:#444;
87  font-weight:700;
88}
89
90th {
91  color:#444;
92}
93
94img {
95  max-width:100%;
96}
97
98header {
99  width:270px;
100  float:left;
101  position:fixed;
102}
103
104header ul {
105  list-style:none;
106  height:40px;
107  
108  padding:0;
109  
110  background: #eee;
111  background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
112  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
113  background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
114  background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
115  background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
116  background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
117  
118  border-radius:5px;
119  border:1px solid #d2d2d2;
120  box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
121  width:270px;
122}
123
124header li {
125  width:89px;
126  float:left;
127  border-right:1px solid #d2d2d2;
128  height:40px;
129}
130
131header ul a {
132  line-height:1;
133  font-size:11px;
134  color:#999;
135  display:block;
136  text-align:center;
137  padding-top:6px;
138  height:40px;
139}
140
141strong {
142  color:#222;
143  font-weight:700;
144}
145
146header ul li + li {
147  width:88px;
148  border-left:1px solid #fff;
149}
150
151header ul li + li + li {
152  border-right:none;
153  width:89px;
154}
155
156header ul a strong {
157  font-size:14px;
158  display:block;
159  color:#222;
160}
161
162section {
163  width:500px;
164  float:right;
165  padding-bottom:50px;
166}
167
168small {
169  font-size:11px;
170}
171
172hr {
173  border:0;
174  background:#e5e5e5;
175  height:1px;
176  margin:0 0 20px;
177}
178
179footer {
180  width:270px;
181  float:left;
182  position:fixed;
183  bottom:50px;
184}
185
186@media print, screen and (max-width: 960px) {
187  
188  div.wrapper {
189    width:auto;
190    margin:0;
191  }
192  
193  header, section, footer {
194    float:none;
195    position:static;
196    width:auto;
197  }
198  
199  header {
200    padding-right:320px;
201  }
202  
203  section {
204    border:1px solid #e5e5e5;
205    border-width:1px 0;
206    padding:20px 0;
207    margin:0 0 20px;
208  }
209  
210  header a small {
211    display:inline;
212  }
213  
214  header ul {
215    position:absolute;
216    right:50px;
217    top:52px;
218  }
219}
220
221@media print, screen and (max-width: 720px) {
222  body {
223    word-wrap:break-word;
224  }
225  
226  header {
227    padding:0;
228  }
229  
230  header ul, header p.view {
231    position:static;
232  }
233  
234  pre, code {
235    word-wrap:normal;
236  }
237}
238
239@media print, screen and (max-width: 480px) {
240  body {
241    padding:15px;
242  }
243  
244  header ul {
245    display:none;
246  }
247}
248
249@media print {
250  body {
251    padding:0.4in;
252    font-size:12pt;
253    color:#444;
254  }
255}
256
257.line {
258	bgcolor:gold;
259	color: White;
260}

masaya_ohashi

2017/02/10 00:03

これはCSSに「どの画面でも常に表示したいヘッダ」の内容を書いておいて、HTMLで<div class="header></div>と書くだけでどの画面にも同じメニューが表示されるようにしたい、という旨でしょうか？

hide09090909

2017/02/10 00:13

言葉足らずで申し訳ありません。仰るとおりの事を行いたいです。

kei344

2017/02/10 02:15

具体的にHTMLおよびCSSを省略せずに質問文に追記し、どの部分をどのように「呼び出す」のかを例示ください。

hide09090909

2017/02/10 02:39

質問を編集いたしました。

kei344

2017/02/10 02:52

「CSSに記載するヘッダ情報」とはどの部分で、呼び出すとはどのような挙動でしょうか。

kei344

2017/02/10 02:55

の部分をテンプレート的に呼び出したいのであれば、質問タグに「JSP」とか入れれば回答を得られると思います。

行動規範の内容に同意します

回答3件

CSSで扱えるのは「見た目」だけであり、「内容」ではありません。あなたのおっしゃるようなCSSに一度書いておけば全部のページのヘッダにメニューが置ける、ということはできません。あくまで「全部のページのメニューの色合いとか位置を統一する」とか、CSSにできることはその程度です。メニューの項目(リンクの記載)とかまで省略できるわけではありません。

一般的に「どのページにも同じ内容のものを表示したい」場合、素のHTMLでは難しいです。一般的な方法は何らかのフレームワークを使い、テンプレートで書くことです。これらが「何を言っているのかよくわからない」のであれば、おとなしく全ページにコピペするほうが早いでしょう。その代わり、なにかメニューを変更した際はすべてのページにまたコピペする手間が発生しますが…

投稿2017/02/10 00:29

masaya_ohashi

総合スコア9206

hide09090909

2017/02/10 00:49

理解しました。 HTMLの各ページでヘッダーを追記し、CSSで指定した内容を各ページから読み込むということを行いたいです。

行動規範の内容に同意します

cssではむりですね
javascriptが使えれば、ある程度の表示はできますが。

PHPなどが使えれば共通のheader.phpなどを用意しておいて表示する場面で
require_once('header.php')
とかすれば共通で使用できます。
WEBアプリだからHTMLとCSSだけとは思えないので、何か使用していればそのことを追記してください

投稿2017/02/10 00:40

date

総合スコア1820

ベストアンサー

JSPをお使いであれば、includeが便利です。ヘッダ部分をheader.jspと別ファイルにしてしまって、各ページでincludeを使いheader.jspを取り込めば、全ページで固定のヘッダを表示できます。
http://www.javadrive.jp/servlet/jsp_action/index4.html

投稿2017/02/10 03:44

masaya_ohashi

総合スコア9206