JSPにCSSファイルが反映されません。

前提・実現したいこと

Java初学者です。
JSPにcssファイルを読み込みたいのですが、反映されません。
ご教授頂ければ幸いです。
よろしくお願いします。

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

ブラウザーで表示させると、以下のエラーが出ます。
GET http://localhost:8080/login/css/login.css net::ERR_ABORTED 404

追記：
cssファイルをWebContent配下に移動させると、
Resource interpreted as Stylesheet but transferred with MIME type text/html:
の警告が出てきます。

ソースコード

JSP
1<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2
3<!DOCTYPE html>
4<html>
5<head>
6<meta charset="UTF-8">
7<title>登録画面</title>
8<link href="${pageContext.request.contextPath}/css/login.css" rel="stylesheet" type="text/css">
9</head>
10<body>
11<h1>新規登録</h1>
12
13<form action="/login/conform" method=post>
14<h3>ユーザーID</h3>
15<p>名前：</p><input type="text" name="userName" value="${userName}">
16<p>Eメール：</p><input type="email" name="email" placeholder="example@gmail.com" value="${email}">
17<p>パスワード：</p><input type="password" name="pass" value="${pass}">
18<p>住所：</p><input type="text" name="adress" value="${adress}">
19<p>電話番号：</p><input type="tel" name="phoneNum" value="${phoneNum}">
20<p>生年月日：</p><input type="date" name="birthDay" placeholder="yyyy/mm/dd" value="${birthDay}">
21<br><br><br>
22
23<input type="submit" value="登録確認">
24</form>
25
26<p><a href="${pageContext.request.contextPath}/login">ログイン</a></p>
27<p><a href="/login/logout">ログアウト</a></p>
28
29</body>
30</html>

css
1h1 {
2	background-color: skyblue;
3	color: white;
4}

試したこと

下記、3種類実行致しましたが、3つ目のinclude以外は反映されませんでした。
ただincludeした場合、cssファイルのソースコードも表示されてしまいました。

１．

JSP
1<link href="${pageContext.request.contextPath}/css/login.css" rel="stylesheet" type="text/css">

２．

JSP
1<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
2
3<link href="<c:url value='/css/login.css' />" rel="stylesheet" type="text/css">

３．

JSP
1<%@ include file="/css/login.css" %>

追記：
login.cssファイルをWebContent配下に移動。

補足情報（FW/ツールのバージョンなど）

表示の際は、サーブレットからフォワードしています。

以下、階層構造になります。

追記：
ブラウザでlogin.cssファイルのResponse HeadersのContent-Type: text/htmlになっていました。

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

回答2件

自己解決

別で作成していたフィルターに原因がありました。

response.setContentType("text/html;charset=UTF-8")

→response.setCharacterEncoding("UTF-8")

した後、ブラウザー上でCtrl+F5のキャッシュ消去で無事cssファイルが反映されました。

投稿2020/06/10 12:00

moaidesu

総合スコア0

WebContent配下におかないとブラウザから参照できないのでは。

同じような質問過去にありますよ。

投稿2020/06/10 05:48

m.ts10806

総合スコア80875

moaidesu

2020/06/10 09:35

m.ts10806さん、ご回答ありがとうございます。 WebContent配下にcssファイルを移動し、クリーンも行いましたが、反映はされませんでした。ただ、コンソールのエラー表示はなくなり、代わりに Resource interpreted as Stylesheet but transferred with MIME type text/html: という警告が出るようになりました。ブラウザーからcssファイルの応答ヘッダを確認すると、Content-Typeがtext/htmlになっていました。調べてみると、Apacheのhttpd.confをいじればいいとのことですが、、、現在Tomcatで起動しているので、Tomcatでの設定変更の仕方を探しています。