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

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

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

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

Eclipse

Eclipseは、IBM社で開発された統合開発環境のひとつです。2001年11月にオープンソース化されました。 たくさんのプラグインがあり自由に機能を追加をすることができるため、開発ツールにおける共通プラットフォームとして位置づけられています。 Eclipse自体は、Javaで実装されています。

Tomcat

TomcatはApache Software Foundation (ASF)で開発されたオープンソースのWebコンテナです。

CSS

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

Q&A

解決済

1回答

9409閲覧

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

cosmosyuki

総合スコア4

JSP

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

Eclipse

Eclipseは、IBM社で開発された統合開発環境のひとつです。2001年11月にオープンソース化されました。 たくさんのプラグインがあり自由に機能を追加をすることができるため、開発ツールにおける共通プラットフォームとして位置づけられています。 Eclipse自体は、Javaで実装されています。

Tomcat

TomcatはApache Software Foundation (ASF)で開発されたオープンソースのWebコンテナです。

CSS

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

0グッド

0クリップ

投稿2020/08/27 11:02

編集2022/01/31 11:36

前提・実現したいこと

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

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

【下の方に画像を3枚追加しました】
参考画像1
↑の画像のように、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

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

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

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

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

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

guest

回答1

0

ベストアンサー

インクルードしているのが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が反応しなくなっていました・・・ ブラウザでは読み込んでいるようなのに、画面には反映されず・・・ こんどはプロジェクトを作り直してもだめでした。 しばらく格闘しそうです。
834yano

2022/01/31 02:36

私も同様の症状になりました。 作り直して読み込まれるようになりましたが、翌日だめでした。 その後解決策は何かございましたでしょうか? お忙しいところ大変恐縮ですがご連絡いただけますと幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問