これまでに学んだことを使って、Spring入門で作る社員管理アプリの4つの画面（一覧・新規登録の入力・確認・完了）を、HTML と CSS で作ります。画面同士をリンクとフォームでつなぎ、実際のアプリと同じ順番で画面を行き来できるようにします。最後に、Spring入門のテンプレートと見比べて、Spring入門へ進む準備をします。
この章で学ぶこと
- 社員管理アプリの一覧・入力・確認・完了の4つの画面の作り方
- 4つの画面から、同じ CSS のファイルを読み込む方法
- フォームを横に並べる
form.inlineと、エラーのメッセージの.error - リンクでつなぐ画面と、POST のフォームでつなぐ画面の使い分け
- この章の HTML と、Spring入門のテンプレートの違い
10.1 この章で作るもの
この章では、ch10 フォルダーに、社員管理アプリの4つの画面と、4つの画面で共通に使う app.css を作ります。画面は、次の順番でつなぎます。
図10-1 4つの画面のつながり
| ファイル | 作業 | 内容 |
|---|---|---|
ch10/css/app.css |
新規 | 4つの画面で共通に使う CSS（Spring入門の app.css と同じ内容） |
ch10/list.html |
新規 | 社員一覧画面 |
ch10/input.html |
新規 | 社員新規登録の入力画面 |
ch10/confirm.html |
新規 | 社員新規登録の確認画面 |
ch10/complete.html |
新規 | 社員新規登録の完了画面 |
10.2 ch10 フォルダーと app.css を作る
-
webappフォルダーを右クリックし、新規 → フォルダー でch10フォルダーを作ります。 -
ch10フォルダーの中に、同じ手順でcssフォルダーを作ります。 -
cssフォルダーを右クリックし、新規 → CSS ファイル で、テンプレート「新規 CSS ファイル」を使ってapp.cssを作ります（第7章「CSS のファイルを作る」）。 -
@charsetの行の最後をクリックしてから改行し、次の内容を書きます（第7章「CSS のファイルを作る」の「選択されたまま入力しない」）。第7章のapp.cssに、最後の2つのルール（緑の行）を足したものです。ch10/css/app.css@charset "UTF-8"; body { /* ページ全体 */ margin: 24px; color: #222; } h1 { /* 見出し */ font-size: 24px; } table { /* 表 */ border-collapse: collapse; margin-bottom: 16px; } th, td { /* 表のマス */ border: 1px solid #999; padding: 6px 12px; text-align: left; } th { /* 表の見出しのマス */ background-color: #eee; } a.button { /* リンクをボタンの見た目にする（新規登録・変更・戻るボタン用） */ display: inline-block; padding: 1px 6px; border: 1px solid #767676; border-radius: 3px; background-color: #efefef; color: #000; font-size: 13px; text-decoration: none; } form.inline { /* フォームを横に並べる（削除ボタン用） */ display: inline; } .error { /* 入力チェックのエラーメッセージ */ color: #c00; font-size: 14px; }追加した2つのルールの意味は、10.8 で説明します。
-
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。
【便利な使い方】第7章の app.css をコピーしてもよい
第7章の list.html と同じように、ch07/css の中の app.css を ch10/css にコピーして、最後の2つのルールを書き足してもかまいません（第7章「第6章の list.html をコピーする」）。その場合は、新規 → CSS ファイル で作る必要はありません。
10.3 一覧画面を作る
第7章の社員一覧に、「操作」の列を足し、各行に「変更」と「削除」のボタンを付けます。
-
ch10フォルダーに、テンプレート「新規 HTML ファイル (5)」を使ってlist.htmlを作ります。 -
次のように書きます。
<title>の書き換えと、<link>の行の書き足しも忘れずに行ってください。ch10/list.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>社員一覧</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <h1>社員一覧</h1> <p><a class="button" href="input.html">新規登録</a></p> <table> <tr> <th>社員ID</th> <th>氏名</th> <th>性別</th> <th>年齢</th> <th>生年月日</th> <th>部署</th> <th>住所</th> <th>操作</th> </tr> <tr> <td>1</td> <td>雷禅 海皇</td> <td>男</td> <td>26</td> <td>2000/06/22</td> <td>営業部</td> <td>大阪府</td> <td> <a class="button" href="list.html">変更</a> <form class="inline" action="list.html" method="post"> <button type="submit">削除</button> </form> </td> </tr> <tr> <td>2</td> <td>院照 心愛</td> <td>女</td> <td>27</td> <td>1999/07/11</td> <td>総務部</td> <td>京都府</td> <td> <a class="button" href="list.html">変更</a> <form class="inline" action="list.html" method="post"> <button type="submit">削除</button> </form> </td> </tr> <tr> <td>3</td> <td>林檎 星飛</td> <td>男</td> <td>24</td> <td>2001/12/24</td> <td>開発部</td> <td>東京都</td> <td> <a class="button" href="list.html">変更</a> <form class="inline" action="list.html" method="post"> <button type="submit">削除</button> </form> </td> </tr> </table> </body> </html>「変更」は、変更の画面を表示するだけなので、リンクにします。「削除」は、データを消す操作なので、POST のフォームにします（10.9 で説明します）。この章では、変更の画面は作りません。そのため、「変更」のリンク先と、「削除」の送信先は、どちらも同じ
list.htmlにしておきます。 -
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。 -
Chrome で
http://localhost/html/ch10/list.htmlを開きます。
図10-2 社員一覧画面（list.html）各行の「操作」の列に、「変更」と「削除」のボタンが横に並んで表示されます。
10.4 入力画面を作る
第8章と第9章で学んだ入力部品を使って、社員の新規登録の入力画面を作ります。
-
ch10フォルダーに、同じ手順でinput.htmlを作り、次のように書きます。ch10/input.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>社員新規登録</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <h1>社員新規登録</h1> <form action="confirm.html" method="post"> <table> <tr> <th>氏名</th> <td> <input type="text" name="name"> </td> </tr> <tr> <th>性別</th> <td> <label><input type="radio" name="gender" value="1"> 男</label> <label><input type="radio" name="gender" value="2"> 女</label> </td> </tr> <tr> <th>年齢</th> <td> <input type="text" name="age"> </td> </tr> <tr> <th>生年月日</th> <td> <input type="date" name="birthDate"> </td> </tr> <tr> <th>部署</th> <td> <select name="deptId"> <option value="">選択してください</option> <option value="1">総務部</option> <option value="2">営業部</option> <option value="3">開発部</option> </select> </td> </tr> <tr> <th>住所（都道府県）</th> <td> <input type="text" name="address"> </td> </tr> </table> <button type="submit">確認</button> </form> <p><a href="list.html">一覧へ戻る</a></p> </body> </html>入力欄は、
<td>の中に1行ずつ書いています。Spring入門では、入力欄の下に、入力チェックのエラーのメッセージを表示する行を足すためです。 -
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。 -
Chrome で
list.htmlを開き、「新規登録」をクリックして、入力画面が表示されることを確認します。
図10-3 社員新規登録の入力画面（input.html）
【知識メモ】年齢をテキストの入力欄にしている理由
年齢は数字ですが、Spring入門の入力画面と同じように、テキストの入力欄（type="text"）にしています。Spring入門では、「二十四」のように数字以外が入力されたときに、サーバーのプログラムでエラーのメッセージを表示する仕組みを学びます。
10.5 確認画面を作る
確認画面は、入力した内容を表示して、「戻る」か「登録」を選んでもらう画面です。
-
ch10フォルダーに、同じ手順でconfirm.htmlを作り、次のように書きます。ch10/confirm.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>社員新規登録（確認）</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <h1>社員新規登録（確認）</h1> <p>次の内容で登録します。よろしければ「登録」ボタンを押してください。</p> <table> <tr><th>氏名</th><td>田中 美咲</td></tr> <tr><th>性別</th><td>女</td></tr> <tr><th>年齢</th><td>24</td></tr> <tr><th>生年月日</th><td>2001/06/15</td></tr> <tr><th>部署</th><td>開発部</td></tr> <tr><th>住所（都道府県）</th><td>愛知県</td></tr> </table> <a class="button" href="input.html">戻る</a> <form class="inline" action="complete.html" method="post"> <button type="submit">登録</button> </form> </body> </html>この表は、見出しの
<th>を各行の左に置き、1行に「項目の名前」と「値」を並べています。1行が短いので、<tr>から</tr>までを1行に続けて書いています。第6章の表と同じように、何行かに分けて書いても、表示は変わりません。 -
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。
図10-4 社員新規登録の確認画面（confirm.html）
確認画面の値（田中 美咲さんの内容）は、HTML に直接書いたものです。入力画面で何を入力しても、同じ内容が表示されます（第8章「送られた内容を、HTML だけでは表示できない」）。Spring入門では、この部分にサーバーのプログラムが、入力された値を入れて表示します。
10.6 完了画面を作る
-
ch10フォルダーに、同じ手順でcomplete.htmlを作り、次のように書きます。ch10/complete.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>社員新規登録（完了）</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <h1>社員新規登録（完了）</h1> <p>社員の登録が完了しました。</p> <p><a href="list.html">一覧へ戻る</a></p> </body> </html> -
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。
図10-5 社員新規登録の完了画面（complete.html）
10.7 動作確認
4つの画面を、図10-1 の順番で行き来できることを確かめます。
- Chrome で
http://localhost/html/ch10/list.htmlを開きます（図10-2）。 - 「新規登録」をクリックし、入力画面が表示されることを確認します（図10-3）。
- 入力欄に値を入力し、「確認」をクリックします。確認画面が表示されることを確認します（図10-4）。
- 「戻る」をクリックし、入力画面に戻ることを確認します。入力画面は新しく開き直されるので、入力した値は消えています。
- もう一度「確認」をクリックし、確認画面で「登録」をクリックします。完了画面が表示されることを確認します（図10-5）。
- 「一覧へ戻る」をクリックし、一覧画面に戻ることを確認します。
- 一覧画面の「変更」と「削除」をクリックし、同じ一覧画面が表示されることを確認します。この章では、データは変わりません。
画面は HTML だけで作っているので、入力した値は確認画面に表示されず、登録や削除をしても、一覧の社員は変わりません。データを受け取って処理するのは、Spring入門で作るサーバーのプログラムの役割です。
10.8 解説：form.inline と .error
form.inline
<form> は、<div> と同じように、前後で行が変わって表示されます（第4章「div と span」）。そのままでは、一覧画面の「変更」と「削除」、確認画面の「戻る」と「登録」が、上下に分かれて表示されてしまいます。
form.inline { /* フォームを横に並べる（削除ボタン用） */
display: inline;
}
display: inline; は、要素を <span> と同じように、行を変えずに文章の流れの中に並べる指定です。class="inline" を付けた <form> だけにこの見た目を付けるので、フォームがリンクの横に並びます。
図10-6 form.inline の指定が無いと、「登録」が次の行に表示される
.error
.error { /* 入力チェックのエラーメッセージ */
color: #c00;
font-size: 14px;
}
.error は、class="error" が付いた要素の文字を、赤（#c00）の少し小さい文字にします（第7章「解説：セレクター」）。この章の画面には、class="error" の要素はありません。Spring入門では、入力チェックで間違いが見つかったときに、入力画面の各入力欄の下に <div class="error"> でメッセージを表示します（第4章「class 属性」）。そのときのために、ここで app.css に書いておきます。
10.9 解説：画面のつなぎ方
4つの画面は、リンクと、POST のフォームの2つの方法でつないでいます。
| ボタン・リンク | つなぎ方 | 理由 |
|---|---|---|
| 新規登録・変更・戻る・一覧へ戻る | リンク（<a>） |
画面を表示するだけで、データを変えないため。見た目だけボタンにしたいものは class="button" を付ける |
| 確認 | POST のフォーム | 入力した内容を、サーバーに送るため |
| 登録・削除 | POST のフォーム | サーバーのデータを変えるため（第8章「解説：GET と POST」） |
「削除」と「登録」は、送る入力欄が1つも無いフォームです。それでもフォームにするのは、データを変える操作を POST のリクエストにするためです。「削除」のボタンを押すと、POST のリクエストが送られます。Spring入門では、このリクエストを受け取ったプログラムが、データベースからその社員を削除します。
10.10 Spring入門へ進む準備
Spring入門では、この章で作った4つの画面とほとんど同じ HTML を、テンプレート として書きます（第3章で使った Eclipse の「テンプレート」とは別のものです）。この章の HTML との違いは、主に次の4つです。
ファイルを置く場所
| この章のファイル | Spring入門で置く場所 |
|---|---|
ch10/css/app.css |
src/main/resources/static/css/app.css |
ch10/list.html |
src/main/resources/templates/employee/list.html |
ch10/input.html |
src/main/resources/templates/employee/register/input.html |
ch10/confirm.html |
src/main/resources/templates/employee/register/confirm.html |
ch10/complete.html |
src/main/resources/templates/employee/register/complete.html |
th: で始まる属性
Spring入門のテンプレートには、th:text や th:href のように、th: で始まる属性が加わります。これは Thymeleaf（タイムリーフ）という仕組みの属性で、サーバーのプログラムが、ここにデータベースの値などを入れてから、Chrome に HTML を返します。たとえば、一覧画面の氏名のマスは、次のように変わります。
<td>雷禅 海皇</td>
<td th:text="${employee.name}">雷禅 海皇</td>
th:text を付けると、「雷禅 海皇」の部分が、データベースから読み出した社員の氏名に置き換わって表示されます。タグや class などの書き方は、この章で書いたものと同じです。
データの行は1行だけ書く
この章の一覧画面では、3人の社員の行を手で書きました。Spring入門では、データの行を1行だけ書き、th:each という属性で、データベースの社員の数だけ、その行を繰り返して表示します。社員が増えても、テンプレートを書き直す必要はありません。
パスの書き方
この章では、CSS の場所を css/app.css のように、今のページから見た相対パスで書きました（第5章「相対パス」）。Spring入門では、/css/app.css や /employees のように、/ から始まるパス で書きます。/ から始まるパスは、今のページの場所に関係なく、サーバーの一番上から数えた場所を表します。
相対パスを使わないのは、ファイルを置く場所が離れるためです。上の表のとおり、Spring入門では HTML は templates の下、CSS は static の下に置きます。static の下のファイルは、static を省いた場所がそのまま URL になります（static/css/app.css は /css/app.css）。一方、画面の URL は /employees や /employees/register のように、ファイルの場所とは別に決まります。そのため、「今のページから見た位置」では CSS の場所を書けません。
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" th:href="@{/css/app.css}">
th:href="@{…}" の書き方は、Spring入門で説明します。ここでは、パスが / から始まることだけを覚えておいてください。
【知識メモ】この教材で身に付けたこと
Spring入門の対象者の条件の一つは、「HTML のタグ（表やフォーム）を書いたことのある人」です。この教材で、表とフォームを使った社員管理アプリの画面を書けるようになったので、この条件を満たしています。Spring入門では、この画面の HTML を土台にして、Java のプログラムとデータベースをつないでいきます。
10.11 うまくいかないときは
| 症状 | 考えられる原因と対処 |
|---|---|
| ある画面だけ CSS の見た目が付かない | その画面の <head> に、<link rel="stylesheet" href="css/app.css"> を書き忘れています。4つの画面すべてに書きます。詳しくは付録A「CSS が反映されない」を見てください。 |
| 「変更」と「削除」、「戻る」と「登録」が上下に分かれる |
<form> の class="inline" か、app.css の form.inline のルールが抜けているか、つづりが違います。 |
| 「確認」や「登録」を押すと「HTTPステータス 404 – 見つかりません」と表示される |
action の送信先のつづりが違うか、その画面のファイルを作っていません。ch10 フォルダーに4つの HTML ファイルがあるかを確かめてください。詳しくは付録A「ページが表示されない」を見てください。 |
| 確認画面に、入力した値が表示されない | 正しい動きです。HTML だけでは、送られた値を表示できません（10.5）。 |
| 完了画面で再読み込みすると「フォーム再送信の確認」が表示される | 正しい動きです。POST で表示した画面を再読み込みすると、同じ POST をもう一度送るかを確認されます（第8章「POST で送る」）。 |
ほかのつまずきは、付録A「よくあるつまずきと対処法」も参考にしてください。
10.12 まとめと確認問題
まとめ
- 社員管理アプリの一覧・入力・確認・完了の4つの画面を、表とフォームで作った。4つの画面は、同じ
css/app.cssを読み込んで見た目をそろえる -
form.inline（display: inline;）で、フォームのボタンをリンクの横に並べられる -
.errorは、Spring入門で入力チェックのエラーのメッセージを赤い文字にするために使う - 画面を表示するだけのつなぎ方はリンク、入力した内容を送るときや、データを変えるときは POST のフォームを使う
- Spring入門では、同じ HTML に
th:で始まる属性を足したテンプレートを書き、サーバーのプログラムがデータを入れて表示する
確認問題
問1 4つの画面で、同じ見た目をそろえるために、それぞれの HTML に何を書きましたか。
解答を見る
<head> の中に、<link rel="stylesheet" href="css/app.css"> を書き、同じ app.css を読み込みました。
問2 一覧画面の「削除」を、リンクではなく POST のフォームにしているのはなぜですか。
解答を見る
削除は、サーバーのデータを変える操作だからです。データを変える操作は、POST のリクエストで送ります。
問3 確認画面の「戻る」と「登録」を横に並べるために、HTML と CSS にそれぞれ何を書きましたか。
解答を見る
HTML では、「登録」のフォームに class="inline" を付けました。CSS では、form.inline { display: inline; } を書き、そのフォームを行を変えずに並べるようにしました。
問4 この章の確認画面に、入力画面で入力した値が表示されないのはなぜですか。Spring入門では、どのように表示しますか。
解答を見る
HTML のファイルは、送られた値に関係なく、書かれた中身がそのまま返されるからです。Spring入門では、テンプレートに th:text などの属性を書き、サーバーのプログラムが、送られた値を入れてから HTML を返します。