この教材について
目的
HTML を初めて学ぶ人が、表やフォームのある Web ページを自分で書けるようになるための教材です。Eclipse と呼ばれる統合開発環境（IDE）を導入し、その中で作りながら学びます。動作確認には Chrome を使います。最後の章では、Spring入門 で作る社員管理アプリの画面を、HTML と CSS だけで作ります。
- IDE：Eclipse 2026（Pleiades All in One）
- サーバー：Tomcat（Eclipse に同梱）
- ブラウザ：Google Chrome
対象者
- HTML を初めて学ぶ人
- パソコンにソフトウェアをインストールしたことのある人
Spring入門との関係
この教材は Spring入門の前に学ぶために作られましたが、Spring入門とは関係なく、一般的な HTML と CSS の学習にも使えます。Spring入門では使わない画像（img）・改行（br）・複数行の入力欄（textarea）・チェックボックスも学べます。
扱う HTML と CSS は、これらを除くと Spring入門で使うものに絞っています。第10章で作る4つの画面は、Spring入門で使う画面のテンプレートと同じ作りです。
すでに HTML を書ける人は、この教材を飛ばして、Spring入門 から始めてかまいません。
使用するソフトウェア
この教材では、次のソフトウェアを使います。インストール手順は 第2章 で説明します。
| ソフトウェア | バージョン | ダウンロード先 | 備考 |
|---|---|---|---|
| Eclipse （Pleiades All in One） |
2026（最新版） | Pleiades All in One Eclipse 2026 | Windows 64bit 版の「Java」の Full Edition を使います |
| Tomcat | Eclipse に同梱の最新版 | （ダウンロード不要） | Pleiades の Full Edition に 同梱されている Tomcat を使います。作った HTML をブラウザに送るサーバーです |
| Google Chrome | 最新版 | Google Chrome | 作ったページの表示に使います |
用意するパソコン
- Windows 11 の 64bit 版
- メモリ 8GB 以上（推奨）
- ディスクの空き容量 10GB 以上（Eclipse 約3GB に、ダウンロードしたファイルと作業用の余裕を加えた目安）
- パソコンの管理者権限を持つユーザーでサインインできること
- 安定したネットワーク（ダウンロードするファイルが大きいため）
この教材で作るもの
Eclipse で html という名前のプロジェクトを作り、その中に章ごとのフォルダー（ch03、ch04 …）を作って、HTML のファイルを書いていきます。書いたページは、Chrome で http://localhost/html/ch03/hello.html のような URL を開いて確かめます。
第10章では、それまでに学んだことを使って、社員管理アプリの次の4つの画面を作ります。
- 社員一覧画面（表と、変更・削除のボタン）
- 社員新規登録の入力画面（入力欄、ラジオボタン、日付、プルダウン）
- 社員新規登録の確認画面
- 社員新規登録の完了画面
これらの画面は、Spring入門で作るアプリの画面と同じ作りです。この教材で書いた HTML が、Spring入門でそのまま土台になります。
各章の進め方
各章は、おおむね次の流れで進みます。
- この章で学ぶこと … ゴールを確認します
- 手順 … Eclipse でファイルを作り、HTML や CSS を書きます
- 動作確認 … Chrome で表示を確かめます
- 解説 … 書いたタグや CSS の意味を理解します
- まとめと確認問題 … 理解できたかを確かめます
囲みの見方
本文の中には、次の4種類の囲みがあります。見出しの前のラベルと色で見分けられます。
【知識メモ】理解を深める補足
理由や用語などの補足です。急いでいるときは読み飛ばしてもかまいません。
【便利な使い方】作業が楽になるコツ
知らなくても進められますが、覚えておくと作業が楽になる操作や、現場で役立つ考え方です。
【ご注意】間違えやすい点・困ったときの対処
つまずきやすい点や、思ったとおりに表示されないときの直し方です。うまくいかないときは、まずこの囲みを読み直してください。
【再確認】必ず守ってほしいこと
先に進む前に、書かれているとおりになっているかを確かめてください。守らないと、後の章でうまく動かなくなります。