Spring BootでCSSファイルを反映したい

前提・実現したいこと

現在SpringBootを勉強しており、シンプルな掲示板を作成しております。

**list.html(初期画面)からnew.html(追加画面)**に遷移する仕組みなのですが、
その際に追加画面で指定しているCSSファイルを読み込んでくれません。
遷移自体は可能なため、開発者コンソールで確認してみたところ、
list.htmlが何故かCSSファイルとして読みこまれてしまいます。

自分なりにSpringboot　CSS　反映されない　といった感じで検索をかけてみたのですが、
解決できませんでした。
CSSファイルを読みこませるためにはどのようにしたらよろしいでしょうか。

###ディレクトリ構造

プロジェクト
　　　∟ src/main/java
　　　　　　　　　∟ com.example.demo
　　　　　　　　　　　　　　　　　∟ Controller.java
　　　∟ src/main/resource
　　　　　　　　　　　∟ static
                        ∟ css
                    　　　　∟ new.css
                    ∟ templates
　　　　　　　　　　　     ∟ memo
　　　　　　　　　　　        ∟ list.html
　　　　　　　　　　　        ∟ new.html

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

new.cssファイルが読み込まれない。

該当のソースコード

html
1ファイル名：list.html
2
3<!DOCTYPE html>
4<html>
5<head>
6<meta charset="UTF-8">
7<title>掲示板</title>
8</head>
9<body>
10<h1>掲示板</h1>
11<style>
12table {
13  border-collapse: collapse;
14}
15.col_createDate {width: 100px;}
16.col_title{width: 500px;}
17.col_name {width: 200px;}
18</style>
19<table border="1">
20<tr>
21    <th class="col_createdDate">作成日</th>
22    <th class="col_title">タイトル</th>
23    <th class="col_name">作成者</th>
24    <th></th>
25    <th></th>
26    <th></th>
27</tr>
28<tr th:each="obj : ${data}">
29    <td th:text="${obj.createdDate}"></td>
30    <td th:text="${obj.title}"></td>
31    <td th:text="${obj.name}"></td>
32</tr>
33</table>
34<hr>
35<form action="/add">
36    <input type="submit" value="新規追加" />
37</form> 
38</body>
39</html>

html
1ファイル名：new.html
2
3<!DOCTYPE html>
4<html>
5<head>
6<meta charset="UTF-8">
7<title>新規追加</title>
8<link rel="stylesheet" th:href="@{/css/new.css}" href="/css/new.css"/>
9</head>
10<body>
11<h1>掲示板登録</h1>
12<form method="post" action="/create" th:object="${formModel}">
13<input type="hidden" name="id" th:value="*{id}">
14<table border="1">
15    <tr>
16        <th class="col_title" name="title">タイトル</th>
17        <td>
18            <input type="text" name="titleText" th:value="*{title}" size="20"
19            maxlength="20"/>
20        </td>
21    </tr>
22    <tr>
23        <th class="col_content" name="title">内容</th>
24        <td>
25            <textarea rows="6" cols="60 "name="contentText" th:value="*{title}"
26             maxlength="250"/></textarea>
27        </td>
28    </tr>       
29     <tr>
30        <th class="col_name" name="title">作成者</th>
31        <td>
32            <input type="text" name="nameText" th:value="*{title}" size="20"
33            maxlength="20"/>
34        </td>
35     </tr>
36</table>
37<hr>
38<input type="submit" value="登録" />
39</form>
40<form action="/">
41    <input type="submit" value="戻る" />
42</form>
43</body>
44</html>

java
1Controller
2
3(importとクラス名については省略)
4	@Autowired
5	ToDoRepository repos;
6
7	/* 初期画面への遷移 */
8	@GetMapping
9	public ModelAndView list() {
10		ModelAndView mav = new ModelAndView(); 
11		List<Memo> list = repos.findAll();
12		mav.addObject("data",list);
13		mav.setViewName("memo/list");
14		return mav;
15	}
16	
17	/* 新規画面への遷移 */
18	@GetMapping("/add")
19	public ModelAndView add() {
20		ModelAndView mav = new ModelAndView(); 
21        Memo list = new Memo();
22		mav.addObject("formModel",list);
23		mav.setViewName("memo/new");
24		return mav;
25	}

試したこと

list.htmlにはStyleタグがべた書きされているかと思い、Styleタグを消去
⇒Styleが反映されなくなっただけでcssファイルは読み込まれず。

new.htmlのlinkタグのth:hrefとhrefを**/static/css/new.css**に変更
⇒読み込まれず

list.htmlが読み込まれていたため、new.cssをmemoフォルダに配置してみた
⇒読み込まれず。

SpringBootから起動するのではなくnew.htmlをそのまま開いた。
⇒cssが適用されていた為、cssの記載ミスではないと思われる。
（その時はlinkのhrefを../../static～という風に相対パスに変更しました。）

ブラウザのキャッシュのクリア
⇒読み込まれず。

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

STS 3.9.9
java 1.8.0_221

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

回答2件

こんにちは。
下記数点、確認してみてください。

別の回答者の方がおっしゃるとおり、html側でth:タグを使う場合はthymeleafの使用宣言が必要です。

pom.xmlもしくはbuild.gradleファイルにspring-boot-starter-thymeleafの記載はありますでしょうか？

new.cssを相対パスで指定した場合、読み込めますか？
開発者コンソールにてlist.htmlが読み込まれていることを確認されているので

開発者ツールのキャプチャがあると、解決に近づけるかもしれません。

投稿2019/09/08 20:57

knr

総合スコア20

SpringBootのWebアプリケーションで利用するHTMLは<html>要素に対し、次のようにnamespaceを記述します。

html
1<html xmlns:th="http://www.thymeleaf.org">

これは、SpringBootで作成するWebアプリケーションでは、テンプレートエンジンとしてデフォルトではThymeleafを採用しているからです。

投稿2019/09/04 11:51

A-pZ

総合スコア12011

miu_miu

2019/09/05 01:41

ご回答頂き、ありがとうございます。先ほどnew.htmlの<html>タグにご回答いただいた内容を追加してみたのですが、結果は変わらず反映されませんでした。合わせて関係があるのかはわかりませんが、list.html(初期画面)の方にも追加し、べた書きされている<Style>タグを消してみましたが、反映されませんでした。

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

あなたの回答