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

1. th:styleとは？

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. 基本的な使い方

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. 条件によるスタイルの変更

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

画面の見た目を「状況によって切り替えたい」という場面はよくあります。たとえば、ログイン中なら緑、ログアウト中なら灰色、といったように状態を色でわかりやすく表現できます。Thymeleafでは、三項演算子を使って条件ごとに異なるスタイルを返すだけなので、特別な書き方は必要ありません。

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

この例では、isActiveがtrueのときはcolor:green、falseのときはcolor:grayが適用されます。値はそのままCSSの文字列として出力されるので、難しい仕組みを覚える必要はありません。

背景色なども同じ書き方で変更できます。たとえば、エラー時だけ赤にしたい場合は次のように書けます。

<div th:style="${hasError} ? 'background-color:#ffcccc' : 'background-color:#ffffff'">
    メッセージ
</div>

このように、th:styleと三項演算子を組み合わせると「条件が変わったら見た目も変わる」仕組みを短いコードで表現できます。チェックボックスの状態やDBの値など、どんな真偽値でも同じように扱えるので、実際の開発でも出番が多い書き方です。

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

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

一つの要素に色・背景色・余白・枠線などをまとめて適用したいときは、th:styleに複数のCSSを「セミコロン区切りの一つの文字列」として渡します。基本は「通常のstyle属性に書く内容」をそのまま作るだけなので、初心者でも迷いにくい書き方です。

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

上の例では、文字色・背景色に加えて、余白（padding）や外側の余白（margin）も同時に設定しています。数値系は単位を忘れずに連結するのがコツです（pxや%、remなど）。

可読性を重視するなら、Thymeleafのリテラル置換（パイプ記法）を使うと、CSSの並びが自然に読み取れます。値の差し替えだけが目立つので、チーム開発でもレビューしやすくなります。

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

複数指定のときは「末尾のセミコロンを忘れない」「半角スペースの有無は自由だが統一する」といった小さなルールを決めておくと、テンプレートがすっきり保てます。例えば、ボタン風の装飾も短い記述でまとめられます。

<button class="btn"
        th:style="|color:${btnText}; background-color:${btnBg}; padding:${btnPy}px ${btnPx}px; box-shadow:0 2px 6px ${shadow}; cursor:pointer|">
    操作する
</button>

このように、th:styleは複数の見た目をひとまとめで管理でき、画面の強調・アクセント・レイアウト調整を柔軟に表現できます。まずは「色＋背景色＋余白」から始めて、慣れてきたら枠線や角丸、影（box-shadow）なども組み合わせていくと、実用的なテンプレートに育っていきます。

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

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

背景画像も、文字色や背景色と同じように動的に切り替えられます。季節ごとに画像を変えたい、ユーザーごとにテーマ画像を変えたいといった場面で便利です。ポイントは、url() の中に、Thymeleafで生成したパスをそのまま埋め込むことです。

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

ここで、imageNameに「bg.jpg」が入っていると、最終的には次のようなHTMLになります。

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

画像名を変数にしておけば、季節限定の画像やキャンペーン画像を画面ごとに簡単に変更できます。「img」タグを使わずに背景として配置できるので、文字を重ねたり、ボタンや説明文を載せてバナーのように使うこともできます。

例えば、ページ上部に大きなヘッダー画像を置きたい場合も、この書き方で柔軟に差し替えが可能です。

<header class="p-4 text-white fw-bold"
        th:style="'background-image:url(' + @{/header/${headerImg}} + '); background-size:cover; background-position:center;'">
    ようこそ
</header>

このように、background-sizeやbackground-positionなど、通常のCSSと同じ書き方で追加できます。まずは1枚の画像から試して、問題なく表示できたら、季節やイベントに合わせて画像を切り替えてみると楽しさが実感できます。

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

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

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

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

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

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ファイルと役割を分担しつつ、適切な場面で活用することが大切です。 基本をしっかり押さえながら、自分のプロジェクトで少しずつ使ってみることで、自然と習得できるでしょう。

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

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

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

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

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

th:styleで背景色を変更するにはどうすればいいですか？

背景色を動的に変更するには、変数を使ってstyle属性に背景色を指定します。たとえば、bgColorという変数を使うことで背景色が変わります。

条件に応じて文字色を変える方法はありますか？

はい、三項演算子を使えば、条件に応じて例えば緑色や灰色などの文字色を切り替えることができます。