この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:5
ページ更新者:atom
更新日時:2026-10-03 21:41:49

タイトル: テンプレートフラグメント（ヘッダー等の共有化）
SEOタイトル: テンプレートフラグメント（ヘッダー等の共有化）

この記事の要点
  • Spring (Thymeleaf) のテンプレートフラグメント: ヘッダー / フッターの共通化
  • 定義: 共通部品ファイルに th:fragment="name" を付ける
  • 読み込み: th:replace="~{path/fragment :: name}" または th:insert
  • 部分置換できるので、ページごとに差分だけ書ける

 

本稿はSpring Frameworkのテンプレートフラグメントについて説明します。

 

テンプレートフラグメントとは？

テンプレートフラグメントを利用することで、ヘッダーやフッター等を部品化し、共有化させることができます。

 

フラグメントの作成

以下の内容の/src/main/resource/templates/test/fragment.htmlを作成します。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

  <body>

    <!-- Header -->

   

th:fragment="header">

   

ヘッダー

   

 

   

   

th:fragment="footer">

   

フッター

   

  </body>

</html>

 

サンプルページの作成

フラグメントを取り込むサンプルページを作成します。

以下の内容の/src/main/resource/templates/test/content.htmlを実装します。

<!DOCTYPE HTML>

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

    <head>

        <title>Content Page</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    </head>

    <body>

   

   

th:include="/test/fragment :: header">

 

   

   

コンテント

 

   

   

th:include="/test/fragment :: footer">

    </body>

</html> 

 

出力結果

ヘッダー

コンテント

フッター