JSP+ServletでシンプルなWebアプリをつくる(8)ーCSS
3.開発
3.8.CSSを使ってデザインをかっこよく(?)する
CSSを利用して、画面のデザイン調整を行います。今回、最終的にこんな感じにしてみました。
※eclipse上のブラウザだとtableの罫線がきれいに出なかったため、Chromeで確認しています。
テキストボックスに対してclass属性をつけ、CSSのセレクタで「要素名.クラス名」としてclassごとに指定できるようにしました。
■zaikoChosei.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>在庫調整画面</title> <style> h3 { color: #000080; text-shadow: 2px 2px 2px rgba(25, 25, 112, 0.5); } body { background: #f0f8ff; font-family: Meiryo; } th { background: #4169e1; color: #ffffff; } input.TXR { background: rgba(240,248,255,0); border: none; } input.TXT { } input.BUTTON { background: #4169e1; color: #ffffff; font-weight: bold; text-shadow: 1px 1px 1px rgba(25, 25, 112, 0.5); width: 70px; height: 40px; border-style: none; border-radius: 10px; border-bottom: solid 4px #191970; } </style> </head> <body> <h3>在庫調整画面</h3> <form action="/zaiko/ZaikoChoseiController" method="post"> <table> <tr> <td> <input type="submit" name="SRH" value="検索" class="BUTTON"> <input type="submit" name="UPD" value="更新" class="BUTTON"> <input type="submit" name="CLR" value="クリア" class="BUTTON"> </td> </tr> </table> <table> <tr> <td>ロケーション</td> <td><input type="text" name="location" value="${form.location}"></td> </tr> <tr> <td>商品コード </td> <td><input type="text" name="itemcd" value="${form.itemcd}"></td> </tr> </table> <table border="1" cellspacing="0" cellpadding="2" bordercolor="#b0c4de" width="650" style="table-layout:fixed;"> <c:if test="${not empty form.detail}"> <col width="0%"> <col width="50"> <col width="25%"> <col width="25%"> <col width="20%"> <col width="25%"> <tr> <th></th> <th>No.</th> <th>ロケーション</th> <th>商品コード</th> <th>ロット</th> <th>数量</th> </tr> <c:forEach var="detail" items="${form.detail}"> <tr> <td> <input type="hidden" name="index[${detail.index}]" value="${detail.index}"> </td> <td> <input type="text" name="no[${detail.index}]" value="${detail.no}" class="TXR" style="width:95%;text-align:center" readonly> </td> <td> <input type="text" name="location[${detail.index}]" value="${detail.location}" class="TXR" style="width:95%;" readonly> </td> <td> <input type="text" name="itemcd[${detail.index}]" value="${detail.itemcd}" class="TXR" style="width:95%;" readonly> </td> <td> <input type="text" name="lot[${detail.index}]" value="${detail.lot}" class="TXR" style="width:95%;" readonly> </td> <td> <input type="text" name="quantity[${detail.index}]" value="${detail.quantity}" class="TXT" style="width:95%;text-align:right"> </td> </tr> </c:forEach> </c:if> </table> </form> </body> </html>
参考
こちらのサイトが勉強になりました。