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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

1回答

1124閲覧

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

marontarou

総合スコア0

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

1グッド

0クリップ

投稿2023/01/17 01:49

前提

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/ツールのバージョンなど)

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

退会済みユーザー😍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KT001

2023/01/20 10:58 編集

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

回答1

0

Text

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

投稿2023/01/17 01:56

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問