質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

6110閲覧

position:fixedを使用すると背景が透過する

tetutetu

総合スコア419

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/07/08 04:39

編集2019/07/08 06:32

前提・実現したいこと

サイト内全ページで共通のスタイルを持ったヘッダーを、ページ上部に固定、かつ指定した色の(今回は白)背景で持たせたい
(ちょうどteratailのような動作をするヘッダーを作りたい)

発生している問題・エラーメッセージ

背景色が意図したとおり動作しており、ヘッダーが固定されていない状態で
cssにposition:fixedを記述したところ、背景色が消える、右寄せが適用されない等の問題が発生した

該当のソースコード

main-menu.jsp(実際に読み込むJSPファイル)

jsp

1<html> 2<head> 3<meta charset="UTF-8"> 4<title>ヘッダー表示のテスト</title> 5</head> 6<body style="background-color:lightblue"> 7<div id="header-id"class="header-class"> 8<%@ include file="header_test.jsp"%> 9</div> 10<div align="center"> 11<h1><br>中<br>身<br>の<br>要<br>素</h1> 12</div> 13</body> 14</html>

header_test.jsp(全ページで利用したいヘッダーのJSP)

jsp

1<html> 2<head> 3<meta charset="UTF-8"> 4<link rel="stylesheet" href="./css/header_test.css"> 5</head> 6<body> 7 <header class="site-header"> 8 <p class="right"> 9 ○○ さんでログインしています。 10 <input type="button"value="ログアウト"> 11 <input type="button"value="メニューへ"> 12 <input type="button"value="ヘルプ"> 13 </p> 14 </header> 15</html>

header_test.css(ヘッダーに適用されているcss)

css

1.header-class{ 2 /*position:fixed;*/ 3 background:white; 4} 5#header-id{ 6 background-color:white; 7} 8.right{ 9 float: right; 10 /*position:fixed;*/ 11 right:0; 12 top:15px; 13}

試したこと

・header-classにposition:fixedを持たせた状態、持たせない状態でそれぞれ表示した
→持たせなかった場合(画像1)、一見正常に見えるが、白枠のみ固定されている状態で、スクロールするとボタン類のみ移動する(画像2)
(これ以上スクロールすると枠が見えなくなるため、止めてあります。実際はこのままスクロールし続けると白枠が見えない状態(画像3と同じような状態)になります。
画像1
画像1
画像2
画像2
→持たせた場合(画像3)、背景色が消え、ボタン類のみが上部に固定されて動きます。
画像3
画像3
・右寄せ用クラスのrightにpisition:fixedを持たせた場合(上記画像123)、持たせない場合で検証した
→height,widthを弄れば、「指定した色のヘッダーを上部に固定」の条件は満たせるものの(画像ではheight,widthの数値は適当です)
右寄せが解除されてしまう、さらに中身の要素に被さり、要素が一部見えなくなる(画像4)
画像4
画像4

追記

jQuery利用での方法を回答していただき、ローカルファイルの方へ反映、表示を行ったところ、ヘッダーが非表示になってしまっている状態です。(画像5)
画像5
画像5

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

header_test.jspがhtmlタグから始まるフル装備のhtmlを返しています?

<header class="site-header">の中身だけ返すようにしてみては?

jQuery処理

  • main-menu.jsp

jQuery

1<html> 2<head> 3<meta charset="UTF-8"> 4<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 5<script> 6$(function(){ 7 $.ajax({ 8 url:"y.php", 9 dataType:"html", 10 }).done(function(data){ 11 $('<html>').html(data).find('header').appendTo('.header-class'); 12 $('<html>').html(data).find('link').appendTo('head'); 13 }); 14}); 15</script> 16<title>ヘッダー表示のテスト</title> 17</head> 18<body style="background-color:lightblue"> 19<div id="header-id"class="header-class"> 20</div> 21<div align="center"> 22<h1><br>中<br>身<br>の<br>要<br>素</h1> 23</div> 24</body> 25</html>
  • header_test.jsp
<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./css/header_test.css"> </head> <body> <header class="site-header"> <p class="right"> ○○ さんでログインしています。 <input type="button"value="ログアウト"> <input type="button"value="メニューへ"> <input type="button"value="ヘルプ"> </p> </header> </html>

投稿2019/07/08 05:06

編集2019/07/08 05:45
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tetutetu

2019/07/08 05:14 編集

回答ありがとうございます 一部(classの中身のみ等?)をincludeすることも可能ということでしょうか その場合どういった記述になるのでしょうか… 追記: 上記の方法について検索しながら返信させていただいたのですが jQuery「.load( )」で簡単にhtmlパーツをインクルードする方法 https://www.plusdesign.co.jp/blog/?p=4832 のように、jQueryを使う形になるのでしょうか。
yambejp

2019/07/08 05:26

header_test.jsp自体をコンパクトにするという意図です。 htmlタグの中にhtmlタグを入れ込むのはおかしいです もちろんやりようにやってはjQueryでも処理できそうですが jspでインクルードしているようなので読み込んだあとにjQueryで 何かできるレベルではないと思います
tetutetu

2019/07/08 05:30

header_test.jspの中身を <header class="site-header">~</header> のみで完結させるということでしょうか? 確かに、htmlタグの中身にhtmlタグが入っているのは考えてみると異常ですね…
tetutetu

2019/07/08 05:39

ひとまず、<header class="site-header">~</header>で完結させると解釈致しまして header_test.jspの修正を行いました(質問本文では変更していません) 結果、画像1,2の状況が発生しなくなり rightクラスにposition:fixedが入っているか否かで 画像3,4の状態になるのみで、改善には至りませんでした…
yambejp

2019/07/08 05:45 編集

jQueryでの読み込み方を追記しておきました。 header_test.jspで呼んでいるheader_test.cssは当然無効なので main-menu.jsp側でheader_test.cssを読み込む必要があります (一応その部分も反映させています)
tetutetu

2019/07/08 05:53

さまざまな方法での解決策のご提示ありがとうございます。 ローカルファイルの方に反映させ、読み込んだのですが 一度目の編集の、cssを読み込んでいない段階のもので main-menu.jsp側でcssを読み込んだところ、画像3 編集後のものを読み込んだところ、ヘッダーそのものが非表示、中身の要素のみ表示される形となってしまいました。
tetutetu

2019/07/08 06:16

このコメント後、質問を編集させていただきますが potition:fixed、右寄せしたい・・・ https://teratail.com/questions/186724 という質問に辿り着きまして(質問時点では、右寄せよりも先に背景色の問題だと考えていたため、スルーしていました…) 画像4に近い状態ではありますが、画像4時点では何故か適用されなかったwidth:100%が適用されるようになり、実現したい形に近づいては来ました。
tetutetu

2019/07/08 06:39 編集

編集してから、これは内容が異なるため別口で質問した方が適切であると感じました。 編集履歴から一つ前の状態に復元し、この質問は一度締めさせていただきます。 yambejp様、回答ありがとうございました。機会があれば、また知恵をお貸しいただければ幸いです。 追記:テキストの右寄せについて、勘違いしていました。 text-align:rightで一発で解決しました。
guest

0

自己解決

header_test.jspを

jsp

1<link rel="stylesheet" href="./css/header_test.css"> 2 <header> 3 <div class ="right"> 4 <p> 5 ○○ さんでログインしています。 6 <input type="button"value="ログアウト"> 7 <input type="button"value="メニューへ"> 8 <input type="button"value="ヘルプ"> 9 </p> 10 </div> 11 </header>

適用するcssを

css

1.right{ 2 width:100%; 3 position:fixed; 4 top:0; 5 background-color:#FFFFFF; 6 text-align:right 7} 8

以上のように変更。

投稿2019/07/08 06:38

tetutetu

総合スコア419

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問