第3章では、見出しと段落を書きました。この章では、タグを正しく組み合わせるための決まり（入れ子・終了タグを書かないタグ・属性）と、読みやすく書くためのインデントを学びます。また、ページの部分をまとめる <div> と <span>、要素に名前を付ける class 属性を使ってみます。
この章で学ぶこと
- タグの中にタグを入れる「入れ子」の正しい書き方
- 終了タグを書かないタグ（
<br>・<meta>など） - 属性の書き方の決まり
- インデントの付け方と、Eclipse のフォーマットの機能
-
<div>と<span>の違い - 要素に名前を付ける
class属性
4.1 この章で作るもの
この章では、ch04 フォルダーを作り、その中に練習用のページ tags.html を作ります。章の最後には、Chrome で http://localhost/html/ch04/tags.html を開くと、次のように表示されるようになります。
図4-1 この章で作るページ
| ファイル | 作業 | 内容 |
|---|---|---|
ch04/tags.html |
新規 | タグと属性の決まりを確かめる練習用のページ |
4.2 tags.html を作る
第3章と同じ手順で、ch04 フォルダーと tags.html を作ります。
-
webappフォルダーを右クリックし、新規 → フォルダー を選びます。「フォルダー名」にch04と入力し、「完了」をクリックします（第3章「ch03 フォルダーを作る」）。 -
作った
ch04フォルダーを右クリックし、新規 → HTML ファイル を選びます。「ファイル名」にtags.htmlと入力して「次へ」をクリックし、テンプレート「新規 HTML ファイル (5)」が選ばれていることを確認して「完了」をクリックします（第3章「hello.html を作る」）。 -
<title>の「Insert title here」を書き換え、<body>の中に見出しと段落を書きます。緑の行が、書き換える行と書き足す行です。ch04/tags.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>タグと属性の練習</title> </head> <body> <h1>タグと属性の練習</h1> <p>社員の雷禅 海皇さんは、営業部に所属しています。</p> </body> </html> -
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。 -
Chrome で
http://localhost/html/ch04/tags.htmlを開き、見出しと段落が表示されることを確認します。
4.3 入れ子
HTML では、タグの中に別のタグを入れて書きます。tags.html では、<html> の中に <head> と <body> があり、<body> の中に <h1> と <p> があります。このように、要素の中に要素を入れることを 入れ子 といいます。
入れ子にするときは、後から開いたタグを、先に閉じます。外側の要素は、内側の要素をすっぽり囲むように書きます。
図4-2 入れ子の正しい書き方と間違った書き方
| 書き方 | |
|---|---|
| 正しい | <p>社員の<span>雷禅 海皇</span>さん</p> |
| 間違い | <p>社員の<span>雷禅 海皇</p></span>さん |
間違った書き方でも、Chrome はタグの意味を推測して、それらしく表示することがあります。しかし、推測のしかたによっては思ったとおりに表示されず、後から CSS で見た目を整えるときにも原因が分かりにくくなります。表示されたかどうかではなく、正しく入れ子になっているかどうかで確かめるようにしましょう。
入れ子の中にある要素から見て、すぐ外側の要素を 親、すぐ内側の要素を 子 と呼ぶことがあります。tags.html では、<body> は <h1> と <p> の親で、<h1> と <p> は <body> の子です。
4.4 終了タグを書かないタグ
ほとんどのタグは、開始タグと終了タグで内容をはさみます。ただし、内容を持たないタグには、終了タグを書きません。第3章で使った <br> と <meta> がこれにあたります。このような要素を 空要素 といいます。
| タグ | 役割 | この教材で使う章 |
|---|---|---|
<br> |
改行を入れる | 第3章 |
<meta> |
ページについての情報（文字コードなど）を書く | 第3章 |
<img> |
画像を表示する | 第5章 |
<link> |
CSS のファイルを読み込む | 第7章 |
<input> |
入力欄やラジオボタンを作る | 第8章・第9章 |
空要素には、</br> のような終了タグを書きません。表に無いタグは、開始タグと終了タグの両方を書くと覚えておけば、この教材では困りません。
【知識メモ】空要素の最後に / を付ける書き方
ほかの教材やサンプルでは、<br /> のように、空要素の最後に / を付けた書き方を見かけることがあります。今の HTML では、/ を付けても付けなくても同じ意味です。この教材では、Eclipse のテンプレートや Spring入門と同じように、/ を付けない書き方にそろえます。
4.5 属性の書き方
属性 は、要素についての追加の情報です（第1章「タグ・要素・属性」）。第3章で使った <meta charset="UTF-8"> では、charset が属性名、UTF-8 が属性の値です。属性には、次の決まりがあります。
| 決まり | 例 |
|---|---|
| 開始タグの中に書く。終了タグには書かない |
<div class="error">…</div>
|
| タグの名前の後に、半角の空白を1つ以上空けて書く |
<div class="error">（div と class の間に空白） |
属性名="値" の形で書き、値は " で囲む |
class="error" |
| 属性を2つ以上書くときは、半角の空白で区切る。順番は自由 |
<img src="images/logo.png" alt="ロゴ">（第5章） |
使える属性はタグごとに決まっています。たとえば、リンクの <a> タグにはリンク先を指定する href 属性があり（第5章）、入力欄の <input> タグには種類を指定する type 属性があります（第8章）。class 属性のように、どのタグにも書ける属性もあります（4.8 で使います）。
【ご注意】属性の値の " を閉じ忘れない
class="error> のように、値の最後の " を書き忘れると、Chrome はその後ろのタグまで値の一部として読んでしまい、ページの一部が表示されなくなります。値を書いたら、" で閉じたことを確かめてください。" は半角で入力します。
4.6 インデント
行の先頭に空白を入れて、行を右にずらすことを インデント といいます。この教材のコードでは、入れ子の内側の行を、外側の行より半角スペース2つ分右にずらしています。
<body>
<h1>タグと属性の練習</h1>
<p>社員の雷禅 海皇さんは、営業部に所属しています。</p>
</body>
<h1> と <p> は <body> の子なので、2つ右にずらしています。この後、入れ子がもう1段深くなる部分は、さらに2つ右にずらします。
インデントの空白は、ページの表示には影響しません（第3章「ソースで改行してみる」）。それでもインデントを付けるのは、どのタグがどのタグの中にあるかが、ひと目で分かるようにするためです。入れ子の閉じ忘れや、閉じる順番の間違いにも気づきやすくなります。
この教材では、Spring入門のコードと同じように、半角スペース2つでインデントします。Tab キーを押してずらしてもかまいません。Eclipse では Tab キーを押すと、空白ではなくタブという文字が入りますが、ページの表示は変わりません。ただし、1つのファイルの中では、どちらかにそろえましょう。
【便利な使い方】フォーマットでインデントを整える
Eclipse には、HTML のインデントや改行を自動で整える フォーマット の機能があります。エディターの中をクリックしてから、Ctrl キーと Shift キーを押しながら F キーを押すと、ファイル全体が整えられます。
図4-3 フォーマットした後のエディター（第3章の hello.html をフォーマットした例）
既定の設定では、タブでインデントし、<head> の中の行も右にずらし、<head> と <body> の前後に空行を入れます。そのため、教材のコードとは見た目が変わりますが、ページの表示は同じです。また、<input> タグ（第8章）があるファイルでは、うまく整わないことがあります。フォーマットした後は、結果を目で確かめてください。
キーの代わりに、メニューの ソース → フォーマット からも実行できます。結果が気に入らないときは、Ctrl + Z キーで元に戻せます。フォーマットを使わなくても、教材は進められます。
フォーマットの結果を、教材のコードに近づける設定もあります。メニューの ウィンドウ → 設定 を開き、Web → HTML ファイル → エディター を選びます。「フォーマット」の「行の幅」を 72 から 200 に変えると、長い行が途中で折り返されなくなります。「インライン要素」の一覧から td・th・input・label・select を選んで「除去」をクリックすると、これらのタグが教材のコードと同じように1行ずつに分かれます（既定では、これらは文章の中に並ぶ要素として扱われ、1行にまとめられます）。最後に「適用して閉じる」をクリックします。この設定をしても、<head> の中の字下げや空行、行頭のタブは変わりません。教材のコードとまったく同じ形にはなりませんが、表示は同じです。
図4-4 フォーマットの設定（赤枠：行の幅、インライン要素と「除去」）
4.7 div と span
<div> と <span> は、それ自体には「見出し」や「段落」のような意味が無いタグです。ページの一部をまとめて囲み、後で CSS の見た目を付けるときなどに使います。2つの違いは、表示のされ方です。
-
tags.htmlの段落を書き換え、その下に緑の行を書き足します。ch04/tags.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>タグと属性の練習</title> </head> <body> <h1>タグと属性の練習</h1> <p>社員の<span>雷禅 海皇</span>さんは、<span>営業部</span>に所属しています。</p> <div>営業部</div> <div>総務部</div> <div>開発部</div> <p> <span>営業部</span> <span>総務部</span> <span>開発部</span> </p> </body> </html>段落の中の「雷禅 海皇」と「営業部」を、
<span>で囲みます。下の<p>の中の3行は、<p>の子なので、さらに2つ右にずらします。 -
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。 -
Chrome の再読み込みボタン（または F5 キー）で再読み込みします。
図4-5 div は1つずつ行を変えて並び、span は文章の中に並ぶ
段落の文章は、<span> を書く前と同じ見た目です。<span> は、文章の流れを変えずに、その一部だけを囲みます。一方、<div> で囲んだ部分は、1つずつ行を変えて縦に並びました。
| タグ | 表示のされ方 | 主な使い方 |
|---|---|---|
<div> |
前後で行が変わり、横幅いっぱいの場所を使う | ページの中の、ひとまとまりの部分を囲む |
<span> |
行は変わらず、文章の流れの中に並ぶ | 文章の中の、一部の文字を囲む |
見出しの <h1> や段落の <p> も、<div> と同じように前後で行が変わります。改行の <br> を書かなくても行が変わるのは、このためです。
【便利な使い方】デベロッパーツールで場所を確かめる
デベロッパーツールの「要素」タブで <div> や <span> の行にマウスを合わせると、その要素が使っている場所が色付きで示されます（第3章「コラム：デベロッパーツール」）。<div> は横幅いっぱい、<span> は文字の部分だけが示されることを確かめてみましょう。
【ご注意】p の中に div を入れない
<p> の中には、<span> は入れられますが、<div> は入れられません。<p> の中に <div> を書くと、Chrome はその手前で段落が終わったものとして扱うため、思ったとおりに表示されません。文章の一部を囲むときは <span> を使います。
4.8 class 属性
class 属性は、要素に名前（クラス名）を付ける属性です。どのタグにも書けます。クラス名は自分で決めてかまいません。ここでは、入力の間違いを知らせるメッセージに見立てた行を作り、error というクラス名を付けます。
-
</body>の上に、緑の1行を書き足します。ch04/tags.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>タグと属性の練習</title> </head> <body> <h1>タグと属性の練習</h1> <p>社員の<span>雷禅 海皇</span>さんは、<span>営業部</span>に所属しています。</p> <div>営業部</div> <div>総務部</div> <div>開発部</div> <p> <span>営業部</span> <span>総務部</span> <span>開発部</span> </p> <div class="error">氏名を入力してください。</div> </body> </html> -
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。 -
Chrome で再読み込みし、一番下に「氏名を入力してください。」と表示されることを確認します（図4-1）。
「氏名を入力してください。」は、ほかの <div> と同じ見た目で表示されます。class 属性は、それだけでは見た目を変えません。名前を付けておくと、CSS で「error という名前の要素の文字を赤くする」のように、その要素だけに見た目を付けられます。CSS は第7章で学びます。
同じクラス名は、いくつの要素に付けてもかまいません。エラーのメッセージが3つあれば、3つとも class="error" にします。そうすると、CSS で1つの指定を書くだけで、3つの見た目がそろいます。
4.9 うまくいかないときは
| 症状 | 考えられる原因と対処 |
|---|---|
| ページの途中から下が表示されない | 属性の値の " を閉じ忘れているか、< や > が足りないタグがあります。表示されなくなった部分の直前のタグを、コードと見比べてください。 |
<div> で囲んだのに行が変わらない、表示が崩れる |
入れ子の閉じる順番が間違っているか、終了タグを書き忘れています。インデントを付けて、開始タグと終了タグの組を確かめてください。 |
class を書いたのに見た目が変わらない |
正しい動きです。class 属性だけでは見た目は変わりません。見た目は第7章の CSS で付けます。 |
| 「HTTPステータス 404 – 見つかりません」と表示される | URL の打ち間違いか、ch04 フォルダーの場所の間違いです。第3章 3.4 の囲みの3つを確かめてください。詳しくは付録A「ページが表示されない」を見てください。 |
ほかのつまずきは、付録A「よくあるつまずきと対処法」も参考にしてください。
4.10 まとめと確認問題
まとめ
- 要素の中に要素を入れることを 入れ子 という。後から開いたタグを先に閉じ、外側の要素が内側の要素をすっぽり囲むように書く
-
<br>・<meta>・<img>・<link>・<input>は終了タグを書かない 空要素。この教材では最後に/を付けない - 属性は開始タグの中に
属性名="値"の形で書く。2つ以上書くときは半角の空白で区切る - インデント は表示には影響しないが、入れ子の形を読みやすくする。この教材では半角スペース2つでずらす。Ctrl + Shift + F のフォーマットでも整えられる
-
<div>は前後で行が変わり、<span>は文章の流れの中に並ぶ -
class属性は要素に名前を付ける。それだけでは見た目は変わらず、CSS と組み合わせて使う
この章で使ったタグと属性は、付録B「タグの早見表」・付録B「属性の早見表」にまとめています。
確認問題
問1 次の HTML の入れ子は正しいですか。正しくない場合は、直してください。<p>部署は<span>営業部</p></span>です。
解答を見る
正しくありません。後から開いた <span> を先に閉じます。<p>部署は<span>営業部</span>です。</p> と書きます。
問2 終了タグを書かないタグを、この章の表から3つ答えてください。
解答を見る
<br>・<meta>・<img>・<link>・<input> のうちの3つです。
問3 インデントを付けると、ページの表示はどう変わりますか。また、インデントを付けるのはなぜですか。
解答を見る
表示は変わりません。どのタグがどのタグの中にあるかを、ひと目で分かるようにするためです。入れ子の閉じ忘れや、閉じる順番の間違いにも気づきやすくなります。
問4 <div>大阪府</div><div>京都府</div> と <span>大阪府</span><span>京都府</span> は、Chrome でそれぞれどのように表示されますか。
解答を見る
<div> のほうは、「大阪府」と「京都府」が1行ずつ縦に並びます。<span> のほうは、「大阪府京都府」のように1行に続けて並びます。
問5 <div class="error"> の class="error" は、どのような役割をしますか。
解答を見る
要素に error という名前（クラス名）を付けます。それだけでは見た目は変わりませんが、CSS でこの名前を指定すると、その要素だけに見た目（文字の色など）を付けられます。