【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 に同梱されているので、別にインストールする必要はありません。

ソフトウェア	役割	インストール先	所要時間の目安
Eclipse （Pleiades All in One 2026）	HTML や CSS のファイルを作って書く。Tomcat の起動と停止もここから行う。Java と Tomcat が同梱されている	C:\pleiades\2026-06	約15〜30分
Google Chrome	ページの表示を確かめるブラウザ	既定の場所	約5分

ファイルの拡張子を表示する

この教材では、eclipse.exe や hello.html のように、ファイル名の最後の「.」から後ろの部分（拡張子）でファイルの種類を見分けます。Windows の初期設定では拡張子が表示されないので、インストールを始める前に、表示されるように設定しておきましょう。

1. エクスプローラーを開きます。

2. 上のメニューの 表示 → 表示 → ファイル名拡張子 を選び、チェックを入れます。

   
   図2-1 表示 → 表示 → ファイル名拡張子

これで、たとえば「eclipse」と表示されていたファイルが「eclipse.exe」と表示されるようになります。

2.2 Eclipse（Pleiades All in One）

Eclipse（エクリプス）は、Java の開発で広く使われている統合開発環境（IDE）です。HTML や CSS のファイルも、Eclipse で作って書くことができます。Pleiades All in One は、Eclipse を日本語化し、開発に必要なものをひとまとめにした配布版です。

この教材では、Pleiades の Full Edition を使います。Full Edition には次のものが含まれているため、別にインストールする必要はありません。

• Java（JDK）：Eclipse と Tomcat を動かすために使われます
• Tomcat：8.5・9・10・11 の各バージョン。この教材では、いちばん新しい Tomcat 11 を使います

ダウンロード

1. Chrome で Pleiades のダウンロードページ（https://willbrains.jp/pleiades_distros2026.html）を開きます。

2. 表の中から 「Windows x64」 の行を探します。

3. その行の 「Java」 の列にある 「Full Edition」 の「Download」をクリックします。

   
   図2-2 Pleiades のダウンロードページ（赤枠をクリック）

4. ダウンロードが始まります。ファイル名に _jre が含まれる .exe ファイル（例：pleiades-2026-xx-java-win-64bit-jre_xxxxxxxx.exe）であることを確認してください。ファイルの大きさは約 2GB です。

【ご注意】Full Edition をダウンロード

必ず Full Edition をダウンロードしてください。ファイル名に _jre が含まれていれば Full Edition です。Full Edition でないと Tomcat が同梱されていないため、この章の後半でプロジェクトを動かせません。

展開（インストール）

ダウンロードしたファイルは「自己解凍形式」の実行ファイルです。ダブルクリックするだけで、中身のファイルが取り出されます。

1. ダウンロードした .exe ファイルをダブルクリックします。

2. 「Windows によって PC が保護されました」と表示された場合は、「詳細情報」をクリックします。

   
   図2-3 「詳細情報」をクリック

   アプリの名前（pleiades-…_jre….exe）が表示されるので、「実行」をクリックします。

   
   図2-4 「実行」をクリック

   インターネットからダウンロードした、利用者の少ないアプリを実行するときに Windows が表示する確認画面です。Pleiades の公式ページからダウンロードしたファイルであれば、実行してかまいません。

3. 「Pleiades All in One 自己解凍書庫」の画面が表示されます。「作成先フォルダ」には c:\pleiades\2026-06 のような場所が最初から入っているので、そのまま「解凍」をクリックします。フォルダーは自動で作られます。

   
   図2-5 作成先フォルダーを確認して「解凍」

   フォルダー名の数字（2026-06）は、ダウンロードした版によって変わります。この教材では C:\pleiades\2026-06 として説明するので、違う数字になった場合は読み替えてください。

4. 「解凍進捗」のバーが最後まで進むのを待ちます（数分〜十数分）。終わると画面は自動で閉じます。

   
   図2-6 解凍中

5. エクスプローラーで C:\pleiades\2026-06\eclipse を開き、eclipse.exe があることを確認します。

   
   図2-7 eclipse フォルダーの中の eclipse.exe

【再確認】展開先は短いパスにする

「ダウンロード」フォルダーやデスクトップなど、パス（フォルダーの場所を表す文字列）が長い場所に展開すると、Windows のパスの長さの制限にかかって展開に失敗したり、Eclipse が正しく動かなかったりします。解凍の画面にも書かれているとおり、作成先フォルダーは既定の C:\pleiades\2026-06 のような 短く、日本語や空白を含まないパス のままにしてください。

起動

1. C:\pleiades\2026-06\eclipse\eclipse.exe を右クリックし、「その他のオプションを確認」→「送る」→「デスクトップ（ショートカットを作成）」を選びます。以後はデスクトップのショートカットから起動できます。

   
   図2-8 デスクトップにショートカットを作る

2. ショートカット（または eclipse.exe）をダブルクリックして Eclipse を起動します。初回の起動は少し時間がかかります。

3. 「ワークスペースとしてのディレクトリー選択」画面が表示されます。ワークスペース とは、作ったプロジェクトを保存しておくフォルダーです。表示されている既定の場所（../workspace）のままにして、次の2つを行います。

   • 「この選択をデフォルトとして使用し、今後この質問を表示しない」に チェックを入れます（最初はチェックが外れています）。
   • 「起動」をクリックします。

   
   図2-9 ワークスペースは既定の ../workspace のまま、チェックを入れて「起動」

   チェックを入れておくと、次回からこの画面は表示されず、同じワークスペースで起動します。

4. 初回の起動では「Microsoft Defender 除外チェック」という画面が表示されることがあります。最初はどちらも選ばれていません。Eclipse の動きを速くしたい場合は、図のように上の「パフォーマンスを向上させるために、Eclipse IDE をスキャンから除外します。」を選んで、「続行」をクリックします。

   
   図2-10 Microsoft Defender 除外チェック（除外する場合は上を選んで「続行」）

   Windows のウイルス対策（Microsoft Defender）が Eclipse のファイルを毎回検査すると、Eclipse の動きが遅くなります。この画面は、Eclipse のフォルダーを検査の対象から外すかどうかを選ぶものです。

   【ご注意】会社のパソコンでは

   検査の対象から外すと、そのフォルダーはウイルス対策で守られなくなります。会社から貸与されたパソコンでは、セキュリティの決まりがある場合が多いので、どちらを選ぶかはパソコンの管理者の指示に従ってください。迷ったときは、下の「Microsoft Defender による Eclipse IDE のスキャンを維持します。」を選んでも、教材の内容は問題なく進められます。

5. Eclipse の画面が表示されたら起動は完了です。初回は、リリースノート（新機能の紹介）や「チャット」（GitHub Copilot）など、この教材では使わない画面も開いた状態で表示されます。

   
   図2-11 起動直後の Eclipse（赤枠は、この教材では使わない画面）

   Pleiades では、画面が黒を基調とした「ダーク」の配色で表示されることがあります。この教材の画面も黒い配色のものがありますが、配色が違っても操作は同じです。

【知識メモ】ワークスペースの場所

../workspace は「eclipse.exe があるフォルダーの1つ上の階層にある workspace フォルダー」という意味です。つまり C:\pleiades\2026-06\workspace になります（画面の「絶対パス」にも表示されています）。この章で作るプロジェクトは、このフォルダーの中に保存されます。

画面を使いやすく整える

Eclipse の画面は、「パッケージ・エクスプローラー」や「コンソール」などの小さな画面（ビュー）を組み合わせてできています。ビューは閉じたり、場所を移したりして、自由に並べ替えられます。この教材で作業しやすいように、次のように整えておきましょう。

1. 使わないビューを閉じる：図2-11 の赤枠のタブ（「WHATISNEW.html」などのリリースノート、「アウトライン」、「チャット」）は、この教材では使いません。それぞれのタブの「×」をクリックして閉じます。
2. ビューを移動する：「マーカー」などのビューのタブをマウスでつかんで（ドラッグして）、画面右下のエディター（何も開いていない広い領域）の下あたりまで運び、マウスを離します。ビューが画面の下側に並んで、エディターを広く使えるようになります。
3. 「コンソール」ビューを出す：メニューから ウィンドウ → ビューの表示 → コンソール を選びます。コンソールには、Tomcat を起動したときのメッセージやエラーが表示されます。

図2-12 整えたあとの Eclipse（赤枠：下に「コンソール」「サーバー」などのビューが並んでいる）

【便利な使い方】画面の配置を元に戻したいときは

ビューを閉じすぎたり、配置がわからなくなったりしたときは、メニューから ウィンドウ → パースペクティブ → パースペクティブのリセット を選ぶと、最初の配置に戻せます。

2.3 Google Chrome

作ったページの表示を確かめるには、ブラウザの Google Chrome を使います。すでにインストールされている場合は、この節は読み飛ばしてかまいません。

1. Chrome のダウンロードページ（https://www.google.com/intl/ja/chrome/）を開きます。

2. 「Chrome をダウンロード」をクリックし、ダウンロードしたインストーラーを実行します。

   
   図2-13 Google Chrome のダウンロードページ

3. インストールが終わると Chrome が起動します。

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

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

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

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

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

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

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

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

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

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

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

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

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

   
   図2-17 作成した 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.5 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-18 サーバー・ビュー（赤枠の Tomcat11_Java25 を使う）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tomcat を起動する

1. サーバー・ビューの「Tomcat11_Java25」を右クリックし、「開始」を選びます。

2. 「Windows セキュリティの重要な警告」が表示された場合は、「アクセスを許可する」をクリックします。

3. サーバー・ビューの「Tomcat11_Java25」の右側が「[起動済み, 同期済み]」になれば、起動は完了です。「Tomcat11_Java25」の下には、追加した html も表示されます。

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

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

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

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

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

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

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

2.6 動作確認

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

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

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

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

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

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

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

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

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

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

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

Tomcat の停止と、次回の起動

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

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

2.7 うまくいかないときは

症状	考えられる原因と対処
ダウンロードがとても遅い、途中で止まる	ファイルが大きいため時間がかかります。混雑する時間帯を避けるか、別のネットワークで試してください。途中で止まった場合は、ダウンロードをやり直します。
Pleiades の展開に失敗する、Eclipse が起動しない	展開先のパスが長い、または日本語や空白を含んでいる可能性があります。C:\pleiades\2026-06 に展開し直してください。
ターゲット・ランタイムに「Tomcat11 (Java25)」が表示されない	Full Edition ではない版をダウンロードした可能性があります。ファイル名に _jre が含まれる Full Edition をダウンロードし直してください。
Tomcat の起動で、ポートが使用中というメッセージが出る	ほかのソフトウェアがポート 80 を使っています。付録Aを参照してください。
Chrome に「このサイトにアクセスできません」と表示される	Tomcat が起動していないか、ポートが 80 になっていません。サーバー・ビューの状態と、ポートの設定（2.5）を確かめてください。

2.8 まとめと確認問題

まとめ

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

確認問題

問1　Pleiades All in One は、Full Edition を使います。その理由を答えてください。

解答を見る

Full Edition には、Java（JDK）と Tomcat が同梱されているためです。別にインストールや設定をしなくても、すぐにプロジェクトを Tomcat で動かせます。

問2　Pleiades を「ダウンロード」フォルダーではなく C:\pleiades\2026-06 に展開するのはなぜですか。

解答を見る

パスが長いと Windows のパスの長さの制限にかかり、展開に失敗したり Eclipse が正しく動かなかったりするためです。短く、日本語や空白を含まないパスに展開します。

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

解答を見る

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

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

解答を見る

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

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

解答を見る

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

---

前へ

第1章「HTML と Web ページ

投稿制限中(10/12)

次へ