サーブレット&JSPの基本｜Webページの表示とトラブル解決

表示できない理由を一つずつ確かめれば、HTMLのトラブルは自分で解決できる。

HTMLファイルを作成して保存したら、次はブラウザで開いて、意図したとおりにWebページが表示されるかを確認します。

テキストエディタに書かれたHTMLは、ブラウザで読み込むことで初めてWebページとして表示されます。見出し、文章、表、リンク、画像などが正しい位置に表示されると、自分で書いたHTMLが画面になったことを実感できるでしょう。

ただし、最初からすべてが正しく表示されるとは限りません。

ブラウザを開いても何も表示されなかったり、日本語が読めない文字に変わったり、リンクをクリックしても移動できなかったりすることがあります。画像だけが表示されない場合もあります。

こうしたトラブルが起きると、HTML全体を最初から書き直したくなるかもしれません。しかし、多くの場合、原因は終了タグの書き忘れ、ファイル名の違い、文字コードの不一致など、比較的小さなものです。

大切なのは、慌てずに確認する場所を絞り込むことです。ここでは、HTMLファイルをブラウザで表示する方法から、空白ページ、文字化け、リンク切れ、画像の表示失敗まで、よくあるトラブルの原因と直し方を順番に見ていきます。

素材のダウンロード

以下のリンクから使用する素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。

webpage-display-troubleshooting ダウンロード

HTMLファイルをブラウザで表示する

作成したHTMLファイルは、ブラウザに読み込ませることでWebページとして表示できます。

学習用としてパソコン内に保存したHTMLファイルを開く場合は、Webサーバを準備しなくてもかまいません。ブラウザには、パソコン内のHTMLファイルを直接読み込む機能があるためです。

代表的な開き方には、次の3つがあります。

HTMLファイルをダブルクリックする

最も手軽なのは、エクスプローラーやFinderでHTMLファイルを探し、ダブルクリックする方法です。

.htmlファイルにブラウザが関連付けられていれば、通常は既定のブラウザが起動し、Webページが表示されます。

ダブルクリックしてもテキストエディタが開く場合は、HTMLファイルがエディタに関連付けられている可能性があります。その場合は、ファイルを右クリックして、ブラウザを指定して開きます。

ブラウザからHTMLファイルを選ぶ

先にブラウザを起動し、ファイルを開く機能からHTMLファイルを選択する方法もあります。

この方法は、保存場所を確認しながらファイルを指定したいときに便利です。

複数のHTMLファイルがある場合は、表示したいファイル名をよく確認してから開きましょう。修正したファイルとは別のコピーを開いていると、変更が反映されていないように見えることがあります。

HTMLファイルをブラウザへドラッグする

エクスプローラーやFinderからHTMLファイルをドラッグし、ブラウザのウィンドウ内へ移動する方法もあります。

ブラウザが対応していれば、ドロップしたHTMLファイルがそのまま読み込まれます。

操作に慣れるまでは、ダブルクリックする方法が分かりやすいでしょう。どの方法を使っても、同じHTMLファイルを開けば、基本的には同じWebページが表示されます。

図1：HTMLファイルをブラウザで開く3つの方法

この図から分かること

パソコン内に保存したHTMLファイルは、いくつかの方法でブラウザに読み込ませることができます。

ダブルクリック、ブラウザのファイル選択、ドラッグ＆ドロップは操作方法が異なりますが、いずれもブラウザにHTMLファイルを読み込ませるためのものです。

Webページが表示されたら、画面を眺めるだけではなく、見出し、文章、表、リンク、画像などが意図したとおりになっているかを確認します。

表示後に確認するポイント

Webページが開いたからといって、HTMLがすべて正しいとは限りません。

ブラウザには、多少の記述ミスを補いながらHTMLを表示する機能があります。そのため、終了タグが抜けていても、見た目だけは正しく表示される場合があります。

ページを開いたら、次の項目を確認しましょう。

確認する項目	確認内容
ページタイトル	ブラウザのタブに適切な名前が表示されているか
見出し	h1要素などが意図した順序で表示されているか
文章	文字が欠けたり、文字化けしたりしていないか
改行	br要素やp要素による区切りが反映されているか
表	行と列が正しい位置に表示されているか
リンク	クリックして正しいページへ移動できるか
画像	画像が表示され、代替テキストが適切か
保存内容	最後に修正した内容が反映されているか

特に、一覧ページとプロフィールページのように複数のHTMLファイルをリンクでつないでいる場合は、片方だけでなく両方のページを確認します。

一覧からプロフィールへ移動し、プロフィールから一覧へ戻るところまで試してみましょう。

修正した内容が表示されない場合

HTMLを修正してブラウザへ戻ったものの、画面が変わっていないことがあります。

この場合、まず確認したいのは保存と再読み込みです。

HTMLファイルを保存したか確認する

テキストエディタで内容を変更しても、ファイルを保存しなければブラウザには反映されません。

エディタのタブやファイル名の横に、未保存を示す印が表示されていないか確認します。修正後はファイルを保存してから、ブラウザを再読み込みします。

ブラウザを再読み込みする

HTMLファイルを保存しただけでは、すでに開いているブラウザ画面が自動的に更新されないことがあります。

ブラウザの再読み込みボタンを押し、保存後のHTMLを読み込み直します。

別のファイルを開いていないか確認する

同じ名前のHTMLファイルを複数のフォルダへ保存していると、修正したファイルとは別のファイルをブラウザで開いている場合があります。

ブラウザのアドレス欄やファイルの保存場所を確認し、編集しているファイルと表示しているファイルが同じかを確かめます。

空白のWebページが表示される原因

ブラウザを開いても本文が表示されず、真っ白な画面になることがあります。

空白ページが表示された場合は、まずHTMLの基本構造とタグの対応を確認します。

ただし、空白だからといって、必ずHTMLファイル全体が読み込まれていないわけではありません。ブラウザのタブにページタイトルが表示されているなら、HTMLファイル自体は読み込まれている可能性があります。

本文だけが表示されないときは、body要素より前の記述に問題がないかを確認しましょう。

終了タグの書き間違いで本文が消えることがある

次のHTMLには、Webページが正しく表示されない原因となる記述ミスが含まれています。

ファイル名： riku-profile.html

中村陸さんのプロフィールページの誤った例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Web制作スタッフの紹介<title>
</head>

<h1>中村 陸のプロフィール</h1>

<p>
  入社2年目のWebエンジニアです。<br>
  Javaを使ったサーバ側の処理を勉強しています。
</p>

<a href="staff-list.html">一覧へ戻る</a>
</body>
</html>

このHTMLには、主に2つの問題があります。

1つ目は、title要素の終了タグが正しく書かれていないことです。

終了タグに必要なスラッシュがないため、ブラウザは2つ目のtitleタグを終了タグとして認識できません。

正しい終了タグは、次の形です。

</title>

title要素が閉じられていないと、それより後ろの記述までタイトルの一部として解釈されることがあります。その結果、h1要素やp要素が本文として表示されず、ページが空白になったように見えることがあります。

2つ目は、body要素の開始タグがないことです。

終了タグである</body>はありますが、対応する開始タグの<body>がありません。ブラウザが不足したbody要素を補って表示する場合もありますが、正しいHTML文書としては開始タグを記述する必要があります。

ブラウザは記述ミスをある程度補正してくれますが、どのように補正されるかだけに頼るべきではありません。開始タグと終了タグを正しく対応させることが大切です。

HTMLで起こりやすい記述ミス

HTMLを学び始めたときには、似たような入力ミスがよく起こります。

ミスの種類	誤った記述	確認するポイント
終了タグのスラッシュ忘れ	<title>ページ名<title>	終了タグが</title>になっているか
タグ名のつづり間違い	<title>ページ名</titl>	開始タグと終了タグの名前が一致しているか
開始タグの書き忘れ	</body>だけがある	対応する<body>があるか
終了タグの書き忘れ	<p>文章	必要な終了タグがあるか
全角の空白	属性同士を全角空白で区切る	属性間が半角スペースになっているか
全角の引用符	style=”text-align:center”	属性値を半角の"で囲んでいるか
全角の山かっこ	＜p＞文章＜/p＞	タグの記号が半角の<と>か
属性名の間違い	hreff="page.html"	属性名のつづりが正しいか
ファイル名の不一致	Staff.htmlとstaff.html	大文字と小文字を含めて一致しているか

全角と半角は、見た目が似ていてもコンピュータ上では異なる文字です。

特に、引用符、空白、山かっこは、日本語入力が有効な状態で入力すると全角になることがあります。タグや属性を入力するときは、半角入力になっているか確認しましょう。

タグの対応は内側から確認する

HTMLでは、要素を別の要素の中へ入れることがあります。このような構造を入れ子と呼びます。

入れ子になっているタグは、後から開始したものを先に閉じます。

たとえば、a要素をp要素の中に配置した場合は、a要素を先に閉じ、その後でp要素を閉じます。

タグの対応が分からなくなったときは、次の順序で確認すると見つけやすくなります。

開始タグを見つける
同じ名前の終了タグを探す
内側の要素が先に閉じられているか確認する
インデントが階層に合っているか確認する

テキストエディタによっては、開始タグを選択すると対応する終了タグを強調表示してくれます。入力補完や色分けの機能を利用すると、タグの閉じ忘れを見つけやすくなります。

図2：空白ページの原因を順番に切り分ける

この図から分かること

Webページが空白になったときは、HTML全体を最初から書き直すのではなく、原因になりやすい場所を順番に確認します。

最初にファイルの保存と表示中のファイルを確認し、その後でhead要素からbody要素までの基本構造を調べます。

特にtitle要素が正しく閉じられていないと、その後ろの内容が本文として扱われず、ページが空白に見えることがあります。タグ名、スラッシュ、開始タグと終了タグの対応を落ち着いて確認することが解決への近道です。

ブラウザの開発者ツールも利用できる

ブラウザには、Webページの構造やエラーを調べるための開発者ツールがあります。

HTMLを学び始めた段階では、すべての機能を使いこなす必要はありません。ただし、次のような情報を確認できることを知っておくと便利です。

ブラウザが解釈したHTML要素
適用されているCSS
読み込めなかった画像やファイル
JavaScriptで発生したエラー
通信したファイルの状態

開発者ツールの要素確認画面では、ブラウザがHTMLの誤りをどのように補正したかを確認できます。

ただし、開発者ツールに表示されるHTMLは、入力したHTMLファイルの内容と完全に同じとは限りません。ブラウザが不足している要素を補ったり、構造を組み替えたりするためです。

入力した内容そのものを確認したいときは、テキストエディタのHTMLファイルを見直します。

リンク先のページが表示されない場合

リンクをクリックしたときに、ファイルが見つからないという画面が表示されることがあります。

この場合は、a要素のhref属性と、実際のファイル名を確認します。

たとえば、href属性にstaff-list.htmlと書いた場合は、リンク元のHTMLファイルから見て、指定した場所にstaff-list.htmlが存在する必要があります。

同じフォルダにある場合

リンク元とリンク先が同じフォルダにあれば、href属性にはファイル名だけを指定できます。

確認する点は次のとおりです。

ファイル名のつづりが一致している
拡張子が.htmlになっている
大文字と小文字が一致している
ファイルが同じフォルダにある
ファイル名の前後に不要な空白がない

別のフォルダにある場合

リンク先を別のフォルダへ保存している場合は、フォルダの位置も含めて指定します。

この指定を相対パスと呼びます。

リンクの学習を始めたばかりの段階では、関連するHTMLファイルを同じフォルダへ保存すると、ファイルの位置関係が分かりやすくなります。

画像が表示されない場合

img要素を使ったページでは、画像部分だけが表示されないことがあります。

この場合は、src属性に指定した画像ファイルを確認します。

確認する項目	よくある原因
ファイル名	画像名のつづりが違う
拡張子	.jpgと.pngを間違えている
大文字と小文字	Photo.jpgとphoto.jpgが一致していない
保存場所	HTMLと画像が別のフォルダにある
src属性	フォルダ名やファイル名の指定が誤っている
画像ファイル	移動、削除、名前変更が行われている

画像が表示されないときに、代わりにalt属性の文字が表示されることがあります。これは、ブラウザが画像を読み込めなかった場合に、代替テキストを表示しているためです。

alt属性はトラブル確認のためだけでなく、画像を見ることが難しい利用者に内容を伝えるためにも重要です。

文字化けが発生する理由

Webページに日本語が表示されても、意味の分からない文字列になることがあります。これが文字化けです。

文字化けは、主にHTMLファイルを保存した文字コードと、ブラウザが読み取りに使った文字コードが一致していない場合に発生します。

文字コードは、文字をコンピュータで扱うための規則です。同じ日本語でも、UTF-8やShift_JISなど、使用する文字コードによってデータの並び方が異なります。

たとえば、HTMLファイルをUTF-8で保存したのに、ブラウザが別の文字コードとして読み込むと、本来の日本語へ戻せなくなります。その結果、読めない文字列が表示されます。

meta要素で文字コードを伝える

HTMLでは、head要素内のmeta要素を使って、ブラウザへ文字コードを伝えます。

UTF-8を使用する場合は、charset属性の値にUTF-8を指定します。

このmeta要素は、head要素の先頭に近い位置へ記述すると分かりやすくなります。

ただし、meta要素を書くだけでは十分ではありません。

次の2つが一致している必要があります。

設定する場所	指定内容
HTMLファイルを保存するときの文字コード	UTF-8
meta要素のcharset属性	UTF-8

HTML内でUTF-8を指定していても、ファイル自体をShift_JISなどで保存していれば、文字化けが起こる可能性があります。

反対に、ファイルをUTF-8で保存していても、meta要素が別の文字コードを示していれば、ブラウザが誤って解釈する可能性があります。

文字化けを直す手順

文字化けが発生した場合は、次の順番で確認します。

head要素内にmeta要素があるか確認する
charset属性がUTF-8になっているか確認する
テキストエディタで現在の文字コードを確認する
UTF-8を指定してファイルを保存し直す
ブラウザでページを再読み込みする

保存し直した後も文字化けが残る場合は、別のファイルを開いていないか確認します。

また、HTMLファイルの一部を別のファイルからコピーした場合でも、通常は保存時の文字コードが統一されていれば問題ありません。大切なのは、最終的にHTMLファイル全体をどの文字コードで保存したかです。

図3：文字コードの一致と文字化けのしくみ

この図から分かること

日本語が正しく表示されるためには、HTMLファイルを保存した文字コードと、ブラウザへ伝える文字コードが一致している必要があります。

meta要素でUTF-8を指定していても、実際のファイルを別の文字コードで保存していると文字化けする可能性があります。

文字化けが発生したら、HTMLの記述だけを見るのではなく、テキストエディタの保存設定も確認します。UTF-8へそろえて保存し直した後、ブラウザを再読み込みすることが大切です。

画像と表を含むプロフィールページを正しく作成する

空白表示や文字化けの原因を確認したら、画像と表を使ったプロフィールページを作ってみましょう。

ここでは、古いHTMLの見た目指定に頼らず、CSSを使って表の枠線や余白を設定します。

HTMLファイルと画像ファイルは、次のように同じフォルダへ保存します。

haruka-profile.html
haruka-profile.jpg
staff-list.html

小林美空さんのプロフィールページの例

ファイル名： haruka-profile.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web制作スタッフの紹介</title>

  <style>
    .profile-table {
      width: 520px;
      border-collapse: collapse;
    }

    .profile-table th,
    .profile-table td {
      border: 1px solid #555;
      padding: 12px;
      vertical-align: top;
    }

    .profile-table th {
      background-color: #eeeeee;
    }

    .profile-image {
      width: 120px;
      height: auto;
    }
  </style>
</head>
<body>
  <h1>佐藤 遥のプロフィール</h1>

  <table class="profile-table">
    <tr>
      <th scope="col">写真</th>
      <th scope="col">プロフィール</th>
    </tr>
    <tr>
      <td>
        <img
          class="profile-image"
          src="haruka-profile.jpg"
          alt="佐藤 遥のプロフィール写真">
      </td>
      <td>
        <p>
          入社1年目のWebエンジニアです。大学ではJavaの基礎を学びました。
          現在は、サーブレットとJSPを使った社内システムの開発研修に参加しています。
        </p>
        <p>
          分からないことを記録し、リファレンスで確認しながら学習を進めています。
        </p>
      </td>
    </tr>
  </table>

  <p>
    <a href="staff-list.html">一覧へ戻る</a>
  </p>
</body>
</html>

ブラウザの表示例

ファイル名：staff-list.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web制作チームの紹介</title>

  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.6;
      margin: 40px;
      color: #222;
      background-color: #f7f8fa;
    }

    main {
      max-width: 760px;
      margin: 0 auto;
      padding: 32px;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    h1 {
      margin-top: 0;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 24px;
    }

    th,
    td {
      border: 1px solid #999;
      padding: 12px 16px;
      text-align: left;
    }

    th {
      background-color: #e9eef5;
    }

    tr:nth-child(even) td {
      background-color: #f9fafb;
    }

    a {
      color: #1a5fb4;
    }

    a:hover {
      text-decoration: none;
    }
  </style>
</head>
<body>
  <main>
    <h1>Web制作チーム一覧</h1>

    <table>
      <tr>
        <th>名前</th>
        <th>担当</th>
      </tr>
      <tr>
        <td><a href="haruka-profile.html">佐藤 遥</a></td>
        <td>フロントエンド</td>
      </tr>
      <tr>
        <td>高橋 蓮</td>
        <td>バックエンド</td>
      </tr>
      <tr>
        <td>山本 葵</td>
        <td>デザイン</td>
      </tr>
    </table>
  </main>
</body>
</html>

ブラウザの表示例

このHTMLでは、meta要素で文字コードをUTF-8に指定しています。ファイル自体もUTF-8で保存する必要があります。

img要素のsrc属性には、画像ファイル名であるharuka-profile.jpgを指定しています。HTMLファイルと画像が同じフォルダにあるため、ファイル名だけで指定できます。

alt属性には、画像の内容を表す小林美空のプロフィール写真という説明を指定しています。

img要素の役割

img要素は、Webページに画像を表示するための空要素です。

主に次の属性を使用します。

属性	役割
src	表示する画像ファイルの場所を指定する
alt	画像の代わりとなる説明文を指定する
width	画像の表示幅を指定する
height	画像の表示高さを指定する
class	CSSを適用するための名前を指定する

画像の大きさはwidth属性やheight属性でも指定できますが、複数の画像の見た目を統一したい場合はCSSを利用すると管理しやすくなります。

縦横比を崩さずに画像を表示したい場合は、幅を指定し、高さを自動調整する方法があります。

hr要素を使わず余白で区切る方法もある

HTMLには、話題の区切りを表すhr要素があります。

ただし、単に見た目として線を引きたい場合は、CSSで枠線や余白を設定する方法もあります。

HTMLは内容の構造や意味を表し、CSSは色、余白、枠線、配置などの見た目を担当する、という役割分担を意識することが大切です。

CSSとstyle属性

CSSは、HTML要素の見た目を指定するための言語です。

次のような表示を調整できます。

文字の色
背景色
文字の大きさ
枠線
要素の幅と高さ
内側と外側の余白
文字の揃え方
要素の配置

CSSをHTMLへ適用する方法には、主に次の3つがあります。

方法	記述する場所	特徴
インラインCSS	要素のstyle属性	1つの要素だけを指定しやすい
内部CSS	head要素内のstyle要素	1つのHTMLファイル内で共有できる
外部CSS	別の.cssファイル	複数のページで共有しやすい

style属性を使用する場合は、開始タグの中にCSSの指定を書きます。

たとえば、段落の文字を中央にそろえる場合は、p要素のstyle属性に text-align: center; を指定します。

ただし、要素ごとにstyle属性を大量に記述すると、HTMLが読みにくくなります。ページ全体で同じ見た目を使う場合は、style要素や外部CSSファイルを利用するほうが管理しやすくなります。

見た目の指定はCSSを使う

以前のHTMLでは、align属性、bgcolor属性、table要素のborder属性などを使って、配置、背景色、枠線を指定する書き方が広く使われていました。

現在のHTMLでは、内容の構造はHTML、見た目はCSSで指定する方法が基本です。

実現したいこと	CSSで使う主な指定
文字を中央にそろえる	text-align
背景色を付ける	background-color
枠線を付ける	border
横幅を指定する	width
内側の余白を付ける	padding
上端へそろえる	vertical-align

古い属性を使ったHTMLがブラウザに表示されることはありますが、新しくページを作成する場合はCSSを利用しましょう。

今回のプロフィールページでは、head要素内のstyle要素を使い、表の枠線、セルの余白、背景色、画像の幅を指定しています。

HTMLリファレンスを活用する

HTMLには、今回使用したタグ以外にも多くの要素や属性があります。

すべてを暗記する必要はありません。必要な機能が出てきたときに、HTMLリファレンスで調べながら使うことが大切です。

HTMLリファレンスを確認するときは、次の点を見るとよいでしょう。

要素が何を表すものか
どの要素の中で使用できるか
開始タグと終了タグが必要か
使用できる属性は何か
現在のHTMLで推奨されている書き方か
アクセシビリティ上の注意点はあるか
簡単な使用例が掲載されているか

検索すると、古いHTMLの書き方を説明したページが見つかることもあります。情報を確認するときは、現在のHTMLに対応した資料かどうかも確かめましょう。

トラブルを解決するときの確認順序

Webページが正しく表示されないときは、思いついた場所を無作為に修正するよりも、確認する順番を決めると効率的です。

次の順番で切り分けると、原因を見つけやすくなります。

ファイルを保存したか確認する
正しいHTMLファイルを開いているか確認する
ブラウザを再読み込みする
DOCTYPE宣言とhtml、head、body要素を確認する
開始タグと終了タグの対応を確認する
タグ名と属性名のつづりを確認する
記号や空白が半角になっているか確認する
meta要素と保存時の文字コードを確認する
リンク先や画像のファイル名を確認する
ブラウザの開発者ツールで状態を確認する

トラブルが複数同時に起きている場合もあります。

たとえば、文字コードを直した後に画像だけが表示されない場合は、文字コードとは別にsrc属性や画像の保存場所を調べます。一度に多くの場所を書き換えず、1つ修正するたびにブラウザで結果を確認すると、どの修正が効果を持ったのか分かりやすくなります。

Web開発では、記述ミスや表示の違いに出会うことは珍しくありません。大切なのは、失敗しないことではなく、表示結果から原因を予想し、確認と修正を繰り返せるようになることです。HTMLの基本構造、文字コード、ファイルの位置関係を落ち着いて確認する習慣は、これからサーブレットやJSPを使ったWebアプリケーションを開発するときにも役立ちます。