【HTML入門】第2章 開発環境の構築

HTML を書いて表示を確かめるための環境を準備します。Eclipse の準備は入門シリーズ共通の「開発環境の準備」で行い、この章では HTML のファイルを置くプロジェクトを作って、Tomcat から Chrome にページを送れるようにします。この章で準備した環境を、最後の章まで使い続けます。

この章で学ぶこと

• Eclipse（Pleiades All in One）と Google Chrome の準備（共通の「開発環境の準備」で行う）
• HTML のファイルを置く動的 Web プロジェクト html の作成
• Tomcat のポートを 80 に変えて、プロジェクトを動かす設定
• Tomcat の起動と停止、Chrome での動作確認

2.1 この教材で使うもの

この教材では、次の2つのソフトウェアを使います。サーバーの Tomcat は Eclipse に同梱されているので、別にインストールする必要はありません。インストールの手順は、入門シリーズ共通の 「開発環境の準備（Windows版）」 にまとめています。mac で取り組むときは、「開発環境の準備（macOS版）」 を使います。

ソフトウェア	この教材での役割	準備の手順
Eclipse （Pleiades All in One 2026）	HTML や CSS のファイルを作って書く。Tomcat の起動と停止もここから行う。Java と Tomcat が同梱されている	「開発環境の準備」4「Eclipse（Pleiades All in One）」
Google Chrome	ページの表示を確かめるブラウザ	「開発環境の準備」3「Google Chrome」
（Windows の設定）	ファイルの拡張子（.html など）を表示する	「開発環境の準備」2「ファイルの拡張子を表示する」

1. 「開発環境の準備」 を開き、「2 ファイルの拡張子を表示する」「3 Google Chrome」「4 Eclipse（Pleiades All in One）」を行います。
2. 終わったら、この章に戻って、2.2 に進みます。

2.2 動的 Web プロジェクトを作る

Eclipse では、作るファイルを プロジェクト という単位でまとめて管理します。HTML や CSS のファイルを Tomcat からブラウザに送るには、動的 Web プロジェクト という種類のプロジェクトを作ります。この教材では、プロジェクトの名前を html にします。

1. 画面左の「パッケージ・エクスプローラー」にある「動的 Web プロジェクトを作成します」をクリックします。

図2-1 「動的 Web プロジェクトを作成します」をクリック（赤枠）

1. 「新規動的 Web プロジェクト」の画面が表示されます。「プロジェクト名」に html と入力します。

   「ターゲット・ランタイム」に「Tomcat11 (Java25)」が選ばれていることも確認します。ターゲット・ランタイムは、このプロジェクトを動かすサーバーです。最初から選ばれているので、変える必要はありません。それ以外の項目も、最初から入っている値のままでかまいません。

図2-2 プロジェクト名に html と入力（赤枠）して「次へ」

入力したら「次へ」をクリックします。

1. 「Java」の画面が表示されます。この教材では Java を書かないので、何も変えずに「次へ」をクリックします。

2. 「Web モジュール」の画面が表示されます。次の2つの値になっていることを確認して、「完了」をクリックします。

   項目	値	意味
   コンテキスト・ルート	html	URL の http://localhost/html/ の html の部分になる名前
   コンテンツ・ディレクトリー	src/main/webapp	HTML や CSS のファイルを置くフォルダー

図2-3 コンテキスト・ルートとコンテンツ・ディレクトリーを確認して「完了」

1. パッケージ・エクスプローラーに html プロジェクトができます。プロジェクトの左の「>」をクリックして開き、src → main → webapp の順にフォルダーを開いて、webapp フォルダーがあることを確認します。

図2-4 作成した html プロジェクトと webapp フォルダー

webapp フォルダーの中には、META-INF と WEB-INF の2つのフォルダーが最初から作られています。どちらも、この教材では使いません。

【再確認】プロジェクト名は小文字の html

プロジェクト名は、必ずすべて小文字で html と入力してください。プロジェクト名は URL の一部になります。この教材の URL（http://localhost/html/…）と同じ名前にしておかないと、教材のとおりに URL を開いてもページが表示されません。

【知識メモ】webapp フォルダーの役割

Tomcat がブラウザに送るのは、webapp フォルダーの中のファイルです。第3章からは、この webapp フォルダーのすぐ下に章ごとのフォルダー（ch03 など）を作り、その中に HTML のファイルを作ります。WEB-INF フォルダーの中に置いたファイルは、ブラウザに送られません。src/main/java などのほかのフォルダーは、Java のプログラムを書くときに使うもので、この教材では使いません。

2.3 Tomcat を準備する

Pleiades には、同梱の Tomcat を使うサーバーの設定が、最初からいくつか登録されています。この教材では、その中の Tomcat11_Java25（Tomcat 11 を Java 25 で動かす設定）を使います。Pleiades の版によって、名前の Java の番号（Java25）は変わります。名前が違うときは、いちばん新しい Tomcat の行を使い、以後の「Tomcat11_Java25」を読み替えてください。

Tomcat はポート番号 8080 でリクエストを受け付ける設定になっています。この教材では、URL にポート番号を書かなくてよいように、80 に変えて使います（第1章「URL の読み方」）。

ポートを 80 に変える

1. 画面の下にある「サーバー」タブをクリックします。「サーバー」タブが見当たらないときは、メニューの ウィンドウ → ビューの表示 → サーバー で表示できます。登録されている6つのサーバーの一覧が表示されます。どれも、まだ動いていないので「[停止]」と表示されています。

図2-5 サーバー・ビュー（赤枠の Tomcat11_Java25 を使う）

1. 「Tomcat11_Java25」をダブルクリックします。エディターに、サーバーの「概要」が表示されます。

2. 右側の「ポート」の欄で、ポート名が「HTTP/1.1」の行のポート番号 8080 をクリックし、80 に書き換えて Enter キーを押します。

   ほかの行（「Tomcat 管理ポート」）は変えません。

図2-6 HTTP/1.1 のポート番号を 80 に書き換える（赤枠）

書き換えると、エディターのタブの名前が「*Tomcat11_Java25」のように、先頭に * が付いた表示に変わります（図2-8 の左）。* は、変更をまだ保存していない という印です。この状態では、変更はまだ Tomcat の設定に反映されていません。

1. 保存します。保存は、ツールバーの 保存ボタン（図2-7 の赤枠）をクリックするか、Ctrl + S キーを押して行います。どちらで保存しても同じです。

図2-7 ツールバーの保存ボタン（赤枠）

保存したら、タブの名前の先頭の * が 消えたことを必ず確認 します（図2-8 の右）。* が消えていれば、保存できています。

図2-8 保存前と保存後のタブ（左：保存前は * が付いている、右：保存後は * が消えた）

1. エディターのタブの「×」をクリックして、「概要」を閉じます。

【再確認】 が消えたことを確認する*

タブに * が付いたままのときは、まだ保存されていません。保存しないまま進めると、Tomcat は 8080 のまま起動し、教材の URL でページを開けません。先に進む前に、* が消えていることを確認してください。

この確認は、第3章から HTML や CSS のファイルを書くときも同じです。ファイルを書き換えたら、保存ボタンか Ctrl + S で保存し、タブの * が消えたことを確認してから、Chrome で表示を確かめます。

プロジェクトを Tomcat に追加する

Tomcat に、どのプロジェクトのファイルを送るかを教えます。

1. サーバー・ビューの「Tomcat11_Java25」を右クリックし、「追加および除去」を選びます。

図2-9 右クリックメニューの「追加および除去」（赤枠）

1. 「追加および除去」の画面が表示されます。左の「使用可能」の一覧から html を選び、「追加」をクリックします。

図2-10 html を選んで「追加」をクリック（赤枠）

1. html が右の「構成済み」の一覧に移ったことを確認して、「完了」をクリックします。

図2-11 html が「構成済み」に移ったら「完了」をクリック（赤枠）

サーバー・ビューの「Tomcat11_Java25」の左に「>」が付き、開くと html が入っていることを確認できます。

Tomcat を起動する

1. サーバー・ビューの「Tomcat11_Java25」を右クリックし、「開始」を選びます。
2. 「Windows セキュリティの重要な警告」が表示された場合は、「アクセスを許可する」をクリックします。
3. サーバー・ビューの「Tomcat11_Java25」の右側が「[起動済み, 同期済み]」になれば、起動は完了です。「Tomcat11_Java25」の下には、追加した html も表示されます。

図2-12 Tomcat の起動が完了したところ（赤枠）

1. 「コンソール」タブをクリックして、Tomcat のメッセージを見ます。最後の行に「サーバーの起動 [○○] ミリ秒」と表示されています（○○には数字が入ります）。その少し上の「プロトコルハンドラー ["http-nio-80"] を開始しました。」の行の 80 は、Tomcat がポート 80 でリクエストを受け付けていることを表しています。

図2-13 起動したときのコンソール（赤枠：ポート 80 で開始した行と、起動が完了した行）

【ご注意】コンソールの文字が赤くても慌てない

Tomcat のメッセージは、エラーでなくても赤い文字で表示されます。行の先頭が「情報:」のメッセージは、Tomcat の動きを知らせるもので、エラーではありません。最後に「サーバーの起動 [○○] ミリ秒」と表示されていれば、正しく起動しています。

【ご注意】「ポートが使用中」と表示されたとき

起動するときに、ポートがすでに使われているというメッセージが表示された場合は、ほかのソフトウェアがポート 80 を使っています。付録A「ポート 80 が使えない」を読んで対処してください。

2.4 動作確認

Tomcat が Chrome からのリクエストに応えられることを確かめます。

1. Chrome のアドレスバーに http://localhost/html/ と入力して、Enter キーを押します。

図2-14 アドレスバーに http://localhost/html/ と入力したところ（赤枠）

1. 「HTTPステータス 404 – 見つかりません」という画面が表示されることを確認します。

図2-15 Tomcat が返した 404 の画面（赤枠：アドレスバー）

図2-14 と図2-15 のアドレスバーを見比べてください。入力したときは http://localhost/html/ でしたが、ページが表示されると、先頭の http:// が省略されて localhost/html/ と表示されます。Chrome が表示を短くしているだけで、開いている URL は入力したものと同じです。

この画面は、Tomcat が返したエラーの画面 です。Chrome のリクエストを Tomcat が受け取り、「求められたファイルが見つからない」というレスポンスを返したことを表しています。html プロジェクトには、まだ HTML のファイルが1つも無いので、この画面が表示されれば正しく動いています。第3章で HTML のファイルを作ると、ページが表示されるようになります。

【知識メモ】ステータスコード

404 は、レスポンスの結果を表す ステータスコード という番号で、「見つからない」という意味です。ページが正しく返されたときのステータスコードは 200 で、このときは画面に番号は表示されません。

【ご注意】「このサイトにアクセスできません」と表示されたとき

これは Chrome 自身のエラー画面 で、Tomcat に接続できなかったことを表します。サーバー・ビューで「Tomcat11_Java25」が「[起動済み, 同期済み]」になっているか、ポートを 80 に変えて保存したか（2.3）を確かめてください。

Tomcat の停止と、次回の起動

学習を終えるときは、サーバー・ビューの「Tomcat11_Java25」を右クリックし、「停止」を選んで Tomcat を止めます。Eclipse を終了したときも、Tomcat は止まります。

次に学習するときは、Eclipse を起動してから、2.3 の「Tomcat を起動する」と同じ手順で Tomcat を起動します。ポートの変更とプロジェクトの追加は、もう一度行う必要はありません。

2.5 うまくいかないときは

症状	考えられる原因と対処
ターゲット・ランタイムに「Tomcat11 (Java25)」が表示されない	Full Edition ではない版をダウンロードした可能性があります。ファイル名に _jre が含まれる Full Edition をダウンロードし直してください。
Tomcat の起動で、ポートが使用中というメッセージが出る	ほかのソフトウェアがポート 80 を使っています。付録A「ポート 80 が使えない」を参照してください。
Chrome に「このサイトにアクセスできません」と表示される	Tomcat が起動していないか、ポートが 80 になっていません。サーバー・ビューの状態と、ポートの設定（2.3）を確かめてください（付録A「ページが表示されない」）。

インストールでのつまずきは、「開発環境の準備」の「うまくいかないときは」 を見てください。

2.6 まとめと確認問題

まとめ

• この教材で使うのは Eclipse（Pleiades All in One 2026 の Full Edition。Java と Tomcat が同梱）と Chrome の2つ。インストールの手順は、入門シリーズ共通の「開発環境の準備」にまとめてある
• 動的 Web プロジェクト html を作った。HTML や CSS のファイルは src/main/webapp フォルダーの中に作る
• サーバーは Tomcat11_Java25 を使い、ポートを 80 に変えて、html プロジェクトを追加した
• エディターのタブに * が付いているのは、まだ保存していないという印。保存ボタンか Ctrl + S で保存し、* が消えたことを確認する
• Tomcat は、サーバー・ビューの右クリックメニューの「開始」「停止」で起動・停止する
• http://localhost/html/ を開いて、Tomcat が返した 404 の画面が表示されることを確かめた

確認問題

問1　この教材でサーバーとして使う Tomcat は、どこにありますか。また、どこから起動・停止しますか。

解答を見る

Eclipse（Pleiades All in One の Full Edition）に同梱されているので、別にインストールしません。起動と停止は、Eclipse のサーバー・ビューで Tomcat を右クリックして「開始」「停止」を選んで行います。

問2　HTML や CSS のファイルは、html プロジェクトのどのフォルダーの中に作りますか。

解答を見る

src/main/webapp フォルダーの中です。Tomcat がブラウザに送るのは、このフォルダーの中のファイルです。

問3　Tomcat のポートを 8080 のまま使った場合、第3章で作る ch03 フォルダーの hello.html を開く URL はどうなりますか。

解答を見る

http://localhost:8080/html/ch03/hello.html です。ポートを 80 に変えたので、この教材では :8080 を書かずに http://localhost/html/ch03/hello.html で開けます。

問4　http://localhost/html/ を開いたとき、「HTTPステータス 404 – 見つかりません」と表示される場合と、「このサイトにアクセスできません」と表示される場合では、何が違いますか。

解答を見る

「HTTPステータス 404」は Tomcat が返した画面で、Tomcat は動いていて、ファイルが見つからなかったことを表します。「このサイトにアクセスできません」は Chrome 自身のエラー画面で、Tomcat に接続できなかったこと（起動していない、ポートが違うなど）を表します。

---

前へ

第1章 HTML と Web ページ

次へ

第3章 最初の HTML