JSPが外部CSSを読み込んでいない、もしくは外部CSSを読み込んでいるが反映されない

EclipseでServletとJSPでWebアプリケーションを作成しているのですが、JSPに外部CSSが反映されません。
記述が間違っているのか、Eclipseや動作確認に使っているChromeの問題なのか、最早自分では判断出来なくなったので質問させていただきます。
/WebContent/test/hello.jspに/WebContent/css/style2.cssを読み込ませたいです。

フォルダ階層

hello.jsp

JSP
1<%@ page language="java" contentType="text/html; charset=UTF-8"
2    pageEncoding="UTF-8"%>
3<!DOCTYPE html>
4<html>
5<head>
6<meta charset="UTF-8">
7<link href="${pageContext.request.contextPath}/css/style2.css" rel="stylesheet">
8
9<title>hello.jsp</title>
10
11</head>
12<body>
13Hello
14
15<h1>H1H1H1H1H1H1</h1>
16<p>ppppppppppppp</p>
17
18</body>
19</html>

style2.css

CSS
1@charset "UTF-8";
2
3h1{
4	font-size: 18px;			/* 文字の大きさを18pxに */
5	font-weight: bold;		/* 文字の太さを太く */
6	margin: 0;				/* 余白をなくす */
7	color: #2E99A9;			/* 文字の色を緑に */
8}
9
10p{
11	color: red;
12}

Chromeの開発者オプションで動作を確認したところ、CSSファイル自体は読み取っているらしいのですが、画面には反映されない状態です。

内部CSSで背景色を指定すると背景色が画面に反映されました。

ご回答お待ちしております。

今までにやったこと

外部CSSを呼び出しているlink要素の記述を変えてみる
プロジェクトのクリーン
サーバー(Eclipseで動かしているTomcat)のクリーン
Chromeのキャッシュをクリアする

使用環境

Eclipse(ver.4.14.0)

【追加】Chromeの開発者ツールでElementsタブを開いたところ

KoichiSugiyama

2021/08/01 11:35

開発ツールのElementsタブを選択すると、ブラウザに読み込まれているHTMLが表示されますので、<body>タグを選択してみてください。そこで、<body>に対してどのCSSプロパティが効いているか確認できると思います。そのプロパティがどのファイルに記述されているかも確認できますので、ご自身が指定したCSSより後から指定されているプロパティがないか調べてみて結果を追記してもらった方が良いと思います。

nechikoyan

2021/08/01 13:02

ありがとうございます。開発ツールのElementsタブを開いた画像を追加しました。 h1に適用されているCSSを確認してみたところ、ユーザーエージェントのスタイルシートというブラウザ毎のデフォルトのCSSが適用されているようです。試しにnormarize.css(https://necolas.github.io/normalize.css/8.0.1/normalize.css)をダウンロードしてcssフォルダに配置し、hello.jspから呼び出してみましたが、normarize.css、style2.css共に読み込んでいないようでした。

K_3578

2021/08/02 00:55

Consoleタブに何かエラーは出ていないのでしょうか？

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

回答1件

自己解決

動的Webプロジェクトを新規作成して、KokyakuKanriと同じ内容のhello.jspと、背景色の指定を追加したstyle2.cssを配置したところ、CSSを読み込むようになりました。

KokyakuKanriのJSPは未だにCSSを読み込んでいません。
動的Webプロジェクト作成時に何かミスをしていたか、リファクタリング>名前変更でファイルやフォルダの名前を何度か変えたのでそれによって不具合が起きたのではないかと思います。
まだ作成序盤で作成したファイルも少ないので、KokyakuKanriのファイルを新しいプロジェクトにコピーして作成を継続したいと思います。

投稿2021/08/03 11:11

nechikoyan

総合スコア12

nechikoyan

2021/08/04 11:10

あれからまたCSSが効かない状態になり、調べたところ文字エンコーディングの指定をするフィルターが原因だったようです。こちらの方の方法で完全に解決しました。(私もこの方も多分同じ技術書を参考にしてる…) https://qiita.com/solabito331/items/cc1b443a59bc4b0cda3e

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