教材を進めていて、ページが思ったとおりに表示されないときの確かめ方をまとめます。各章の「うまくいかないときは」の表とあわせて使ってください。
A.1 まず確かめること
表示がおかしいときは、原因を探す前に、次の4つを順に確かめてください。多くのつまずきは、このどれかで解決します。
-
保存したか：エディターのタブに
*が付いていないかを確かめます。付いていたら、保存ボタンか Ctrl + S で保存します（第2章「ポートを 80 に変える」）。HTML と CSS の両方を確かめてください。 - 再読み込みしたか：Chrome の再読み込みボタンか F5 キーで、ページを読み込み直します。
- Tomcat が起動しているか：サーバー・ビューの「Tomcat11_Java25」が「[起動済み, 同期済み]」になっているかを確かめます（第2章「Tomcat を起動する」）。
- 届いた HTML が正しいか：Chrome の「ページのソースを表示」（Ctrl + U）で、自分が書いたとおりの HTML が届いているかを確かめます（第3章「ページのソースを表示する」）。
A.2 ページが表示されない
| 表示される画面 | 意味 | 確かめること |
|---|---|---|
| 「HTTPステータス 404 – 見つかりません」 | Tomcat は動いているが、URL のファイルが見つからない | URL のつづり（章のフォルダー名・ファイル名・拡張子）。 章のフォルダーが webapp のすぐ下にあるか（第3章「ch03 フォルダーを作る」）。URL とファイル名の大文字・小文字が同じか（Tomcat は大文字と小文字を区別する）。 プロジェクト名が小文字の html か（第2章「動的 Web プロジェクトを作る」） |
| 「このサイトにアクセスできません」 | Chrome が Tomcat に接続できない | Tomcat が起動しているか。 ポートを 80 に変えて保存したか（第2章「ポートを 80 に変える」）。 80 が使えずに 8080 で動かしている場合は、URL に :8080 を付けているか（A.7） |
A.3 文字化けする
日本語が、読めない記号の並びで表示されることを 文字化け といいます。ファイルを保存したときの文字コードと、Chrome が読み取るときの文字コードが合っていないと起きます（第3章「解説：HTML の骨組み」）。
| 文字化けする場所 | 確かめること |
|---|---|
| ページの文字 |
<head> の中に <meta charset="UTF-8"> があるか、つづりが合っているか。テンプレート「新規 HTML ファイル (5)」で作ったファイルには、最初から入っています |
| ほかの場所から持ってきたファイル | メモ帳などで作ったファイルを Eclipse にコピーすると、UTF-8 以外の文字コードで保存されていることがあります。この教材のファイルは、Eclipse の「HTML ファイル」「CSS ファイル」の機能で作ってください |
A.4 CSS が反映されない
| 症状 | 確かめること |
|---|---|
| 見た目がまったく変わらない |
<head> の中に <link rel="stylesheet" href="css/app.css"> があるか。href の相対パスが、HTML のファイルから見た CSS のファイルの場所と合っているか（第5章「相対パス」）。rel="stylesheet" のつづり |
| 一部のルールだけ効かない | セレクターとプロパティのつづり。 前の行の ; や、前のルールの } の書き忘れ。全角の記号や空白が混ざっていないか（第7章「解説：CSS の書き方と読み込み」） |
| クラスを付けた要素だけ見た目が変わらない | HTML の class 属性の名前と、CSS のセレクターの名前が同じか。CSS ではクラス名の前に . を付け、HTML では付けない |
| CSS を直したのに、古い見た目のまま | CSS のファイルを保存したか。保存していても変わらないときは、Ctrl キーを押しながら F5 キーを押して、Chrome が覚えている古いファイルを使わずに読み込み直す |
【便利な使い方】CSS のファイルを直接開いて確かめる
CSS が読み込まれているか分からないときは、Chrome のアドレスバーに CSS のファイルの URL（例：http://localhost/html/ch07/css/app.css）を入力して開いてみます。CSS の中身が表示されれば、ファイルの場所は合っています。「HTTPステータス 404」が表示されたら、ファイルの場所か名前が違います。
CSS の書き方・セレクター・プロパティの一覧は、付録B「CSS の早見表」にまとめています。
A.5 画像が表示されない
画像が見つからないと、画像の代わりに、壊れた画像のアイコンと alt の文章が表示されます（第5章「画像が見つからないときの表示」）。
| 確かめること | 説明 |
|---|---|
| 画像のファイルの場所 | パッケージ・エクスプローラーで、画像が章のフォルダーの中の images フォルダーに入っているか |
src の相対パス |
HTML のファイルから見た画像の場所と合っているか。images/logo.png のように、フォルダー名とファイル名を / でつなぐ |
| 大文字・小文字と拡張子 |
logo.png と Logo.png、.png と .PNG は別の名前として扱われる。拡張子が .jpg か .png かも確かめる |
| ファイル名の二重の拡張子 | エクスプローラーで拡張子を表示していないと、logo.png.png のような名前になっていても気づきにくい。拡張子を表示する設定にしておく（「開発環境の準備」の「ファイルの拡張子を表示する」） |
A.6 新規のメニューに「HTML ファイル」が無い
右クリックの「新規」のメニューに、「HTML ファイル」や「CSS ファイル」が表示されないことがあります。そのときは、次の手順で作ります。
- ファイルを作るフォルダーを右クリックし、新規 → その他 を選びます。
- 「ウィザードを選択」の画面で、Web → HTML ファイル（CSS のときは Web → CSS ファイル）を選び、「次へ」をクリックします。
- この後は、各章の手順と同じです。
A.7 ポート 80 が使えない
Tomcat を起動するときに、ポートがすでに使われていることを知らせる画面が表示された場合は、ほかのソフトウェアがポート 80 を使っています（第2章「Tomcat を起動する」）。ポート番号は、1つのパソコンの中で1つのソフトウェアしか使えません。
主な原因
| 原因 | 説明 |
|---|---|
| Windows の Web サーバーの機能（IIS） | Windows の機能の「インターネット インフォメーション サービス」を有効にしていると、「World Wide Web 発行サービス」がポート 80 を使います |
| ほかのソフトウェア | 会社の業務用のソフトウェアや、ほかの開発用のサーバーが、ポート 80 を使っていることがあります |
【便利な使い方】ポート 80 を使っているプログラムを調べる
どのプログラムがポート 80 を使っているかは、Windows の コマンド プロンプト で調べられます。
-
Windows キーを押しながら R キーを押します。「ファイル名を指定して実行」の画面が開くので、
cmdと入力して Enter キーを押します。黒い画面（コマンド プロンプト）が開きます。 -
次のコマンドを入力して、Enter キーを押します。
コマンド プロンプトnetstat -ano | findstr ":80 " -
次のような行が表示されます。行の右端の数字が、そのポートを使っているプログラムの番号（PID）です。
表示の例TCP 0.0.0.0:80 0.0.0.0:0 LISTENING 4何も表示されなければ、ポート 80 は使われていません。Tomcat が起動していれば、Tomcat の行が表示されます。
-
タスク マネージャー（Ctrl キーと Shift キーを押しながら Esc キー）を開き、「詳細」タブの「PID」の列で、その番号のプログラムの名前を確かめます。番号が
4のときは Windows 自身（System）で、IIS などの Windows の機能が使っています。
IIS やほかのソフトウェアを止めるには、パソコンの管理者の権限が必要です。また、会社のパソコンでは、業務で使っているソフトウェアを止められないことがあります。止めてよいか分からないときは、パソコンの管理者に確かめてください。止められないときは、次の方法で、ポート 8080 のまま教材を進めます。
ポート 8080 のまま進める
-
サーバー・ビューの「Tomcat11_Java25」をダブルクリックし、「概要」を開きます。
-
「ポート」の欄の「HTTP/1.1」の行のポート番号を、
8080に書き換えて Enter キーを押します（第2章「ポートを 80 に変える」と逆の操作です）。 -
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。 -
「Tomcat11_Java25」を右クリックし、「開始」を選んで起動します。コンソールに「プロトコルハンドラー ["http-nio-8080"] を開始しました。」と表示されることを確認します。
-
教材の URL は、
localhostの後ろに:8080を付けて読み替えます。教材に書かれた URL 入力する URL http://localhost/html/http://localhost:8080/html/http://localhost/html/ch03/hello.htmlhttp://localhost:8080/html/ch03/hello.html
HTML の中に書くリンクや画像の相対パス（departments.html、images/logo.png など）は、書き換える必要はありません。相対パスは、今のページの URL をもとに決まるので、:8080 の付いた URL で開いたページからも、正しく見つかります。
【ご注意】Spring入門と同時に動かさない
Spring入門で作るアプリも、ポート 8080 を使います。Tomcat を 8080 で動かしている場合は、Spring入門のアプリを起動する前に、サーバー・ビューで「Tomcat11_Java25」を停止してください。