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

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

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

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

Thymeleaf

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

Q&A

解決済

1回答

937閲覧

Thymeleafでのheader,footer,navの共通化の実装について。

konkon.gitsune

総合スコア16

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

Thymeleaf

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

0グッド

0クリップ

投稿2019/09/05 00:37

編集2019/09/05 00:45

今現在ホームぺージを作成しております。
Thymeleafを使用し、共通部位の簡易化を図ろうと実装したのですがうまくいきません。
具体的にはプログラムを実行した際にページに表示されません。
(F12を押しても記述が見当たりませんでした。)
下記には共通化させたいfooterと実装したい場所であるtop.htmlを掲載いたしました。
Thymeleafの記述の仕方がいまいち理解できていないのでご存知の方ご教授いただけると幸いです。

template-----common-----footer.html
|
---top--------top.html
top.html

html

1<!DOCTYPE html> 2<html lang="ja" xmlns:th="http://www.w3.org/1999/xhtml" 3th:fragment="header(body),footer(body),nav(body)"/> 4 5<head> 6 <meta charset="UTF-8"/> 7 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1" /> 8 <link rel="stylesheet" type="text/css" th:href="@{css/fontawesome.css}" /> 9 <link rel="stylesheet" type="text/css" th:href="@{css/style.css}" /> 10</head> 11<body> 12 <div th:fragment="~{common/header :: header}"></div> 13 <div th:fragment="~{common/nav :: nav}"></div> 14 <div class="main"> 15 <h2><img src="image/GAK_nekocafenonekocyan20130921_TP_V4.jpg" alt="猫カフェで至福のひとときを=w=" class="cat"></h2> 16 <p>新宿駅から徒歩8分。自由気ままな猫たちがお出迎えする至福の隠れ家があります。 17 日々の疲れを癒してくれるもふもふな猫たちと厳選されたコーヒーを提供してお客様の憩いの場所となることをお祈りいたします。</p> 18 </div> 19<ul class="service clearfix"> 20 <li><i class="fas fa-couch green"></i><h3>隠れ家の紹介</h3> 21 <p>「猫の隠れ家」についてのご案内。入室の際のお約束や猫と仲良くなれるコツを伝授しちゃいます!至福のときを過ごすための案内ですので、しっかり読み込んでください。</p> 22 <a href="" class="box-link"></a></li> 23 <li><i class="fas fa-cat pink"></i><h3>猫キャスト</h3> 24 <p>隠れ家にしまう気分屋を紹介。みなさんインタビューに参加してくださいました。</p> 25 <a href="" class="box-link"></a></li> 26 <li><i class="fas fa-chalkboard-teacher orange"></i><h3>お問い合わせ</h3> 27 <p>猫の飼い方や触れ合い方、みなさんの疑問にお答えします!これから猫を飼ってみたい方!ぜひお問い合わせを!(里親も募集です)</p> 28 <a href="" class="box-link"></a></li> 29</ul> 30 <div class="wrap clearfix"> 31 <div class="newsBox"> 32 <h4>お知らせ</h4> 33 <dl> 34 <dt>2020.10.21</dt> 35 <dd>10月の休館について</dd> 36 </dl> 37 <dl> 38 <dt>2020.11.12</dt> 39 <dd>11月の休館について</dd> 40 </dl> 41 <dl> 42 <dt>2020.12.21</dt> 43 <dd>12月の休館について</dd> 44 </dl> 45 </div> 46 </div> 47 <div class="infoBox"> 48 <h4>隠れ家解放のお知らせ</h4> 49 <dl> 50 <dt><i class="icon-time"></i>解放時間</dt> 51 <dd>平日10:00縲・9:00</dd> 52 <dt><i class="icon-home"></i>住所</dt> 53 <dd>〇〇〇〇</dd> 54 <dt><i class="icon-time"></i>携帯電話</dt> 55 <dd>070-0000-0000</dd> 56 </dl> 57 </div> 58 <div th:fragment="~{common/footer :: footer}"></div> 59</body> 60</html>

header.html

html

1<!DOCTYPE html> 2<html lang="ja" xmlns:th="http://www.w3.org/1999/xhtml"> 3 4<head> 5 <meta charset="UTF-8"> 6</head> 7<body> 8 <div id ="header" th:fragment = "header" th:remove="tag"> 9 <img src = "image/cat-icon.png" alt = "猫のアイコン" /> 10 <h1 class="site-title">猫の隠れ家<span>Secret Cat Cafe</span></h1> 11 </div> 12</body> 13</html>

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

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

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

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

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

m.ts10806

2019/09/05 00:41

ところどころ「tymeleaf」となっているので「Thymeleaf」に修正いただけたらと
m.ts10806

2019/09/05 00:42

あと「うまくいきません」だけだと何も伝わりませんので 具体的に起きている現象、問題を記載してください
konkon.gitsune

2019/09/05 00:42

気が付きませんでした! いつもご指摘くださり、ありがとうございます。
guest

回答1

0

ベストアンサー

Thymeleafのnamespace宣言がありません。

html

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

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#a-multi-language-welcome

投稿2019/09/05 13:13

A-pZ

総合スコア12011

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

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

konkon.gitsune

2019/09/05 23:07

宣言に誤りがあったのですね! 訂正します! また記述方法はURLを参考にさせていただきます! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問