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

新人

「先輩、Thymeleafでボタンの色を変えたいんですけど、style属性って動的にできますか？」

先輩

「できるよ。Thymeleafのth:styleを使えば、値によって動的にCSSを変更できるんだ。」

新人

「へぇ！style属性とどう違うんですか？」

先輩

「まずはHTMLの静的なstyle属性から説明しよう。そのあとで、Thymeleafのth:styleでどうやって動的に設定するのかも見ていこう！」

1. HTMLのstyle属性とは？（静的なCSS指定）

HTMLのstyle属性は、特定の要素に対して直接CSSを適用するために使われます。たとえば、ボタンの背景色を赤にしたいときは以下のように記述します。


<button style="background-color: red;">赤いボタン</button>

このように、style属性にCSSプロパティを直接記述することで、HTML要素に装飾を与えることができます。ただし、これは静的な指定なので、条件によって色を変えたりすることはできません。

たとえば、「ステータスがエラーなら赤、成功なら緑」といった処理はできません。そこで登場するのが、Thymeleafのth:styleという属性です。

2. Thymeleafのth:styleとは？（基本構文と目的）

Thymeleafのth:styleは、HTMLのstyle属性を動的に生成するための属性です。Spring Bootのアプリケーションで、テンプレート側で動的にCSSを切り替えたいときに便利です。

例えば、以下のように使います。


<button th:style="'background-color:' + ${status == 'error' ? 'red' : 'green'}">ステータスボタン</button>

この例では、変数statusの値によって、背景色が赤か緑に切り替わります。これは、Springの@Controllerでモデルにstatusを追加することで機能します。

コントローラ側は以下のように実装します。


@Controller
public class SampleController {

    @GetMapping("/status")
    public String showStatus(Model model) {
        String status = "error"; // 条件によって変更
        model.addAttribute("status", status);
        return "status-view";
    }
}

このように、Springの@Controllerで動的に値を設定して、Thymeleafのテンプレート側でth:styleを使って反映させることで、CSSのスタイルを条件に応じて動的に切り替えることができます。

なお、th:styleはstyle属性と同時に記述することも可能ですが、th:styleが優先されます。テンプレートファイルでは基本的にth:styleだけを使うようにしましょう。

また、色だけでなく、文字サイズやフォント、マージンやパディングなども動的に制御可能です。


<p th:style="'font-size:' + (${isLarge} ? '24px' : '14px')">テキストのサイズ変更</p>

このように、Thymeleafのth:styleを使えば、Java側の条件に応じて細かいスタイル変更が可能になります。初心者でも比較的簡単に使えるため、静的なstyle属性しか使っていなかった方はぜひチャレンジしてみましょう。

実際のアプリケーションでも、「ユーザーの状態によって色を変える」「期限が切れていたら強調する」など、動的なCSS指定はよく利用されます。

3. th:styleで条件によって色やサイズを変更する

Thymeleafのth:styleを使うことで、変数の値に応じて背景色や文字サイズを動的に変更することができます。たとえば、ユーザーのステータスによってボタンの背景色を切り替えるといった処理が簡単にできます。

以下は、ステータスが「success」のときは緑色、「error」のときは赤色、それ以外はグレーになる例です。


<button th:style="'background-color:' + 
                  (${status} == 'success' ? 'green' : 
                   (${status} == 'error' ? 'red' : 'gray'))">
    状態によるボタン
</button>

このように、th:style属性内で三項演算子をネストすることで、複数の条件に対応できます。また、文字サイズや太さなども同様に制御可能です。


<p th:style="'font-size:' + (${isImportant} ? '20px' : '14px') + '; font-weight:' + (${isImportant} ? 'bold' : 'normal')">
    重要なメッセージ
</p>

この例では、変数isImportantがtrueならフォントサイズが大きく太字になり、そうでなければ標準のサイズと太さになります。複数のスタイルを連結するには、文字列同士を+でつなぐことを忘れないようにしましょう。

4. th:styleとth:if/th:classとの違いや使い分け

Thymeleafにはth:styleの他にも、条件によって要素を制御するためのth:ifや、CSSクラスを動的に付けるth:classがあります。これらの違いを理解して、適切に使い分けることが大切です。

th:style：特定のCSSプロパティだけを変える

あるHTML要素に対して、背景色や文字サイズなど特定のスタイルだけを動的に変更したい場合に使います。style属性と同じ書き方で、値の部分に式を使って指定できます。

th:class：CSSクラスを動的に設定

スタイル全体をクラスとして切り替えたい場合にはth:classを使います。たとえば、CSSで事前にスタイルを定義しておいて、条件に応じて適用するクラス名を変更できます。


<div th:class="${status == 'error'} ? 'text-danger' : 'text-normal'">
    ステータスメッセージ
</div>

th:if：要素ごと表示・非表示を切り替える

要素自体を表示したり非表示にしたい場合はth:ifを使用します。スタイルを変えるのではなく、HTMLの出力そのものを制御する用途に向いています。


<p th:if="${isVisible}">この文章は表示されます</p>

このように、Thymeleafではスタイル変更だけでなく、表示制御やクラスの切り替えなど、さまざまな方法で条件に応じた見た目を調整できます。使い分けを理解することで、より柔軟なテンプレート設計が可能になります。

5. よくあるミス（クォート忘れ、セミコロン不足、null対策など）

初心者がth:styleを使う際によく遭遇するエラーや注意点を紹介します。これらを知っておくだけで、トラブルを未然に防ぐことができます。

① クォート（引用符）の忘れ

CSSプロパティは文字列として扱うため、必ずシングルクォート'で囲みます。たとえば以下のように記述する必要があります。


<p th:style="'color:' + 'blue'">青文字</p>

クォートが無いと、Thymeleafのパーサーが式として解釈できず、テンプレートエラーになります。

② セミコロン（;）の付け忘れ

複数のスタイルを連結するとき、各プロパティの末尾にセミコロンを付けるのを忘れがちです。


<p th:style="'color:' + 'blue' + '; font-weight:bold;'">青くて太字</p>

セミコロンが無いと、CSSが正しく認識されず、スタイルが反映されないことがあります。

③ null値への対処

コントローラ側から渡された変数がnullになる可能性がある場合、式評価時にエラーになることがあります。${変数 ?: 'デフォルト値'}のように、Elvis演算子でデフォルトを指定すると安全です。


<p th:style="'color:' + (${color} ?: 'black')">色指定</p>

このようにしておけば、colorがnullでも「black」が適用され、例外を防ぐことができます。

④ 式展開の記述ミス

th:styleでは、${ }内の論理式を間違えやすいです。たとえば、以下は構文エラーになります。


<!-- 間違い -->
<p th:style="'color:' + ${isError ? 'red' : 'black'}">メッセージ</p>

isError ? ...のようにJava的な三項演算子を直接記述するのはNGです。正しくは、EL式内で完結させる必要があります。


<!-- 正しい -->
<p th:style="'color:' + (${isError} ? 'red' : 'black')">メッセージ</p>

Thymeleafの式展開では、${...}内はJavaのコードに近い構文ですが、完全に同じではないため、括弧の付け忘れや構文ルールの違いに注意が必要です。

このような初歩的なミスは、最初のうちはつまずきやすいポイントです。テンプレートがうまく表示されないときは、まずth:styleの式構文やクォート・セミコロンの有無を見直してみましょう。

6. 実務で役立つ動的スタイルの活用例（エラー時の赤色表示など）

Thymeleafのth:styleは、実務でも非常によく使われる便利な機能です。特に、入力フォームのバリデーション結果やステータス表示などで、CSSを動的に変更するケースは多くあります。

たとえば、入力チェックでエラーが発生したときに、該当項目の背景色を赤にしてユーザーにわかりやすく表示することが可能です。


<input type="text" name="email"
       th:style="'background-color:' + (${hasError} ? 'pink' : 'white')"
       placeholder="メールアドレスを入力してください" />

この例では、hasErrorがtrueのときに背景色がピンクになり、そうでない場合は白に設定されます。視覚的なフィードバックを与えることで、ユーザー体験を向上させることができます。

また、進捗状況や優先度によって表示色を変えるケースもあります。たとえば、「重要」な項目は赤、「普通」は青、「低優先」は灰色というように分けると視認性が高まります。


<span th:style="'color:' + (
    ${priority} == 'high' ? 'red' :
    (${priority} == 'normal' ? 'blue' : 'gray'))">
    優先度表示
</span>

このように、業務アプリケーションでの条件付きスタイル切り替えにth:styleを活用することで、UIの改善や誤入力の防止につながります。

7. コントローラとの連携でスタイルを切り替える（Model属性とth:style）

ThymeleafでCSSスタイルを動的に切り替えるには、Java側の@Controllerクラスとテンプレートとの連携が重要です。モデルに条件に応じた値を渡し、それをテンプレート側のth:styleで利用する形になります。

例えば、以下のようなコントローラを定義します。


@Controller
public class MessageController {

    @GetMapping("/message")
    public String showMessage(Model model) {
        String message = "エラーが発生しました";
        boolean isError = true;
        model.addAttribute("message", message);
        model.addAttribute("isError", isError);
        return "message-view";
    }
}

このコントローラでは、messageとisErrorをテンプレートに渡しています。テンプレート側では、isErrorの値に応じて表示スタイルを変更できます。


<p th:text="${message}"
   th:style="'color:' + (${isError} ? 'red' : 'black')">
</p>

このように、コントローラ側で値を制御し、テンプレートで反映させる構成は非常に汎用性があります。条件によってスタイルを細かく変えることができ、アプリケーションの品質向上につながります。

また、ステータスコードやログインユーザーのロールなどに応じてスタイルを切り替える場面にも応用可能です。

8. 他のth属性との組み合わせで見やすいUIを実現するコツ

th:styleは単体でも便利ですが、th:ifやth:textなど他のThymeleaf属性と組み合わせることで、より柔軟なUI設計が可能になります。以下では、実際の業務で使える例とコツを紹介します。

条件によって表示非表示＋スタイル切り替え

ある条件に該当するときだけ表示し、かつその表示に特別なスタイルを当てたいときは、th:ifとth:styleを併用します。


<div th:if="${showWarning}"
     th:style="'background-color:yellow; border:1px solid red; padding:8px;'">
    注意：入力内容をご確認ください
</div>

このようにすると、showWarningがtrueのときだけ黄色い背景で注意メッセージが表示されます。見た目にも明確な警告を表現できます。

動的テキスト＋スタイル切り替え

動的に表示するテキストと、スタイルを一緒に制御することで、内容に応じた見た目を簡単に作成できます。


<p th:text="${alertMessage}"
   th:style="'color:' + (${alertLevel} == 'critical' ? 'red' :
                         (${alertLevel} == 'warning' ? 'orange' : 'black'))">
</p>

このように、メッセージの重要度に応じて色を変更すれば、ユーザーは直感的に内容の深刻度を理解できます。th:textとth:styleの組み合わせはとても相性が良いです。

スタイルに優先順位をつける

th:classとth:styleを同時に使うことも可能ですが、style属性はクラスよりも優先度が高いため、明示的な変更が必要なときに使うと効果的です。


<span th:class="'alert-box'"
      th:style="${forceHighlight} ? 'background-color:orange;' : ''">
    ハイライト表示
</span>

このように、クラスで基本スタイルを定義し、th:styleで一時的に上書きするという使い方もおすすめです。スタイルの柔軟性を活かしつつ、CSS設計もスッキリさせることができます。

このように、th:styleを中心にth:ifやth:text、th:classなどと組み合わせることで、視覚的にわかりやすく、メンテナンス性の高いUIが実現できます。初心者の方も、まずは簡単な条件分岐から始めて、徐々に複雑なスタイル制御にチャレンジしてみましょう。

Thymeleafのth:styleでCSSを動的に設定する方法を初心者向けに解説！