そのへんのちらしのうら

調べたこと、学んだこと、おもしろかったこと。

JSP+ServletでシンプルなWebアプリをつくる(8)ーCSS

3.開発

3.8.CSSを使ってデザインをかっこよく(?)する

CSSを利用して、画面のデザイン調整を行います。今回、最終的にこんな感じにしてみました。
eclipse上のブラウザだとtableの罫線がきれいに出なかったため、Chromeで確認しています。
f:id:bubox2:20190512183137p:plain

テキストボックスに対して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>
参考

こちらのサイトが勉強になりました。

techacademy.jp

www.colordic.org

www.htmq.com

saruwakakun.com