Q&A
th:href="@{ }"内を、相対パスではなく絶対パスで記述すれば、表示できるようになると思います。
ただし、Bootstrap5ではなくBootstrap3のコード（クラス）が含まれていますが、何かすごく古い記事などを参照していますでしょうか？（参照元がBootstrap3なら、そちらのバージョンを使った方が、スムーズに進むかもしれません）
前提
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/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
Text
1読み込み初期化に失敗しているなどの可能性?
投稿2023/01/17 01:56
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
