画面の共通化について(Thymleaf)

前提

SprinBoot × Thymleaf × Bootstrap で現在勉強をしています。
レイアウトの共通化を行いたいのですが、上手く共通化が反映されず、
共通部品が画面に表示されてきません。

申し訳ございませんが、
どなたか助けて頂けないでしょうか？

↓起動した際の画面
イメージ説明
＜環境＞
・SpringToolSuite　4-4.16.1
・apach-mabven 3.8.6
・Bootstrap　5.0.2

イメージ説明

実現したいこと

ヘッダー、メニュー、コンテンツで構成される画面を構築したいです。

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

エラーメッセージは出ておりません
共通のレイアウトが反映されておりません

該当のソースコード

html
1<!-- layout.html -->
2<!DOCTYPE html>
3<html xmlns:th="http://www.thymeleaf.org"
4  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
5<head>
6<meta charset="UTF-8"></meta>
7<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8<!-- CSS読込 -->
9<link  th:href="@{../common/css/bootstrap.min.css}" rel="stylesheet"type="text/css">
10<link rel="stylesheet" th:href="@{../common/login/login.css}">
11<!-- JS読込 -->
12<script th:src="@{../common/js/bootstrap.min.js}" defer></script>
13<title></title>
14</head>
15<body>
16<!-- ヘッダー -->
17<nav layout:replace="~{layout/header::header}"></nav>
18<!-- メニュー -->
19<div class="container-fluid">
20<div class="row">
21<nav class="col-sm-2 bg-light sidebar pt-2">
22<div layout:replace="~{layout/menu::menu}"></div>
23</nav>
24</div>
25</div>
26<!-- コンテンツ -->
27<div class="container-fluid">
28<div class="row">
29<div class="col-sm-10 offset-sm-2 main">
30<div layout:fragment="content"></div>
31</div>
32</div>
33</div>
34</body>
35</html>

html
1<!-- menu.html -->
2<!DOCTYPE html>
3<html xmlns:th="http://www.thymeleaf.org"
4  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
5  layout:decorate="~{layout/layout}">
6<head>
7</head>
8<body>
9<div layout:fragment="menu" class="bg-light">
10<ul class="nav nav-pills nav-stacked">
11<li role="presentation">
12<a class="nav-link" th:href="@{'/user/list'}">ユーザ一覧</a>
13</li>
14</ul>
15</div>
16</body>
17</html>

html
1<!-- header.html -->
2<!DOCTYPE html>
3<html xmlns:th="http://www.thymeleaf.org"
4  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
5  layout:decorate="~{layout/layout}">
6<head>
7</head>
8<body>
9<nav layout:fragment="header" class="navbar navbar-inverse navbar-fixed-top navbar-dark bg-dark">
10<div class="container-fluid">
11<div class="navbar-header">
12<a class="navbar-brand" href="#">SpringSample</a>
13</div>
14<form method="post" th:action="@{/logout}">
15<button class="btn btn-link pull-right navbar-brand" type="submit">
16          ログアウト
17</button>
18</form>
19</div>
20</nav>
21</body>
22</html>

html
1<!-- list.html -->
2<!DOCTYPE html>
3<html xmlns:th="http://www.thymeleaf.org"
4  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
5  layout:decorate="~{/layout/layout}">
6<head>
7<title>ユーザー一覧</title>
8<!-- 個別CSS読込 -->
9<link rel="stylesheet" th:href="@{../css/user/list.css}">
10</head>
11<body>
12<div layout:fragment="content">
13<div class="header border-bottom">
14<h1 class="h2">ユーザー一覧画面</h1>
15</div>
16</div>
17</body>
18</html>

xml
1<!-- pom.xml -->
2<?xml version="1.0" encoding="UTF-8"?>
3<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
5<modelVersion>4.0.0</modelVersion>
6<parent>
7<groupId>org.springframework.boot</groupId>
8<artifactId>spring-boot-starter-parent</artifactId>
9<version>2.7.7</version>
10<relativePath/> <!-- lookup parent from repository -->
11</parent>
12<groupId>com.example</groupId>
13<artifactId>Kubota</artifactId>
14<version>0.0.1-SNAPSHOT</version>
15<name>Kubota</name>
16<description>Demo project for Spring Boot</description>
17<properties>
18<java.version>11</java.version>
19</properties>
20<dependencies>
21<dependency>
22<groupId>org.webjars</groupId>
23<artifactId>bootstrap</artifactId>
24<version>5.0.2</version>
25</dependency>
26<dependency>
27<groupId>org.springframework.boot</groupId>
28<artifactId>spring-boot-starter-data-jdbc</artifactId>
29</dependency>
30<dependency>
31<groupId>org.springframework.boot</groupId>
32<artifactId>spring-boot-starter-data-jpa</artifactId>
33</dependency>
34<dependency>
35<groupId>org.springframework.boot</groupId>
36<artifactId>spring-boot-starter-jdbc</artifactId>
37</dependency>
38<dependency>
39<groupId>org.springframework.boot</groupId>
40<artifactId>spring-boot-starter-thymeleaf</artifactId>
41</dependency>
42<dependency>
43<groupId>org.springframework.boot</groupId>
44<artifactId>spring-boot-starter-web</artifactId>
45</dependency>
46 <dependency>
47<groupId>org.springframework.boot</groupId>
48<artifactId>spring-boot-devtools</artifactId>
49<scope>runtime</scope>
50<optional>true</optional>
51</dependency>
52<dependency>
53<groupId>com.mysql</groupId>
54<artifactId>mysql-connector-j</artifactId>
55<scope>runtime</scope>
56</dependency>
57<dependency>
58<groupId>org.projectlombok</groupId>
59<artifactId>lombok</artifactId>
60<optional>true</optional>
61</dependency>
62<dependency>
63<groupId>org.springframework.boot</groupId>
64<artifactId>spring-boot-starter-test</artifactId>
65<scope>test</scope>
66</dependency>
67<dependency>
68<groupId>nz.net.ultraq.thymeleaf</groupId>
69<artifactId>thymeleaf-layout-dialect</artifactId>
70</dependency>
71</dependencies>
72<build>
73<plugins>
74<plugin>
75<groupId>org.springframework.boot</groupId>
76<artifactId>spring-boot-maven-plugin</artifactId>
77<configuration>
78<excludes>
79<exclude>
80<groupId>org.projectlombok</groupId>
81<artifactId>lombok</artifactId>
82</exclude>
83</excludes>
84</configuration>
85</plugin>
86</plugins>
87</build>
88</project>

試したこと

pom.xmlに下記記載がることを確認しています。
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>

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

ここにより詳細な情報を記載してください。

KT001

2023/01/20 10:58 編集

th:href="@{ }"内を、相対パスではなく絶対パスで記述すれば、表示できるようになると思います。ただし、Bootstrap5ではなくBootstrap3のコード（クラス）が含まれていますが、何かすごく古い記事などを参照していますでしょうか？（参照元がBootstrap3なら、そちらのバージョンを使った方が、スムーズに進むかもしれません）

回答1件

Text
1読み込み初期化に失敗しているなどの可能性?

投稿2023/01/17 01:56

退会済みユーザー

総合スコア0

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.02%

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

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

質問する

Thymeleafで、バリデーションのエラーメッセージを表示したいです。

回答1

クリップ3

更新

2019/01/27

Q&A

解決済

Spring Bootの起動時にエラーが出る

回答1

クリップ0

更新

2019/07/11

Q&A

解決済

SpringBoot pom.xmlでのプロジェクトビルドエラー

回答1

クリップ0

更新

2019/12/19

Q&A

受付中

spring boot でのthymeleafでの値の受渡し時にエラー

回答0

クリップ1

更新

2022/01/12

Q&A

受付中

SpringBootのWarをTomcatでデプロイすると404エラーになる

回答2

クリップ0

更新

2023/01/19

Q&A

受付中

springのエラーメッセージ：org.springframework.beans.factory.UnsatisfiedDependencyExceptionの解決

回答1

クリップ0

更新

2022/01/12

Q&A

解決済

【spring-boot】EclipseでMaven依存関係フォルダができない

回答1

クリップ2

更新

2016/07/19

Q&A

受付中

Spring Boot -プロジェクト作成し、起動した後のエラー

回答1

クリップ0

更新

2022/01/12

同じタグがついた質問を見る

トップ Thymeleafに関する質問

画面の共通化について(Thymleaf)

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

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