ThymeleafでCSSをインポートする方法

2024-02-08 02:44 Thymeleaf CSS インポート

  1. CSSファイルの配置: まず、Thymeleafで使用するCSSファイルを配置します。一般的な慣例として、静的リソースを格納するディレクトリは「static」と呼ばれます。プロジェクトの「src/main/resources/static/」ディレクトリ内にCSSファイルを配置します。

  2. テンプレートでCSSをインポート: Thymeleafテンプレート内でCSSファイルをインポートするには、次の手順を実行します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
</head>
<body>
    <!-- ここにコンテンツを追加 -->
</body>
</html>

上記のコードでは、th:href="@{/css/style.css}"の部分でCSSファイルをインポートしています。@{/css/style.css}は、CSSファイルの相対パスを指定しています。必要に応じてパスを修正してください。

  1. サーバーでテンプレートを処理: Thymeleafテンプレートをサーバーで処理する必要があります。具体的な手順は、使用しているサーバーフレームワークやビルドツールによって異なりますが、一般的にはThymeleafの依存関係をビルド設定に追加し、サーバーを起動します。

以上の手順に従ってThymeleafでCSSファイルをインポートすることができます。これにより、テンプレート内で定義した要素にスタイルが適用されます。必要に応じてCSSファイルをカスタマイズし、デザインを調整することができます。