thymeleafで共通部分のcssが適用されない

4339 ワード
Java spring-boot Thymeleaf Java テキストリンク

はじめに

thymeleaf layout dialect機能を使用したサイトにおいて、共通部分のcssが適用されない事案が発生したので、その対処法について紹介します。

環境

OS: macOS Catalina 10.15.6
JDK:14.0.1
Spring Boot 2.3.3
jquery 3.3.1-1
bootstrap 4.2.1

エラー概要

共通部分にcssが正常に適用されると下図のように画面上部に深緑のヘッダー、ロゴ、検索窓が表示されます。

今回、他のページより深い階層にhtmlファイルを作成、格納し実行したところ下記のようになりました。

共通部分に含まれているナビゲーションバー、ロゴ、検索窓は表示されているので、thymeleaf layout dialect機能自体は適用されているようですが、共通部分のcssが適用されておりません。

利用ファイルの階層

今回cssが適用されなかったページは、赤枠のhtmlで作成。
cssが適用されたページとは異なった階層なので、cssへのパスが適切ではない事による事象ではないか?と筆者は仮定いたしました。

デベロッパーツールで適用されているcssのパスを確認

デベロッパーツールでこのページがどういったパスでcssへアクセスしているかを確認します。

htmlファイル上では「css/template.css」とありますが、実際は「http://localhost:8080/mypage/css/template.css」
とcssファイルが格納されていないディレクトリへアクセスを試みています。

共通部分「template.html」の内容を修正

共通部分のhtmlである「template.html」のhead要素の中にある、
<link th:href="@{css/template.css}" rel="stylesheet"></link>の下に下記を追記します。
<link th:href="@{../css/template.css}" rel="stylesheet"></link>

「利用ファイルの階層」でも説明したように、「deleteUser.html」はcssが適用されたhtmlよりも1段階下の階層に位置するので、「th:href」に../ (1階層上の)を加え、「deleteUser.html」からcssへアクセスできるようにしました。

template.html
<head>
    <meta charset="UTF-8"></meta>

    <link th:href="@{/webjars/bootstrap/4.2.1/css/bootstrap.min.css}" rel="stylesheet"></link>
    <script th:src="@{/webjars/jquery/3.3.1-1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.2.1/js/bootstrap.min.js}"></script>

    <link th:href="@{css/template.css}" rel="stylesheet"></link>
    <link th:href="@{../css/template.css}" rel="stylesheet"></link>

    <script src="https://kit.fontawesome.com/665f18a48e.js" crossorigin="anonymous"></script>


    <title>template</title>
</head>

保存して実行

cssが適用されました。