いよいよ HTML を書きます。Eclipse で HTML のファイルを作り、Tomcat を通して Chrome に表示します。HTML のページに必ず書く「骨組み」と、見出し・段落・改行のタグを学びましょう。
この章で学ぶこと
- Eclipse で章のフォルダーと HTML のファイルを作る方法
- HTML のページの骨組み（
<!DOCTYPE html>・<html>・<head>・<body>など） - 見出しの
<h1>、段落の<p>、改行の<br> - ファイルを直したら、保存して Chrome で再読み込みする流れ
- Chrome の「ページのソースを表示」で、届いた HTML を確かめる方法
3.1 この章で作るもの
この章では、html プロジェクトに ch03 フォルダーを作り、その中に hello.html を作ります。Chrome で http://localhost/html/ch03/hello.html を開くと、次のように表示されるようになります。
図3-1 この章で作るページ（赤枠：タブのタイトルとアドレスバー）
| ファイル | 作業 | 内容 |
|---|---|---|
ch03/hello.html |
新規 | 見出しと段落を表示するページ |
3.2 ch03 フォルダーを作る
第2章で確かめた webapp フォルダーの中に、この章のファイルを入れる ch03 フォルダーを作ります。
-
パッケージ・エクスプローラーで、
html→src→mainの順に開きます。 -
webappフォルダーを右クリックし、新規 → フォルダー を選びます。
図3-2 webapp を右クリック → 新規 → フォルダー（赤枠） -
「新規フォルダー」の画面が表示されます。「親フォルダーを入力または選択」の欄に
html/src/main/webappと入っていることを確認します。下の一覧でも、html→src→mainの中のwebappの場所を確かめます。「フォルダー名」にch03と入力し、「完了」をクリックします。
図3-3 親フォルダー（一覧の webapp）を確認し、フォルダー名に ch03 と入力して「完了」（赤枠） -
webappの中にch03フォルダーができたことを確認します。
【再確認】章のフォルダーは webapp のすぐ下に作る
ch03 フォルダーは、必ず webapp フォルダーを右クリックして作り、webapp のすぐ下に置いてください。WEB-INF や META-INF の中、プロジェクトの直下などに作ると、教材の URL でページを開けません。フォルダー名は、すべて半角の小文字で ch03 と入力します。
3.3 hello.html を作る
HTML のファイルは、Eclipse の「HTML ファイル」の機能で作ります。この機能を使うと、どの HTML のページにも書く骨組み（3.5 で説明します）が、最初から入ったファイルができます。
-
作った
ch03フォルダーを右クリックし、新規 → HTML ファイル を選びます。
図3-4 ch03 を右クリック → 新規 → HTML ファイル（赤枠） -
「新規 HTML ファイル」の画面が表示されます。「親フォルダーを入力または選択」の欄に
html/src/main/webapp/ch03と入っていることを確認します。下の一覧でも、webappの中のch03の場所を確かめます。「ファイル名」にhello.htmlと入力し、「次へ」をクリックします。
図3-5 親フォルダー（一覧の ch03）を確認し、ファイル名に hello.html と入力して「次へ」（赤枠） -
「HTML テンプレートの選択」の画面が表示されます。「HTML テンプレートの使用」にチェックが入っていて、「テンプレート」の一覧で「新規 HTML ファイル (5)」が選ばれていることを確認して、「完了」をクリックします。どちらも最初からその状態になっているので、変える必要はありません。下の「プレビュー」には、作られるファイルの中身が表示されます。
図3-6 「HTML テンプレートの使用」と「新規 HTML ファイル (5)」を確認して「完了」（赤枠）「新規 HTML ファイル (5)」は、今の HTML（HTML Living Standard）で書くためのテンプレートです。名前の「5」は、HTML5 から使われている書き方であることを表しています（第1章「HTML のバージョン」）。
-
エディターに
hello.htmlが開きます。中には、テンプレートの骨組みが入っています。
図3-7 作成した直後の hello.htmlch03/hello.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> </body> </html>エディターの各行の終わりに表示される薄い「↓」などの記号は、改行などの目に見えない文字を表す印です。ファイルに書かれている文字ではないので、入力する必要はありません。
【便利な使い方】エディターの文字の大きさを変える
エディターの文字の大きさは変えられます。エディターの中をクリックしてから、Ctrl キーと Shift キーを押しながら + キー（; と同じキー）を押すと大きく、Ctrl キーを押しながら - キーを押すと小さくなります。文字が小さくて読みにくいときに使ってください。
-
2か所を書き換えます。緑の行が、書き換える行と書き足す行です。
-
<title>と</title>の間の「Insert title here」を、「はじめての HTML」に書き換えます。 -
<body>と</body>の間の空いている行に、<h1>と<p>の2行を書きます。
ch03/hello.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>はじめての HTML</title> </head> <body> <h1>はじめての HTML</h1> <p>HTML で書いたページです。</p> </body> </html><h1>と<p>の行は、行の先頭に半角スペースを2つ入れて、右にずらしています。Tab キーを押して右にずらしてもかまいません（ページの表示は変わりません）。このずらし方（インデント）は第4章で説明します。 -
-
保存します。保存は、ツールバーの保存ボタンをクリックするか、Ctrl + S キーを押して行います（第2章「ポートを 80 に変える」と同じ操作です）。保存したら、タブの名前の先頭の
*が消えたことを確認します。
図3-8 保存前と保存後のタブ（左：保存前は * が付いている、右：保存後は * が消えた）
図3-9 hello.html を書き換えて保存したところ
【便利な使い方】テンプレートは、編集して使うことが多い
「HTML ファイル」で入るひな形（テンプレート）は、Eclipse の設定で中身を確かめたり、変えたりできます。メニューの ウィンドウ → 設定 を開き、Web → HTML ファイル → エディター → テンプレート で「新規 HTML ファイル (5)」を選ぶと、中身が表示されます。
現場では、用意されたテンプレートをそのまま使うことは少なく、チームやプロジェクトの決まりに合わせて編集し、書き換えて使うことが多いです。詳しい使い方は、「Eclipse HTML テンプレート」などの言葉で検索して、ほかの情報源を活用してください。
図3-10 HTML ファイルのテンプレートの設定（赤枠：テンプレートの画面と、HTML5 用のテンプレート）
【ご注意】タグと記号は半角で入力する
<・>・/・"・= などの記号と、タグの名前（h1・p など）は、すべて 半角 で入力してください。全角の「＜」や「／」で書くと、タグとして読み取られず、そのまま文字として表示されます。全角で入力してよいのは、「はじめての HTML」のような、画面に表示する文章だけです。
【便利な使い方】コードは自分で入力する
本文のコードは、右上の「コピー」ボタンでコピーすることもできますが、慣れるまでは自分で入力してください。入力するうちに、タグの書き方や、開始タグと終了タグの組み合わせが身に付きます。入力したものがうまく表示されないときは、コピーしたコードと見比べると、違うところを見つけやすくなります。
3.4 Chrome で表示する
【再確認】Tomcat を起動しておく
表示を確かめる前に、サーバー・ビューの「Tomcat11_Java25」が「[起動済み, 同期済み]」になっていることを確認してください。「[停止]」になっている場合は、右クリックして「開始」を選び、起動します（第2章「Tomcat を起動する」）。
- Chrome のアドレスバーに
http://localhost/html/ch03/hello.htmlと入力して、Enter キーを押します。 - 見出しの「はじめての HTML」と、段落の「HTML で書いたページです。」が表示されることを確認します（図3-1）。タブには「はじめての HTML」と表示されます。
Eclipse でファイルを保存すると、Tomcat が送るファイルにも自動で反映されます。Tomcat を起動し直す必要はありません。
【ご注意】「HTTPステータス 404 – 見つかりません」と表示されたとき
Tomcat が、URL のファイルを見つけられなかったことを表します。次の3つを確かめてください。
- URL の打ち間違いがないか（
ch03・hello.htmlのつづり） -
ch03フォルダーがwebappのすぐ下にあり、hello.htmlがその中にあるか -
hello.htmlのタブに*が付いたままになっていないか
3.5 解説：HTML の骨組み
hello.html には、自分で書いた見出しと段落のほかに、テンプレートが入れたタグがあります。これらは、どの HTML のページにも必ず書く 骨組み です。Eclipse が書いてくれる部分ですが、それぞれの意味を理解しておきましょう。骨組みは、次の図のような入れ子の形になっています。
図3-11 HTML の骨組み
| 書いたもの | 意味 |
|---|---|
<!DOCTYPE html> |
この文書が HTML であることを示す。必ず1行目に書く。タグではなく、宣言と呼ばれる特別な書き方。バージョンの番号が無いのは、今の HTML が HTML Living Standard の1つだけだから（第1章「HTML のバージョン」） |
<html> |
HTML の文書全体を囲む。<!DOCTYPE html> 以外は、すべてこの中に書く |
<head> |
ページについての情報（文字コード、タイトルなど）を書く場所。ここに書いたものは、ページの中には表示されない |
<meta charset="UTF-8"> |
このファイルの文字コードが UTF-8 であることを、ブラウザに伝える。終了タグは書かない |
<title> |
ページのタイトル。Chrome のタブや、ブックマークの名前に使われる |
<body> |
ページに表示する内容を書く場所 |
<h1> |
見出し。大きく太い文字で表示される |
<p> |
段落。ひとまとまりの文章を囲む。段落と段落の間には、少し間が空く |
【知識メモ】文字コードと UTF-8
コンピューターは、文字を番号に置き換えて保存しています。どの文字を何番にするかの決まりを 文字コード といい、今は UTF-8 が広く使われています。Eclipse は、ファイルを UTF-8 で保存します（Eclipse の画面の右下にも「UTF-8」と表示されています）。<meta charset="UTF-8"> を書いておくと、ブラウザが同じ決まりで文字を読み取るので、日本語が正しく表示されます。
3.6 改行と br タグ
hello.html に、文章を書き足してみましょう。
ソースで改行してみる
-
hello.htmlの</body>の上に、緑の4行を書き足します。「おはようございます。」の後で、Enter キーで改行します。ch03/hello.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>はじめての HTML</title> </head> <body> <h1>はじめての HTML</h1> <p>HTML で書いたページです。</p> <p> おはようございます。 今日も HTML を学びましょう。 </p> </body> </html>書き足すのは、
<p>・「おはようございます。」・「今日も HTML を学びましょう。」・</p>の4行です。 -
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。 -
Chrome の 再読み込みボタン をクリックします。
図3-12 Chrome の再読み込みボタン（赤枠）
Chrome には、次のように表示されます。
図3-13 ソースの改行は、空白1つになって表示される
ソースでは2行に分けて書いたのに、画面では1行に並び、間に空白が1つ入りました。HTML では、ソースの中の 改行や、続けて入力した空白は、まとめて空白1つ として表示されます。行の先頭のインデントの空白も同じです。
【便利な使い方】再読み込みは F5 キーでもできる
Chrome の再読み込みは、F5 キーでもできます。HTML を直すたびに使うので、覚えておくと便利です。
br タグで改行する
画面で改行したい場所には、<br> タグを書きます。
-
「おはようございます。」の後ろに、
<br>を書き足します。ch03/hello.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>はじめての HTML</title> </head> <body> <h1>はじめての HTML</h1> <p>HTML で書いたページです。</p> <p> おはようございます。<br> 今日も HTML を学びましょう。 </p> </body> </html> -
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。 -
Chrome の再読み込みボタン（または F5 キー）で再読み込みします。
図3-14 br タグの位置で改行される
<br> を書いた位置で改行されました。<br> は、終了タグを書かないタグです。終了タグを書かないタグについては、第4章で学びます。
【知識メモ】p タグと br タグの使い分け
<p> は、文章のひとまとまり（段落）を表します。段落と段落の間には、少し間が空きます。<br> は、1つの段落の中で行を変えたいときに使います。話題が変わるときは <p> で段落を分け、同じ段落の中で行だけを変えたいときは <br> を使います。
【ご注意】br タグは位置の調整に使わない
<br> は、文章の中で改行を入れたいときに使うタグです。見た目の位置を調整するためのものではありません。
メモ帳などのエディターや Word では、文字の位置を下にずらすために、改行を続けて入力することがあります。HTML では、<br><br><br> のように <br> を続けて書いて、間を空けることはしません。間隔や位置などの見た目は、CSS で整えます（第7章で学びます）。
3.7 ページのソースを表示する
Chrome は、Tomcat からレスポンスとして届いた HTML を読み取って、ページを表示しています（第1章「Web ページが表示されるまで」）。届いた HTML そのものは、「ページのソースを表示」で見ることができます。
-
Chrome で
hello.htmlを表示した状態で、ページの何もないところを右クリックし、「ページのソースを表示」を選びます。
図3-15 右クリック → ページのソースを表示（赤枠） -
新しいタブが開き、Tomcat から届いた HTML が表示されます。
図3-16 ページのソース（赤枠：新しく開いたタブと、view-source: で始まるアドレス）
Eclipse で書いた hello.html と同じ内容が表示されています。Tomcat は、hello.html の中身をそのままレスポンスとして返していることが分かります。
表示がおかしいときは、ページのソースで、Chrome に届いた HTML が自分の書いたとおりになっているかを確かめられます。保存を忘れていると、ここに古い内容が表示されます。
【便利な使い方】ページのソースは Ctrl + U キーでも開ける
「ページのソースを表示」は、Ctrl + U キーでも開けます。見終わったら、ソースのタブは閉じてかまいません。
コラム：デベロッパーツール
Chrome には、Web ページを作る人のための デベロッパーツール という機能があります。この教材では詳しく使いませんが、HTML の学習でも役に立つので、開き方と、いちばんよく使う「要素」タブだけを紹介します。
-
Chrome で
hello.htmlを表示した状態で、右上の「⋮」（Google Chrome の設定）をクリックし、その他のツール → デベロッパー ツール を選びます。F12 キー、または Ctrl + Shift + I キーでも開けます。ページを右クリックして、メニューの一番下の「検証」を選んでも開けます（図3-15 のメニューにもあります）。
図3-17 ⋮ → その他のツール → デベロッパー ツール（赤枠） -
ページの横（または下）に、デベロッパーツールが開きます。「要素」タブには、ページの HTML が、入れ子の形のまま表示されます。行の左の「▶」をクリックすると、中の要素を開けます。
図3-18 デベロッパーツールの「要素」タブ（赤枠：要素タブと、選んだ h1 の行） -
「要素」タブの行にマウスを合わせると、その要素がページのどこに表示されているかが、色付きで示されます。
<h1>や<p>の行にマウスを合わせて、確かめてみましょう。
図3-19 h1 の行にマウスを合わせると、ページの見出しが色付きで示される（赤枠） -
閉じるときは、デベロッパーツールの右上の「×」をクリックするか、もう一度 F12 キーを押します。
「ページのソースを表示」は、Tomcat から届いた HTML を、届いたとおりに表示します。デベロッパーツールの「要素」タブは、Chrome が HTML を読み取って組み立てたページの構造を表示します。どのタグがページのどこに表示されているかを確かめたいときは、「要素」タブが便利です。
【ご注意】ほかのブラウザでは画面や機能が違う
Microsoft Edge などのほかのブラウザにも、同じような開発者向けの機能があります。ただし、メニューの場所や名前、画面の見た目、使える機能は、ブラウザによって違います。この教材では、Chrome の画面と操作で説明します。教材のとおりに操作するときは、必ず Chrome を使ってください。
3.8 うまくいかないときは
| 症状 | 考えられる原因と対処 |
|---|---|
| 「HTTPステータス 404 – 見つかりません」と表示される | URL の打ち間違い、フォルダーやファイルの名前・場所の間違い、保存し忘れが考えられます。3.4 の囲みの3つを確かめてください（付録A「ページが表示されない」）。 |
| 「このサイトにアクセスできません」と表示される | Tomcat が起動していません。サーバー・ビューで「Tomcat11_Java25」を起動してください（第2章）。詳しくは付録A「ページが表示されない」を見てください。 |
| 直したのに、表示が変わらない | 保存していないか、Chrome で再読み込みしていません。タブの * が消えていることを確かめてから、再読み込みしてください（付録A「まず確かめること」）。 |
| Chrome のタブに「Insert title here」と表示される |
<title> の「Insert title here」を書き換えていません。ページのタイトルに書き換えて保存してください。 |
| タグがそのまま文字として表示される | 記号やタグの名前が全角になっています。半角で入力し直してください。 |
| 日本語が読めない文字（文字化け）になる |
<meta charset="UTF-8"> が無いか、つづりが間違っています。コードと見比べてください（付録A「文字化けする」）。 |
| 右クリックの「新規」のメニューに「HTML ファイル」が無い | 「新規」→「その他」から作れます（付録A「新規のメニューに「HTML ファイル」が無い」）。 |
3.9 まとめと確認問題
まとめ
- 章のフォルダーは、
webappを右クリック → 新規 → フォルダー で、webappのすぐ下に作る。HTML のファイルは、章のフォルダーを右クリック → 新規 → HTML ファイル で、テンプレート「新規 HTML ファイル (5)」を使って作る。テンプレートの「Insert title here」は、ページのタイトルに書き換える - HTML のページには、
<!DOCTYPE html>・<html>・<head>・<meta charset="UTF-8">・<title>・<body>の骨組みを書く。テンプレートが入れてくれるが、それぞれの意味を理解しておく -
<head>にはページについての情報を、<body>にはページに表示する内容を書く - 見出しは
<h1>、段落は<p>、段落の中の改行は<br>で書く。ソースの改行や続けた空白は、空白1つとして表示される -
<br>は文章の中で改行を入れるためのタグで、位置の調整には使わない。間隔や位置などの見た目は CSS で整える - ファイルを直したら、保存してタブの
*が消えたことを確認し、Chrome で再読み込みする - 「ページのソースを表示」（Ctrl + U）で、Chrome に届いた HTML を確かめられる
この章で使ったタグは、付録B「タグの早見表」にまとめています。
確認問題
問1 hello.html を webapp の中の ch03 フォルダーに作りました。Chrome で開く URL を答えてください。
解答を見る
http://localhost/html/ch03/hello.html です。
問2 <head> と <body> には、それぞれ何を書きますか。
解答を見る
<head> には、文字コードやタイトルなど、ページについての情報を書きます。<body> には、見出しや段落など、ページに表示する内容を書きます。
問3 <title> に書いた文字は、Chrome のどこに表示されますか。
解答を見る
Chrome の タブ に表示されます。ページの中には表示されません。
問4 次の HTML は、Chrome でどのように表示されますか。<p>春です。（改行） 夏です。</p>（「（改行）」は、ソースで Enter キーを押して改行したことを表します）
解答を見る
「春です。 夏です。」のように、間に空白が1つ入って1行で表示されます。ソースの改行は、空白1つとして表示されるためです。2行に分けたいときは、「春です。」の後ろに <br> を書きます。
問5 hello.html を直したのに、Chrome で再読み込みしても表示が変わりません。何を確かめればよいですか。
解答を見る
エディターのタブに * が付いたままになっていないか（保存したか）を確かめます。* が付いていたら保存し、もう一度再読み込みします。「ページのソースを表示」で、Chrome に届いた HTML が直した内容になっているかを確かめることもできます。
問6 「新規 HTML ファイル (5)」のテンプレートで作ったファイルで、必ず書き換える部分はどこですか。
解答を見る
<title> の「Insert title here」です。ページのタイトルに書き換えます。書き換えないと、Chrome のタブに「Insert title here」と表示されます。