Thymeleafで外部のCSSファイルを読み込む
当サイトはアフィリエイト広告を利用しています。
Thymeleafを書籍で学びたい方やThymeleafと一緒にSpringも習得したい方におすすめな書籍です。
Springについての書籍ですが、Thymeleafの基本構文や他システムとの連携など30ページほど取り上げられています。
ThymeleafとSpringは親和性の高い技術なので、これを機にSpringを学んでみるのはいかがでしょうか？
ポチップ
実行環境
実行環境がない方は、こちらの記事を参考にしてください。
| 項目 | バージョン |
|---|---|
| OS | macOS Catalina |
| JDK | Oracle JDK@8 |
| Thymeleaf | 3.1 |
Thymeleafで外部のCSSファイルを読み込む
CSSファイルを src/main/resources/static 配下に配置し、head タグ内で th:href="@{CSSファイルのパス}" を使用して読み込みます。パスは src/main/resources/static から見た場所を指定します。
<head th:fragment="head">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ミルラク Thymeleaf コードサンプル</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👀</text></svg>">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link th:href="@{/css/style.css}" rel="stylesheet" />
</head>お疲れさまでした
Thymeleafで外部のCSSファイルを読み込む方法を紹介しました。
少しでも参考になれば幸いです。