先生と生徒の会話形式で理解しよう

生徒

「Thymeleafで、動的にCSSスタイルを変更する方法ってありますか？」

先生

「はい、Thymeleafのth:style属性を使うと、HTML要素に動的なスタイルを適用できます。」

生徒

「具体的にはどのように使うんですか？」

先生

「それでは、基本的な使い方を見ていきましょう！」

1. th:styleとは？

Thymeleafのth:style属性は、サーバー側の値をそのままHTMLのstyle属性に埋め込める仕組みです。テンプレートの表示タイミングで、コントローラから渡された変数を使って背景色や文字色、サイズ、余白などの見た目を柔軟に切り替えられます。静的なHTMLでも、画面ごと・ユーザーごとに異なるスタイルを自然に反映できるのが特徴です。

基本の考え方はシンプルで、th:styleに文字列としてCSSを渡すだけです。通常のstyle属性と同じ書き方ですが、値の一部を${...}で差し替えられる点がポイントです。フォーム画面や一覧画面、ダッシュボードなど、表示内容に応じて強調色や目立たせたい行の装飾を変えたいときに役立ちます。

まずは最小の例です。変数に入っている色名やカラーコードを、そのまま背景色として適用します。


<div th:style="'background-color:' + ${bgColor}">コンテンツ</div>

この例では、bgColorに「red」や「#66ccff」などが入っていれば、出力時にstyle="background-color:…"が生成されます。色の値は設定ファイルやコントローラで用意しておくと、テンプレート側は読みやすいまま保てます。

同じ書き方で、幅や高さなどの数値系プロパティも扱えます。数値と単位を連結して渡すだけなので、レイアウトの微調整にも向いています。


<div th:style="'width:' + ${boxWidth} + 'px'">ボックス</div>

このように、th:styleは「テンプレートはそのまま」「値だけ動的」という分担がしやすく、画面の見た目をデータに寄り添わせる場面で効果を発揮します。まずは背景色や幅など一項目から試して、仕上がりを確認しながら少しずつ適用範囲を広げていくのがおすすめです。

2. 基本的な使い方

th:styleは、Thymeleafテンプレート上でCSSを文字列として組み立てて、そのままHTMLのstyle属性に出力するための仕組みです。サーバー側の値（モデルの変数）を使って、背景色・文字色・幅や高さなどの見た目を簡単に切り替えられるので、初心者でも直感的に扱えます。

まずは一番わかりやすい背景色の例です。変数に入っている色名やカラーコードを、そのまま背景色として反映します。


<div th:style="'background-color:' + ${bgColor}">コンテンツ</div>

この例では、bgColorの中身が「red」や「#66ccff」であれば、出力時にstyle="background-color:…"が自動生成され、ブラウザで色が変わります。色の値はコントローラ側で用意しておくと、テンプレートが読みやすく保てます。

同じ考え方で文字色も簡単に変更できます。色名でもカラーコードでも構いません。


<span th:style="'color:' + ${textColor}">強調したい文字</span>

数値が必要なプロパティ（幅や高さ、余白など）は、単位（pxや%）を文字列で連結して渡します。値と単位を間違えなければそのまま反映されます。


<div th:style="'width:' + ${boxWidth} + 'px; height:' + ${boxHeight} + 'px'">ボックス</div>

複数のスタイルをまとめたいときは、セミコロンで区切って1つの文字列にします。読みやすさを優先したい場合は、リテラル置換（パイプ記法）を使うと記述がすっきりします。


<div th:style="|color:${textColor}; background-color:${bgColor}; padding:${pad}px|">読みやすい書き方</div>

ポイントは「通常のstyle属性に入れるCSSを、そのまま文字列として作る」だけというシンプルさです。背景色・文字色・レイアウトのサイズ調整など、日常的な見た目の調整から始めると感覚がつかみやすく、ThymeleafとCSSの連携に素早く慣れることができます。

3. 条件によるスタイルの変更

条件に応じてスタイルを変更するには、三項演算子を使用します：


<div th:style="${isActive} ? 'color:green' : 'color:gray'">ステータス</div>

この例では、isActiveがtrueの場合は緑色、falseの場合は灰色の文字色が適用されます。

4. 複数のスタイルを設定する

複数のスタイルを同時に設定するには、文字列を連結します：


<div th:style="'color:' + ${textColor} + '; background-color:' + ${bgColor}">テキスト</div>

または、リテラル置換を使用することもできます：


<div th:style="|color:${textColor}; background-color:${bgColor}|">テキスト</div>

リテラル置換は、コードをより読みやすくするために便利です。

5. 画像を背景に設定する

背景画像を動的に設定するには、以下のようにth:styleを使用します：


<div th:style="'background-image:url(' + @{/images/${imageName}} + ');'">背景画像</div>

この例では、imageNameが「bg.jpg」の場合、以下のように出力されます：


<div style="background-image:url(/images/bg.jpg);">背景画像</div>

6. th:styleとth:classの使い分け

th:styleは、インラインスタイルを動的に設定するために使用されます。一方、th:classは、CSSクラスを動的に設定するために使用されます。

一般的には、再利用性や保守性の観点から、可能な限りth:classを使用し、必要に応じてth:styleを補助的に使用することが推奨されます。

7. 実践例：ユーザーのステータスに応じたスタイルの適用

以下は、ユーザーのステータスに応じてスタイルを変更する実践的な例です：


<table class="table">
    <tr th:each="user : ${userList}">
        <td th:text="${user.name}">名前</td>
        <td th:text="${user.status}">ステータス</td>
        <td th:style="${user.status == 'active'} ? 'color:green' : 'color:red'">状態</td>
    </tr>
</table>

この例では、ユーザーのステータスが「active」の場合は緑色、それ以外の場合は赤色で表示されます。

まとめ

今回は、Thymeleafにおけるth:style属性の基本から応用まで、さまざまな場面での使い方を見てきました。 th:styleは、静的なHTMLにサーバーサイドの変数や条件を組み込んで、動的にスタイルを変更できる便利な機能です。単に背景色を変えるだけでなく、文字色や余白、さらには背景画像まで柔軟に対応できるため、HTMLとCSSの知識が少しあるだけでも直感的に操作できるのが特徴です。

特に、ユーザーの状態（アクティブ・非アクティブ）や、データの条件によって色を変えるといった「動きのある表示」が必要な場面では、th:styleが強力な武器になります。三項演算子を使えば、条件分岐による色分けも可能ですし、文字列連結やリテラル置換を使えば、複数のスタイルを一括で指定することもできます。

また、画像ファイル名やパスも変数で制御できるため、背景画像の切り替えにも活用できます。デザインとロジックを連動させたいとき、つまり「データに応じて画面の見た目を変えたい」と感じたときにth:styleは最適です。もちろん、th:classと使い分けることで、メンテナンス性を保ちつつ、より柔軟なスタイル適用が可能になります。

例えば、以下のような応用も考えられます。


<!-- 条件によって表示サイズを変える -->
<p th:style="${isLarge} ? 'font-size:24px' : 'font-size:14px'">サイズ切り替えテキスト</p>

このように、Javaコードで作成した変数をThymeleaf側で反映することで、完全に「状態に応じた見た目」を実現できます。動的なスタイル変更は、特に管理画面やレポート画面、ログイン後のユーザー向けページなど、細かな配慮が求められる場面で威力を発揮します。

ただし、th:styleを多用しすぎるとHTMLが複雑になることもありますので、CSSファイルと役割を分担しつつ、適切な場面で活用することが大切です。基本をしっかり押さえながら、自分のプロジェクトで少しずつ使ってみることで、自然と習得できるでしょう。

先生と生徒の振り返り会話

生徒

「th:styleって、最初は難しそうだと思ってたけど、仕組みがわかるととても便利ですね。」

先生

「そうなんです。サーバー側の変数や状態に応じてスタイルを変えられるので、動的なUIにぴったりですよ。」

生徒

「色を変えたり、サイズを変えたり、背景画像まで操作できるって知らなかったです。」

先生

「今回学んだth:styleの使い方を活かせば、アプリの見た目も機能もワンランクアップしますよ。実際に自分のコードで試してみましょう！」

この記事を読んだ人からの質問

Thymeleafのth:style属性を完全ガイド！初心者でもわかる動的スタイルの適用方法

1. th:styleとは？

2. 基本的な使い方

3. 条件によるスタイルの変更

4. 複数のスタイルを設定する

5. 画像を背景に設定する

6. th:styleとth:classの使い分け

7. 実践例：ユーザーのステータスに応じたスタイルの適用

まとめ

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Thymeleafのth:style属性とは何ですか？

Thymeleafのth:style属性は、HTML要素に対してCSSスタイルをサーバーサイドの変数や条件を用いて動的に適用できる機能です。

関連記事: