🔗 本章は「Vol.8.9〜：Struts2 タグライブラリ応用編（実務／初級応用）」シリーズです。

🎯 本記事の目的

Struts2 の <s:form> や <s:textfield> などのタグは便利ですが、出力されるHTMLが地味／クセがあるため、CSSフレームワーク（特にBootstrap）と連携させたい時に苦戦しがちです。

本記事では、以下の悩みを解決します：

Struts2のフォームをBootstrap風に美しく整える
タグの出力構造を理解し、CSSを自在に適用する
エラーメッセージの表示をスタイリッシュにする

1. Struts2 タグの出力HTML構造を理解する

✅ 例：`<s:textfield>` の出力

<s:form action="login">
  <s:textfield name="username" label="ユーザー名"/>
</s:form>

出力されるHTML（簡略化）：

<form action="login.action" method="post">
  <label for="username">ユーザー名</label>
  <input type="text" name="username" id="username" value="" />
</form>

label属性 → 要素に変換
name属性 → 要素の name/id に反映

2. 出力HTMLをCSSフレームワークで装飾する

✅ Bootstrap のクラスを適用するには？

<s:textfield name="username" label="ユーザー名" cssClass="form-control"/>

→ 出力HTML：

<input type="text" class="form-control" name="username" id="username" />

✅ `<s:form>`にクラス追加

<s:form action="login" cssClass="form-horizontal">

3. エラーメッセージを見た目よく表示する

✅ <s:fielderror> の出力

<s:fielderror/>

エラー時の出力例：

<ul class="errorMessage">
  <li>ユーザー名は必須です。</li>
</ul>

✅ Bootstrap風に調整するには？

.errorMessage {
  color: #dc3545;
  font-size: 0.9em;
  list-style: none;
  padding-left: 0;
}

→ text-dangerクラスに統一してもOK：

<ul class="text-danger">
  <li>エラー内容</li>
</ul>

4. 実務Tips：よくあるUI調整パターン

✅ 入力項目を横並びにしたい！

<div class="row mb-3">
  <label class="col-sm-3 col-form-label">ユーザー名</label>
  <div class="col-sm-9">
    <s:textfield name="username" cssClass="form-control"/>
  </div>
</div>

✅ 必須入力の「※」をラベルに追加

<s:textfield name="username" label="ユーザー名 ※" required="true" cssClass="form-control"/>

✅ 成功メッセージ・警告メッセージの表示

<div class="alert alert-success">登録が完了しました！</div>
<div class="alert alert-warning">入力内容を確認してください。</div>

5. まとめ＆次回予告

Struts2のタグ出力構造を把握することで、CSS適用がスムーズに！
Bootstrap等との連携には cssClass 属性が鍵！

📘 次回予告：Vol.8.12 共通レイアウトと include の活用法

共通のヘッダー・フッター・メッセージ領域を includeで部品化し、
「見た目・構造の統一感」を手に入れましょう！

🔖 関連記事リンク