【Eclipse使用】jspファイルがCSSを読み込まなくなってしまった

前提・実現したいこと

Eclipseを使用してwebアプリケーションを作る練習をしています。
最初は問題なく反映されていたのですが、いきなりすべてのCssが反映されなくなってしまいました。
上手く反映されるように直したいです。

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

【下の方に画像を3枚追加しました】

↑の画像のように、CSSファイルはmainstyleという名前でWebContent直下にあります。
読み込みたいjspファイルは、faceというフォルダの中にあり

<%@ include file = "../header.html" %>

の形でインクルードしてCSSファイルを読み込んでいました。
header.htmlの記述は画像の通りです。
このサイトで色々調べたところ、CSSファイルはコンテキストルートから書かないとうまく読み込めないという事がかいてあったので、そのように記述したのですが改善しません。
キャッシュも消したりしてみましたがだめでした。

前は、
href = "../mainstyle.css"

で反映されていたのに、アプリの動作確認をしていたら、いきなりすべてのスタイルがブラウザから消えてしまい、それから全く直りません。
jspと同じ階層にしてその場所をコンテキストルートから指定してみたりなど、色々試してみましたがだめです。

↓の画像のように、しっかりパスもコンテキストルートになっているのですが、CSSが全く反応していません。

検証モード

呼び出す側のjspの記述

CSSファイル

どなたか、何か改善方法があれば教えて頂きたいです。
宜しくお願い致します。

【参考画像他】

【環境】
Tomcat9
Eclipse 4.16.0
ローカル端末はwindows10

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

回答1件

ベストアンサー

インクルードしているのがHTMLファイル、つまりJSPとして認識されないので、${}で書いた内容は一切変換されません。

インクルードする内容もJSPにすれば良いです。

ちなみに、今のままのheader.htmlですと、不要なHTMLのタグが含まれて正しくないHTMLの構造になりますので、

jsp
1<%@ page language="java" contentType="text/html; charset=UTF-8"
2    pageEncoding="UTF-8"%>
3<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css">
4<script....(省略)....>

のようにしておいて、

jsp
1<jsp:include page="../header.jsp"></jsp:include>

とするのが正しいです。

投稿2020/08/27 16:34

A-pZ

総合スコア12011

cosmosyuki

2020/08/28 01:23 編集

コメントありがとうございます。早速、htmlファイルではなくjspでヘッダを作って記述を変更してみました。しかし、やはりうまくいきません。 ↓header側の　header.jsp↓ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/mainstyle.css"> </head> <body> ↓出力側の　index.jsp↓ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <jsp:include page = "../header.jsp"></jsp:include> <div class = "mainframe"> <div class = "title"> <p class = "aligncenter">在庫照会システム<br> ログイン画面</p> ～以下コード省略～このように記述しました。書き間違えなどはないとは思うのですが、うまく動作しませんでした。検証モードで見てみると、コンテキストパスはうまく取得できていて /zaiko/mainstyle.css となっていました。ファイルの配置は、質問時の画像の配置と変えてません。

A-pZ

2020/08/28 05:02

コンテキストパスからのURLが正しく出力されているのに読み込まれない場合は、実際にそのCSSファイルが読み込まれているかを、Chromeの検証モード＞Networkタブで動作確認ができます。もし何らかの理由で（パスが違う、名前が正しくない、ファイルが搭載されていないなど）読み込めない場合は、404エラーで出力されます。

cosmosyuki

2020/08/28 05:21

Networkタブで見てみました。きちんと読み込まれています。 Networkタブでは表示されているのに、 Elementsタブを開き、そこに表示されたhtmlの記述の、cssで記述している箇所をクリックしても、適用されているCSSは何も表示されませんでした。参考画像を質問下部に添付します。

A-pZ

2020/08/28 05:35

ブラウザのキャッシュをクリアしても現象は変わりませんでしょうか。私の環境では問題なく表示されますし、スクリーンショット以外のコードを見た限りでは、問題が発生する内容ではありません。

cosmosyuki

2020/08/28 06:21

色々見ていただいてありがとうございます。教えていただいた中で、これ以上直すところがない状態なので、プロジェクトを新しく作り直して、すべてコピーして全く同じものを作り直してみました。すると、前と同じようにCSSがうまく反映されて表示されるようになりました・・・もしかすると、何かのタイミングでプロジェクトが壊れてしまったのかもしれません・・・（？）以前、Eclipseでファイルを扱うときに、サーブレットについてはコピーしたり外部からコピーして取り込むと、プロジェクトが壊れてしまうことを経験しています。今回はそういったことは、一切していないのですが・・・ CSSが反映されなくなるまでは、コンテキストルートからではない相対パスでCSSファイルを読み込んでいたので、最初は反映されていたが、正しい指定方法ではないので、壊れてしまったのでしょうか・・。 A-pZ様、何度も教えて頂き有難うございます。教えて頂いた方法は、これから活用していきます。なかなか解決せず、お手数をお掛けして申し訳ありませんでした。

A-pZ

2020/08/28 10:33

いえいえ、これはなかなか大変な状態だと思います。こちらこそありがとうございました。

cosmosyuki

2020/08/30 23:38

なぜだか・・翌日にeclipseを開いて作業を進めようと、ページの表示を試みましたが、またCSSが反応しなくなっていました・・・ブラウザでは読み込んでいるようなのに、画面には反映されず・・・こんどはプロジェクトを作り直してもだめでした。しばらく格闘しそうです。