🔗 本章は「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で部品化し、
「見た目・構造の統一感」を手に入れましょう！
🔖 関連記事リンク