新人と先輩の会話形式で理解しよう

新人

「先輩、Thymeleafで動的にCSSを切り替える方法ってあるんですか？」

先輩

「もちろんあるよ。Thymeleafではth:style属性を使って、動的にスタイルを設定することができるんだ。」

新人

「なるほど！それってHTMLのstyle属性と同じようなものですか？」

先輩

「似てるけど、違いがあるんだ。th:styleを使えば、サーバー側の値に応じて見た目を変えることができるんだよ。」

新人

「それは便利そうですね！具体的にどう使うんですか？」

先輩

「じゃあまずはThymeleafの基本から確認してみようか。」

1. Thymeleafとは？

Thymeleaf（タイムリーフ）は、Spring BootやSpring MVCでよく使われるテンプレートエンジンです。HTMLの中にサーバー側の値を埋め込むことができ、動的にページを生成できます。例えば、データベースから取得した値をHTMLに表示したり、条件によって表示を切り替えたりすることができます。

他のテンプレートエンジンと異なり、ThymeleafはHTMLとして直接ブラウザで確認できる「ナチュラルテンプレート」設計が特徴です。これにより、デザイナーと開発者が同じHTMLを扱えるため、開発効率が向上します。

Spring環境では、@Controllerで指定したメソッドの戻り値をThymeleafテンプレートに渡して、動的にページを構築できます。開発環境としては、pleiadesを使い、ビルドツールにはGradleを使用します。

以下は、簡単なThymeleafテンプレートの例です。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleafサンプル</title>
</head>
<body>
    <p th:text="${message}">ここにメッセージが表示されます</p>
</body>
</html>

このように、th:textでサーバー側のデータを表示することができます。

2. th:styleの役割とは？

th:styleは、HTMLのstyle属性に値を動的に設定できるThymeleafの属性です。通常のHTMLでは次のように静的なCSSを指定します。


<p style="color: red;">赤い文字です</p>

しかしThymeleafでは、条件や変数に応じてスタイルを変更したい場合に、次のように書くことができます。


<p th:style="'color:' + ${colorValue}">色を動的に変更します</p>

このように、変数${colorValue}に設定された値（例：red、blueなど）によって、文字色を切り替えることが可能です。

静的なHTMLでは固定されたスタイルしか指定できませんが、Thymeleafのth:styleを使えば、サーバーの値をもとに動的なCSS設定ができるという点が大きな違いです。

3. 動的にCSSクラスを切り替える必要性

Webアプリケーションでは、ユーザーの状態やデータの内容によって、見た目を変えたいことがよくあります。例えば、在庫が少ない商品を赤色で強調したり、エラーが発生した場合に背景色を変更するなどのケースです。

こうした動的なスタイル変更を実現するために、Thymeleafのth:style属性が役立ちます。HTMLのstyle属性をJavaコードから直接書き換える必要はなく、テンプレート内でスマートに切り替えが可能です。

例として、在庫が少ないときに文字を赤くするサンプルを見てみましょう。


在庫数:

このコードでは、在庫数が5未満なら文字色を赤に、それ以外の場合は黒に設定します。条件式を使うことで、テンプレート側で簡単にデザインを制御できるのがThymeleafの強みです。

また、Springコントローラ側では次のように値を設定します。


@Controller
public class StockController {

    @GetMapping("/stock")
    public String showStock(Model model) {
        model.addAttribute("stock", 3);
        return "stockView";
    }
}

このように、コントローラから渡した値をThymeleafテンプレートで受け取り、スタイルを動的に反映できます。Spring MVCとThymeleafの連携により、デザインとロジックを分離しながらも、柔軟なUI制御が可能になります。

4. th:style属性の基本構文

ここからは、Thymeleafのth:style属性の基本構文について詳しく見ていきましょう。th:styleは、HTMLのstyle属性に相当するもので、Thymeleafの式を使ってCSSを動的に指定できます。書き方はとてもシンプルで、次のように文字列を連結して使用します。


<p th:style="'color:' + ${fontColor} + '; background-color:' + ${bgColor} + ';'">動的にスタイルを変更します</p>

このコードでは、サーバー側から渡された${fontColor}や${bgColor}の値によって、文字色や背景色を変更できます。つまり、Spring MVCのコントローラで設定した値が、テンプレート上でそのままCSSに反映されるという仕組みです。

Thymeleafの式は通常のJavaの文字列連結に似ていますが、変数を展開するときには${}を使います。固定文字列はシングルクォートで囲み、必要に応じてプラス記号で結合します。

たとえば、次のようなコントローラクラスを用意して値を渡します。


@Controller
public class StyleController {

    @GetMapping("/style-demo")
    public String styleDemo(Model model) {
        model.addAttribute("fontColor", "blue");
        model.addAttribute("bgColor", "lightyellow");
        return "styleView";
    }
}

この設定でページを開くと、文字が青色で背景が淡い黄色になります。このようにth:styleを使えば、サーバーからのデータをそのままデザインに反映でき、ユーザーの状態や条件に応じたUIを簡単に実現できます。

5. 条件分岐による動的スタイル変更

次に、条件分岐を使ってスタイルを動的に切り替える方法を学びましょう。Thymeleafでは、th:ifやth:classappendなどの属性を併用することで、特定の条件に応じた表示変更が可能です。

まず、th:ifを使って、ある条件を満たすときだけ特定のスタイルを適用する例を見てみます。


合格です！
残念ながら不合格です。

このサンプルでは、${score}の値に応じて異なる文字色を表示しています。条件分岐を使うことで、ユーザーの入力やシステムの状態に応じて、簡単に見た目を変えることができます。

もう一つの方法として、th:classappendを使ってCSSクラスを動的に付与することも可能です。CSSクラスを使えば、スタイルを外部ファイルにまとめて管理でき、保守性が高まります。


<p th:classappend="${isError} ? 'text-danger' : 'text-normal'">入力内容を確認してください。</p>

このように、th:classappendを使うと、既存のclass属性に対して動的にクラスを追加できます。例えば、エラーが発生したときだけ文字色を赤くしたい場合に便利です。

もちろん、これらの属性はth:styleと組み合わせることもできます。複数の条件を組み合わせれば、より複雑なUI制御も実現可能です。

6. コントローラで値を渡してビューでCSSを切り替える流れ

最後に、Spring MVCのコントローラからThymeleafテンプレートへ値を渡し、CSSを動的に変更する一連の流れを確認しましょう。この流れを理解すると、バックエンドのデータとフロントエンドの見た目をスムーズに連携させることができます。

まず、コントローラクラスを作成します。ここでは、在庫数によって文字色を変える例を紹介します。


@Controller
public class ProductController {

    @GetMapping("/product-status")
    public String showProductStatus(Model model) {
        int stock = 2;
        String color = stock < 5 ? "red" : "black";
        model.addAttribute("stock", stock);
        model.addAttribute("color", color);
        return "productView";
    }
}

このコードでは、在庫数が5未満なら赤色、それ以外なら黒色を設定しています。テンプレート側では、コントローラから渡された${color}を使ってスタイルを変更します。


<p th:style="'color:' + ${color}">在庫数: <span th:text="${stock}"></span></p>

この仕組みにより、在庫が少ない場合は自動的に赤色で警告表示されます。ビジネスロジックはコントローラ側に、デザインはThymeleaf側に分離されるため、保守性と拡張性が向上します。

また、条件が複雑な場合は、Java側でスタイル文字列を生成して渡す方法もあります。


@Controller
public class AdvancedStyleController {

    @GetMapping("/advanced-style")
    public String advancedStyle(Model model) {
        boolean isWarning = true;
        String style = isWarning ? "color:orange; font-weight:bold;" : "color:black;";
        model.addAttribute("dynamicStyle", style);
        return "advancedView";
    }
}

この場合、Thymeleaf側では単純にth:style="${dynamicStyle}"と指定するだけで、動的に生成したスタイルをそのまま適用できます。


<p th:style="${dynamicStyle}">警告メッセージを表示します</p>

このように、コントローラでビジネスロジックを処理し、テンプレート側では表示に専念させる設計は、Spring MVCとThymeleafの理想的な分業スタイルです。

開発環境としては、pleiadesを使ってGradleプロジェクトを作成すれば、依存関係の設定も簡単に行えます。spring-boot-starter-thymeleafを追加するだけでThymeleafが使えるようになります。MavenではなくGradleを使う前提で、以下のように設定します。


implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

これで、Spring MVCとThymeleafを組み合わせた動的スタイル制御の準備が整います。テンプレート内でth:styleを活用すれば、サーバーサイドで柔軟にCSSを切り替えられるため、UI設計の幅が大きく広がります。

7. 実際に色や背景色を動的に変更する例（条件ごとの表示変更）

ここでは、Thymeleafのth:styleを使って実際に色や背景色を切り替える方法を確認してみましょう。動的なスタイル設定は、条件ごとに表示内容を分けたいときに非常に便利です。特に業務システムでは、警告や注意を色で示すことで、ユーザーに視覚的なフィードバックを与えることができます。

例えば、在庫数が少ないときに赤色、通常時は黒色、在庫が多いときは青色に文字を変えるケースを考えてみましょう。


@Controller
public class StockColorController {

    @GetMapping("/stock-color")
    public String stockColor(Model model) {
        int stock = 8;
        String color;

        if (stock <= 3) {
            color = "red";
        } else if (stock <= 10) {
            color = "black";
        } else {
            color = "blue";
        }

        model.addAttribute("stock", stock);
        model.addAttribute("color", color);
        return "stockColorView";
    }
}


<p th:style="'color:' + ${color}">在庫数：<span th:text="${stock}"></span></p>

この例では、コントローラで在庫数を判定し、その値に応じて色を設定しています。Thymeleafテンプレート側では、単純にth:styleで${color}を受け取り、表示時に文字色を反映させています。

もし背景色を同時に変えたい場合は、次のように複数のCSSプロパティを組み合わせることも可能です。


<p th:style="'color:' + ${color} + '; background-color:' + (${color} == 'red' ? 'mistyrose' : 'white') + ';'">
    在庫数：<span th:text="${stock}"></span>
</p>

このように条件式をネストすることで、状態に応じてデザインを柔軟に変更できます。条件式はJavaに近い構文なので、初心者でも理解しやすいのがThymeleafの魅力です。

8. よくあるエラーやハマりやすいポイント（属性指定ミス、式エラーなど）

Thymeleafでth:styleを使う際、初心者がよくつまずくポイントがいくつかあります。ここでは代表的なエラーと対策を紹介します。

① 式の書き方ミス

最も多いのが、シングルクォートの抜けや+記号の位置ミスです。例えば次のようなコードは正しく動作しません。


<!-- 誤った例 -->
<p th:style="color:' + ${color} + ';'">エラーになります</p>

このように、固定文字列部分がシングルクォートで囲まれていないと、Thymeleafの式解析時にエラーになります。正しくは次のように書きます。


<!-- 正しい例 -->
<p th:style="'color:' + ${color} + ';'">正しく動作します</p>

Thymeleafでは、文字列を結合する際にすべての固定文字列をシングルクォートで囲むことが大切です。

② 変数が存在しない場合のNullエラー

コントローラで値を渡し忘れると、${color}が解決できずに例外が発生します。例えば、モデルにcolorを追加していない場合、画面で「Variable not found」エラーになります。

このような場合は、コントローラ側で必ず値を初期化しておくことが重要です。初期値を設定すれば、テンプレートが常に安全に動作します。


model.addAttribute("color", "black");

③ 属性の競合や上書きミス

HTMLのstyle属性とth:styleを併用すると、後からThymeleafによって上書きされる場合があります。静的なstyleを指定したいときは、Thymeleafの式内で一緒に書くか、th:attrを使ってまとめて指定するのがおすすめです。


<p th:style="'color:' + ${color} + '; font-size:14px;'">テキストサイズも指定</p>

このように1つのth:styleの中で複数プロパティをまとめて指定すれば、静的部分と動的部分を共存させることができます。

④ th:classappendとの混同

初心者の方は、th:styleとth:classappendを混同することがあります。th:classappendはクラスを追加するための属性で、CSSを直接指定するものではありません。クラスを使ってスタイルを制御する場合はCSSファイルを併用しましょう。

たとえば、CSSクラスで色を変える場合は次のようにします。


<p th:classappend="${isError} ? 'red-text' : 'black-text'">エラー表示の切り替え</p>

そしてCSSファイルでは次のように定義します。


.red-text { color: red; }
.black-text { color: black; }

どちらを使うかはプロジェクト方針次第ですが、テンプレート上で即時にスタイルを切り替えたいときはth:styleが便利です。

9. th:styleを活用して動的デザインを実現するメリット

ここまで、Thymeleafのth:styleを使ってCSSを動的に変更する方法を学びました。Spring MVCのコントローラで値を用意し、それをテンプレートに渡すだけで、スタイルを柔軟に変更できる点が大きな特徴です。

特に、データの状態によって色や背景を変えるような場面では、サーバーサイドでロジックを組み、ビュー側では見た目だけを制御する設計が理想的です。これにより、アプリケーションの保守性が高まり、後からデザインを変更する際も影響範囲を最小限に抑えることができます。

また、pleiades環境でGradleを使えば、設定作業も簡単で、依存関係を自動的に管理できます。Spring Bootのプロジェクトでは、spring-boot-starter-thymeleafを追加するだけでThymeleafの機能をすぐに利用できる点も魅力です。

テンプレートエンジンとしてのThymeleafは、静的HTMLとしても確認しやすく、デザイナーとエンジニアが同じファイルを扱えるため、チーム開発においても強力なツールになります。

最後にまとめると、th:styleの活用によって次のようなメリットが得られます。

条件に応じたスタイル切り替えが簡単にできる
コントローラとテンプレートの分業が明確になる
デザイン修正時の影響範囲を小さくできる
Javaのロジックをそのままテンプレート内で活かせる

こうした仕組みを理解すれば、Thymeleafを使った動的なCSS設定が自然に使いこなせるようになります。今後は、th:styleだけでなく、th:classappendやth:ifなどを組み合わせて、より柔軟なUI表現にも挑戦してみましょう。

Thymeleaf th:styleでCSSクラスを動的に設定する方法