ホーム>技術

Thymeleafで外部のCSSファイルを読み込む方法

当サイトはアフィリエイト広告を利用しています。

目次

効率的なJava学習サービスの探し方をご存知ですか？

Javaを学習したいけれどどの学習サービスを選べば良いか分からないという悩みを抱えていませんか？
Javaは市場価値が高い為、学習サービスを提供しているものも多く、条件に合うものを見つけるのに苦労しますよね。
以下の記事ではJavaを入門レベルから勉強できるおすすめ学習サービスをご紹介しています。
Spring FrameworkやThymeleafがカリキュラムに含まれているものがあるので、ぜひ参考にしてください！

Javaを入門レベルから勉強できるおすすめ学習サービス7選

実行環境

OSmacOS Catalina 10.15.1
EclipsePhoton 2018-09
Java8
Spring Tool Suit3.9.6
Spring Boot2.1.13
Thymeleaf2.1.2

開発および実行環境がない人は、以下の記事を参考に構築してください。

Spring BootとThymeleafを導入してHello worldを表示する方法

Thymeleafで外部のCSSファイルを読み込む方法

今回は、Thymeleafで外部のCSSファイルを読み込む方法をご紹介します。

また、サンプルとして以下のようなプログラムを作成するので、ぜひ参考にしてください。

  • テンプレートファイルに外部のCSSファイルを読み込む
  • <h1> タグに color: tomato（#ff6347） を適用する
サンプルのキャプチャ

外部のCSSファイルを読み込む方法

Thymeleafで外部のCSSファイルを読み込む方法は以下のとおりです。

  1. CSSファイルを /src/main/resources/static/ に配置する
  2. テンプレートファイルでCSSファイルを読み込む

CSSファイルを /src/main/resources/static/ に配置する

はじめに、CSSファイルを「/src/main/resources/static/」に配置します。
上記のディレクトリ以外にファイルを配置してもスタイルは適応されないので注意してください。

テンプレートファイルでCSSファイルを読み込む

CSSファイルが配置できたら、テンプレートファイルでCSSファイルを読み込みます。
テンプレートファイルの <head> タグ内の <link> タグに th:href で記述します。
パスには「/src/main/resources/static/」から見た場所を指定します。

<head>
  <!-- src/main/resources/static/css/common.css を読み込む -->
  <link th:href="@{/css/common.css}" rel="styleSheet">
</head>

外部のCSSファイルを読み込むプログラムを実装する

外部のCSSファイルを読み込むプログラムを実装する手順は以下のとおりです。

実装手順は以下のとおりです。

  1. CSSファイルを作成する
  2. Controllerクラスを作成する
  3. テンプレートファイルを作成する
  4. 動作を確認する

また、フォルダ構成は以下のとおりです。

src/main/java/com.example.controller
 ├─ CssController.java
src/main/resources/static/css
 ├─ common.css
src/main/resources/templates
 └─ css.html

CSSファイルを作成する

はじめに、CSSファイルを作成します。
今回は「common.css」という名前で作成します。

<h1> タグに color: tomato（#ff6347） を適用しています。

@charset "UTF-8";

body {
  background-color: whitesmoke;
  color: #333;
}

div {
  margin: 45px 0 0 45px;
}

h1 {
  color: tomato;
}

Controllerクラスを作成する

次に、Controllerクラスを作成します。
今回は「CssController」という名前で作成します。

URLは「/css」、テンプレートファイル名は「css」を指定します。

package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class CssController {
	
	@RequestMapping("/css")
	public String sample(Model model) {
		
		return "css";
	}
}

テンプレートファイルを作成する

Controllerクラスの作成が完了したら、テンプレートファイルを作成します。
今回は「css」という名前で作成します。

th:href="@{/css/common.css}" で外部のCSSファイルを読み込んでいます。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleafで外部のCSSファイルを読み込む方法</title>
<link th:href="@{/css/common.css}" rel="styleSheet">
</head>
<body>
  <div>
    <h1>トマト</h1>
    <p>ナス科の一年生果菜。<br>原産地は南アフリカのアンデス高地。</p>
  </div>
</body>
</html>

動作を確認する

最後に、ブラウザで「http://localhost:8080/css」にアクセスして動作を確認します。
スタイルが適用されていたら動作の確認は完了です。

お疲れさまでした

Thymeleafで外部のCSSファイルを読み込む方法をご紹介しました。
少しでも参考になれば幸いです。

ThymeleafとSpringを一度に学びたくありませんか？

以下の書籍は、Thymeleafを書籍で学びたい人やThymeleafと併せてSpring Frameworkを学習したい人におすすめしている書籍です。
Springについての書籍ですが、Thymeleafの基礎や基本構文から他システムとの連携等30ページほど取り上げられており、ThymeleafとSpringを一度に学べる書籍になっています。
ぜひ一度手に取ってみてください。

Spring徹底入門 Spring FrameworkによるJavaアプリケーション開発
翔泳社
¥1,980 （2022/07/18 00:00時点 | Amazon調べ）
Amazonで見る
Kindleで見る

どんな記事が読みたいですか？

現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください！