ヘッダー追加及び編集について
- 評価
- クリップ 0
- VIEW 956
Webアプリの画面にヘッダーを追加したいです。
ヘッダーの背景は色付きで、その上に色付き文字とメニューボタンを配置したいです。
1つの画面にメニューアイコン以外を表示することは出来たのですが、他の画面でもヘッダーは固定して表示したいので、CSSでヘッダーを登録して、HTMLから呼び出したいです。
どなたかわかるかた教えて下さい。
以下は現在のコードです。
HTMLのtable上部でヘッダを記述し、CSSに記載するヘッダ情報を呼び出したいです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet"
href="${pageContext.request.contextPath}/resources/app/css/styles.css">
</head>
<body>
<!--<header>
<section class="content-header">
<h1>
<FONT color="white">あああ</FONT>
</h1>
</section>
</header>-->
<table>
<div class="line">
<tr>
<th>aaaa</th>
<th>aaaa</th>
<th>aaaa</th>
</tr>
</div>
<tr bgcolor="wheat">
<td>aaaaa</td>
<td>aaaaa</td>
<td>aaaaa</td>
</tr>
<tr bgcolor="lightyellow">
<td>aaaaaaaa</td>
<td>aaaaaaa</td>
<td>aaaaaaa</td>
</tr>
</table>
</body>
</html>
/* @import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700); */
body {
padding:50px;
font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#777;
font-weight:300;
}
h1, h2, h3, h4, h5, h6 {
color:#222;
margin:0 0 20px;
}
p, ul, ol, table, pre, dl {
margin:0 0 20px;
}
h1, h2, h3 {
line-height:1.1;
}
h1 {
font-size:28px;
}
h2 {
color:#393939;
}
h3, h4, h5, h6 {
color:#494949;
}
a {
color:#39c;
font-weight:400;
text-decoration:none;
}
a small {
font-size:11px;
color:#777;
margin-top:-0.6em;
display:block;
}
.wrapper {
width:860px;
margin:0 auto;
}
blockquote {
border-left:1px solid #e5e5e5;
margin:0;
padding:0 0 0 20px;
font-style:italic;
}
code, pre {
font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
color:#333;
font-size:12px;
}
pre {
padding:8px 15px;
background: #f8f8f8;
border-radius:5px;
border:1px solid #e5e5e5;
overflow-x: auto;
}
table {
width:100%;
border-collapse:collapse;
}
th, td {
text-align:left;
padding:5px 10px;
border-bottom:1px solid #e5e5e5;
}
dt {
color:#444;
font-weight:700;
}
th {
color:#444;
}
img {
max-width:100%;
}
header {
width:270px;
float:left;
position:fixed;
}
header ul {
list-style:none;
height:40px;
padding:0;
background: #eee;
background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
border-radius:5px;
border:1px solid #d2d2d2;
box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
width:270px;
}
header li {
width:89px;
float:left;
border-right:1px solid #d2d2d2;
height:40px;
}
header ul a {
line-height:1;
font-size:11px;
color:#999;
display:block;
text-align:center;
padding-top:6px;
height:40px;
}
strong {
color:#222;
font-weight:700;
}
header ul li + li {
width:88px;
border-left:1px solid #fff;
}
header ul li + li + li {
border-right:none;
width:89px;
}
header ul a strong {
font-size:14px;
display:block;
color:#222;
}
section {
width:500px;
float:right;
padding-bottom:50px;
}
small {
font-size:11px;
}
hr {
border:0;
background:#e5e5e5;
height:1px;
margin:0 0 20px;
}
footer {
width:270px;
float:left;
position:fixed;
bottom:50px;
}
@media print, screen and (max-width: 960px) {
div.wrapper {
width:auto;
margin:0;
}
header, section, footer {
float:none;
position:static;
width:auto;
}
header {
padding-right:320px;
}
section {
border:1px solid #e5e5e5;
border-width:1px 0;
padding:20px 0;
margin:0 0 20px;
}
header a small {
display:inline;
}
header ul {
position:absolute;
right:50px;
top:52px;
}
}
@media print, screen and (max-width: 720px) {
body {
word-wrap:break-word;
}
header {
padding:0;
}
header ul, header p.view {
position:static;
}
pre, code {
word-wrap:normal;
}
}
@media print, screen and (max-width: 480px) {
body {
padding:15px;
}
header ul {
display:none;
}
}
@media print {
body {
padding:0.4in;
font-size:12pt;
color:#444;
}
}
.line {
bgcolor:gold;
color: White;
}
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+3
CSSで扱えるのは「見た目」だけであり、「内容」ではありません。あなたのおっしゃるようなCSSに一度書いておけば全部のページのヘッダにメニューが置ける、ということはできません。あくまで「全部のページのメニューの色合いとか位置を統一する」とか、CSSにできることはその程度です。メニューの項目(リンクの記載)とかまで省略できるわけではありません。
一般的に「どのページにも同じ内容のものを表示したい」場合、素のHTMLでは難しいです。一般的な方法は何らかのフレームワークを使い、テンプレートで書くことです。これらが「何を言っているのかよくわからない」のであれば、おとなしく全ページにコピペするほうが早いでしょう。その代わり、なにかメニューを変更した際はすべてのページにまたコピペする手間が発生しますが…
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+2
cssではむりですね
javascriptが使えれば、ある程度の表示はできますが。
PHPなどが使えれば共通のheader.phpなどを用意しておいて表示する場面で
require_once('header.php')
とかすれば共通で使用できます。
WEBアプリだからHTMLとCSSだけとは思えないので、何か使用していればそのことを追記してください
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
+1
JSPをお使いであれば、includeが便利です。ヘッダ部分をheader.jspと別ファイルにしてしまって、各ページでincludeを使いheader.jspを取り込めば、全ページで固定のヘッダを表示できます。
http://www.javadrive.jp/servlet/jsp_action/index4.html
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 89.99%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
masaya_ohashi
2017/02/10 09:03
これはCSSに「どの画面でも常に表示したいヘッダ」の内容を書いておいて、HTMLで<div class="header></div>と書くだけでどの画面にも同じメニューが表示されるようにしたい、という旨でしょうか?
hide09090909
2017/02/10 09:13
言葉足らずで申し訳ありません。仰るとおりの事を行いたいです。
kei344
2017/02/10 11:15
具体的にHTMLおよびCSSを省略せずに質問文に追記し、どの部分をどのように「呼び出す」のかを例示ください。
hide09090909
2017/02/10 11:39
質問を編集いたしました。
kei344
2017/02/10 11:52
「CSSに記載するヘッダ情報」とはどの部分で、呼び出すとはどのような挙動でしょうか。
kei344
2017/02/10 11:55
<!--<header></header>-->の部分をテンプレート的に呼び出したいのであれば、質問タグに「JSP」とか入れれば回答を得られると思います。