Thymeleafでcssを読み込む方法

Thymeleafでcssを読み込む方法
- 例

ThymeleafでCSSファイルを読み込む方法は、以下の手順で行います。

1. CSSファイルの配置
CSSファイルは通常、src/main/resources/static/css/ フォルダに置きます。
例えば、styles.css という名前のファイルを作成し、static/css フォルダに保存します。

2. HTMLファイルでのCSSの読み込み
Thymeleafテンプレートファイル（例: index.html）で、以下のように link タグを使ってCSSファイルを読み込みます。

<link rel="stylesheet" href="/css/styles.css">

href 属性に指定するパスは、static フォルダからの相対パスです。
Thymeleafでは、/css/styles.css のように書くと、アプリケーションのルートからのパスとして解釈されます。

例

CSSファイル (src/main/resources/static/css/styles.css)

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: blue;
}

Thymeleafテンプレートファイル (src/main/resources/templates/index.html)

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This is a sample page.</p>
</body>
</html>

この方法で、ThymeleafテンプレートでCSSを正しく読み込むことができます。