More than 1 year has passed since last update.

[SpringBoot + Thymeleaf] layoutを使用して各画面共通のhtmlを作成する

Posted at 2023-06-17

はじめに

本記事で以下を解説。

layoutタグを使用して「ヘッダー」「メニューバー」といった各画面共通のhtmlを適用する方法

以下のような流れで記載します。

layout作成サンプル用ページの画面構成把握
layout属性の概要と、属性の配置全体像の把握
layout属性の記述形式
layout適用のための準備作業
html、cssファイルの作成
完成画面

layout適用の構成イメージ

画面構成としては以下のような配置を目指す。
「コンテンツ」部分を画面ごとに切り替え、「ヘッダー」「メニューバー」「フッター」は固定で配置。

用意するhtmlは以下。

ファイル名	用途
layout.html	レイアウトのベースとなるhtml。このhtmlにヘッダーやメニューバーを適用していく
header.html	ヘッダー用html
menu.html	メニューバー用html
content.html	コンテンツ用html
footer.html	フッター用html

レイアウト用の属性など

適用する属性は以下です。
同じ要素名でも、layout.html（本記事ではベースファイルと呼称　※1）とそれ以外（本記事ではパーツファイルと呼称　※1）で記載する場合では意味が異なってくるので注意。

要素名	用途
layout:replace	べース側に記載。要素に指定されたhtmlでタグの内容を置き換える
layout:fragment（ベース側）	ベース側に記載。要素に指定されたhtmlをタグに追加する。
layout:fragment（パーツ側）	パーツ側に記載。ベースから参照するためのキー名を記載する
layout:decorate	パーツ側に記載。どのレイアウトにhtmlを組み込むかを指定　※2

※1 「ベース」「パーツ」は正式な名称ではなくあくまで本記事のみで区別するための名称。
※2 デフォルトでは「src/main/resources/templates」からの相対パスを指定。

全体像として、各htmlに記載する要素は以下のように記載。

layout属性の記述形式

layout:replace

layout:fragment
ベース側とパーツ側で記述形式は同じ。

layout:decorate

準備

Thymeleafでlayout要素を使えるようにする。

build.gradle

implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'

layoutを使う際はhtmlタグに以下定義を記載する。

xxx.html

xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

src/main/resources/templatesの配下に「layout」フォルダを作成し、各htmlファイルを作成して配置。

src/main/resources/templates
 - layout
  - layout.html
  - menu.html
  - content.html
  - footer.html

cssも作成。

src/main/resources/static/css
   - layout
    - css
     - layout.css

Contlloerの作成。「layout/content.html」に遷移するようにしておく。

Controller.java

	@GetMapping()
	public String get(Model model) {
		return "layout/content";		
	}

html作成

画面の配置などを調整する要素は必要最小限にとどめています。

layout.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
<meta charset="UTF-8">

<!-- CSS読み込み -->
<link rel="stylesheet"
	th:href="@{/webjars/bootstrap/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/css/layout/layout.css}">

<title></title>
</head>

<body>

	<!-- ヘッダー -->
	<div>
		<div layout:replace="~{layout/header::header}"></div>
	</div>

	<!-- メニュー -->
	<div>
		<nav class="menu col-sm-2">
			<div layout:replace="~{layout/menu::menu}"></div>
		</nav>
	</div>

	<!-- コンテンツ -->
	<div>
		<nav class="main col-sm-10 offset-sm-2">
			<div layout:fragment="content"></div>
		</nav>
	</div>

	<!-- フッター -->
	<div>
		<div layout:replace="~{layout/footer::footer}"></div>
	</div>

</body>
</html>

header.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorate="~{layout/layout}">

<head>
</head>

<body>
	<nav layout:fragment="header" class="header navbar navbar-fixed-top">
		<div>
			<a>ヘッダー部分</a>
		</div>
	</nav>
</body>
</html>

menu.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorate="~{layout/layout}">

<head>
</head>

<body>
	<div layout:fragment="menu">
		<ul class="nav">
			<li role="presentaion"><a>メニュー項目部分</a></li>
		</ul>
	</div>
</body>
</html>

content.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorate="~{layout/layout}">

<head>
<title>レイアウトテスト用ページ</title>
</head>

<body>
	<div layout:fragment="content">
		<div>
			<a>コンテンツ部分</a>
		</div>
	</div>
</body>

</html>

footer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorate="~{layout/layout}">

<head>
</head>

<body>

	<nav layout:fragment="footer" class="footer navbar fixed-bottom">
		<div>
			<a>フッター部分</a>
		</div>
	</nav>
</body>
</html>

css作成

画面の配置などを調整する要素は必要最小限にとどめています。

layout.css

.header{
	border:2px solid;
}

.menu{
	position:fixed;
	display:block;
	top:58px;
	bottom:0;
	left:0;
	border:2px solid;
	margin-bottom:58px;
}
	
.main{
	position:fixed;
	display:block;
	bottom:0;
	top:58px;
	margin-bottom:58px;
	padding-left:20px;
	border:2px solid;
}

.footer{
	border:2px solid;
}

完成画面

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up