【HTML入門】第5章 リンクと画像

Web ページは、リンクでほかのページへ移動したり、画像を表示したりできます。この章では、リンクの <a> タグと、画像の <img> タグを使って、2つのページを行き来できるようにします。リンク先や画像の場所を書くときの「相対パス」の考え方も学びます。

この章で学ぶこと

• リンクを作る <a> タグと href 属性
• 画像を表示する <img> タグと src・alt 属性
• 画像のファイルを Eclipse のプロジェクトに入れる方法
• ファイルの場所を、今のページから見た位置で書く「相対パス」

5.1 この章で作るもの

この章では、ch05 フォルダーに2つのページを作ります。index.html には画像と、departments.html へのリンクを置きます。departments.html には、index.html へ戻るリンクを置きます。リンクをクリックすると、2つのページを行き来できます。

図5-1 index.html（画像と、departments.html へのリンク）

図5-2 departments.html（index.html へ戻るリンク）

ファイル	作業	内容
ch05/images/logo.png	追加	ページに表示する画像（この教材の画像を保存して入れる）
ch05/index.html	新規	画像と、departments.html へのリンクのあるページ
ch05/departments.html	新規	部署の一覧と、index.html へ戻るリンクのあるページ

5.2 ch05 フォルダーと images フォルダーを作る

画像のファイルは、ページのファイルと分けて、章のフォルダーの中の images フォルダーに入れます。ファイルが増えても、どこに何があるかが分かりやすくなります。

1. webapp フォルダーを右クリックし、新規 → フォルダー を選びます。「フォルダー名」に ch05 と入力し、「完了」をクリックします（第3章「ch03 フォルダーを作る」）。
2. 作った ch05 フォルダーを右クリックし、新規 → フォルダー を選びます。「親フォルダーを入力または選択」の欄に html/src/main/webapp/ch05 と入っていることを確認し、「フォルダー名」に images と入力して、「完了」をクリックします。
3. ch05 の中に images フォルダーができたことを確認します。

【再確認】images フォルダーは ch05 の中に作る

images フォルダーは、必ず ch05 フォルダーを右クリックして作ってください。webapp のすぐ下に作ると、この章のページから画像が見つからなくなります。フォルダー名は、すべて半角の小文字で images と入力します。

5.3 画像のファイルを入れる

ページに表示する画像として、次の画像（logo.png）を使います。この画像を保存して、Eclipse の images フォルダーに入れます。

図5-3 この章で使う画像（logo.png）

1. 上の図5-3 の画像を右クリックし、「名前を付けて画像を保存」を選びます。

   
   図5-4 画像を右クリック → 名前を付けて画像を保存（赤枠）

2. 保存の画面が表示されます。保存する場所が「ダウンロード」になっていることを確認し、「ファイル名」を logo.png にして、「保存」をクリックします。

   ファイル名が logo.png でない場合は、logo.png に書き換えてから保存してください。ページに書くファイル名と同じにしておかないと、画像が表示されません。

3. エクスプローラーで「ダウンロード」フォルダーを開き、logo.png があることを確認します。

4. エクスプローラーの logo.png をマウスでつかんで（ドラッグして）、Eclipse のパッケージ・エクスプローラーの images フォルダーの上まで運び、マウスを離します。

5. 「ファイル操作」の画面が表示されます。「ファイルをコピー」が選ばれていることを確認して、「OK」をクリックします。最初から「ファイルをコピー」が選ばれているので、変える必要はありません。

   
   図5-5 「ファイルをコピー」を選んで「OK」（赤枠）

6. パッケージ・エクスプローラーで images フォルダーを開き、logo.png が入ったことを確認します。

   
   図5-6 images フォルダーに logo.png が入った（赤枠）

   コピーした logo.png が、エディターに開いて表示されることがあります。確かめたら、タブの「×」で閉じてかまいません。

【知識メモ】PNG と JPEG

Web ページの画像には、主に PNG（拡張子 .png）と JPEG（拡張子 .jpg）の形式が使われます。PNG は、図や文字のようにはっきりした画像に、JPEG は写真に向いています。どちらも、この章と同じ書き方で表示できます。

5.4 画像とリンクのあるページを作る

1. ch05 フォルダーを右クリックし、新規 → HTML ファイル を選びます。「親フォルダーを入力または選択」の欄が html/src/main/webapp/ch05 になっていることを確認し、「ファイル名」に index.html と入力して、テンプレート「新規 HTML ファイル (5)」で作ります（第3章「hello.html を作る」）。

2. <title> を書き換え、<body> の中に緑の行を書きます。

   ch05/index.html

   <!DOCTYPE html>
   <html>
   <head>
   <meta charset="UTF-8">
   <title>リンクと画像の練習</title>
   </head>
   <body>
     <h1>リンクと画像の練習</h1>
     <p><img src="images/logo.png" alt="HTML入門のロゴ"></p>
     <p><a href="departments.html">部署の一覧へ</a></p>
   </body>
   </html>
   

3. 保存ボタンか Ctrl + S で保存し、タブの * が消えたことを確認します。

4. Chrome で http://localhost/html/ch05/index.html を開き、画像と「部署の一覧へ」のリンクが表示されることを確認します（図5-1）。リンクの文字は、青い色と下線で表示されます。

まだ departments.html を作っていないので、この時点で「部署の一覧へ」をクリックすると、「HTTPステータス 404 – 見つかりません」と表示されます。リンク先のページは、次の 5.5 で作ります。

5.5 リンク先のページを作る

1. ch05 フォルダーに、同じ手順で departments.html を作ります。

2. <title> を書き換え、<body> の中に緑の行を書きます。

   ch05/departments.html

   <!DOCTYPE html>
   <html>
   <head>
   <meta charset="UTF-8">
   <title>部署の一覧</title>
   </head>
   <body>
     <h1>部署の一覧</h1>
     <div>総務部</div>
     <div>営業部</div>
     <div>開発部</div>
     <p><a href="index.html">リンクと画像の練習へ戻る</a></p>
   </body>
   </html>
   

3. 保存ボタンか Ctrl + S で保存し、タブの * が消えたことを確認します。

4. Chrome で index.html を表示し、「部署の一覧へ」をクリックします。departments.html に移動し、アドレスバーが localhost/html/ch05/departments.html に変わることを確認します（図5-2）。

5. 「リンクと画像の練習へ戻る」をクリックし、index.html に戻ることを確認します。

リンクをクリックすると、Chrome は href 属性に書かれたページを Tomcat にリクエストし、届いたページを表示します（第1章「Web ページが表示されるまで」）。アドレスバーの URL が変わるのは、新しいページをリクエストしたためです。

5.6 解説：a タグ

<a> タグは、リンクを作るタグです。開始タグと終了タグの間に書いた内容が、クリックできる部分として表示されます。

ch05/index.html（リンクの部分）

<a href="departments.html">部署の一覧へ</a>

書いたもの	意味
<a>	リンクを作る。内容（ここでは「部署の一覧へ」）が、クリックできる文字として表示される
href="departments.html"	リンク先。クリックすると、ここに書いたページへ移動する

href には、ほかの Web サイトのページを書くこともできます。そのときは、href="https://www.google.com/" のように、https:// から始まる URL をすべて書きます。同じプロジェクトの中のページは、この章のように、今のページから見た場所で書きます（5.8）。

【知識メモ】a タグは p の中に入れる

<a> は、<span> と同じように、文章の流れの中に並ぶタグです（第4章「div と span」）。この章では、リンクを <p> で囲んで、1つの段落として表示しています。Spring入門の社員管理アプリでも、「一覧へ戻る」のリンクを <p> で囲んでいます。

5.7 解説：img タグ

<img> タグは、画像を表示するタグです。内容を持たないので、終了タグは書きません（第4章「終了タグを書かないタグ」）。

ch05/index.html（画像の部分）

<img src="images/logo.png" alt="HTML入門のロゴ">

書いたもの	意味
<img>	画像を表示する。終了タグは書かない
src="images/logo.png"	表示する画像のファイルの場所
alt="HTML入門のロゴ"	画像の内容を表す文章。画像が表示できないときに、代わりに表示される。また、目の見えにくい人が使う、画面を読み上げるソフトウェアは、この文章を読み上げる

画像を表示するとき、Chrome はページとは別に、src に書かれた画像のファイルを Tomcat にリクエストしています。1つのページを表示するために、ページの HTML と画像の2回のリクエストが行われます。

画像が見つからないときの表示

alt の役割を確かめるため、わざと画像のファイル名を間違えてみましょう。

1. index.html の src="images/logo.png" を、src="images/logo2.png" に書き換えて保存し、Chrome で再読み込みします。

   
   図5-7 画像が見つからないときは、alt の文章が表示される

   画像が見つからないので、画像の代わりに、壊れた画像を表すアイコンと alt の文章「HTML入門のロゴ」が表示されます。

2. 確かめたら、src="images/logo.png" に戻して保存し、再読み込みして画像が表示されることを確認します。

5.8 相対パス

href="departments.html" や src="images/logo.png" のように、ファイルの場所を 今のページがあるフォルダーから見た位置 で書く書き方を、相対パス といいます。この章のファイルは、次のように置かれています。

webapp フォルダーの中

webapp
└─ ch05
    ├─ index.html
    ├─ departments.html
    └─ images
        └─ logo.png

index.html に書いた相対パス	指している場所	開かれる URL
departments.html	index.html と同じフォルダー（ch05）の中の departments.html	http://localhost/html/ch05/departments.html
images/logo.png	index.html と同じフォルダーの中の images フォルダーの、さらに中の logo.png	http://localhost/html/ch05/images/logo.png

同じフォルダーの中のファイルは、ファイル名だけを書きます。フォルダーの中のファイルは、images/logo.png のように、フォルダー名とファイル名を / でつなげて書きます。Chrome は、今のページの URL の、最後の / より後ろ（index.html）を相対パスに置き換えて、リクエストする URL を決めています。

【ご注意】ファイル名の大文字・小文字と拡張子を合わせる

Tomcat は、URL のファイル名の大文字と小文字を区別します。ファイルが logo.png なのに、src="images/Logo.png" や src="images/LOGO.PNG" と書くと、画像が見つかりません。拡張子も含めて、Eclipse のパッケージ・エクスプローラーに表示されているファイル名と同じに書いてください。

【知識メモ】相対パスで書く理由

相対パスで書いておくと、ch05 フォルダーごと別の場所に移しても、ページ同士のリンクや画像の場所を書き直さずに済みます。この教材では、章ごとのフォルダーの中だけで相対パスを使い、別の章のフォルダーのファイルは使いません。Spring入門では、/ から始まるパスも使います（第10章「パスの書き方」）。

5.9 うまくいかないときは

症状	考えられる原因と対処
画像の代わりに、壊れた画像のアイコンと alt の文章が表示される	画像が見つかりません。logo.png が ch05/images フォルダーの中にあるか、src のつづり（大文字・小文字、拡張子）が合っているかを確かめてください。詳しくは付録A「画像が表示されない」を見てください。
ダウンロードした画像のファイル名が logo.png ではない	保存するときのファイル名が違います。5.3 の手順1から、ファイル名を logo.png にして保存し直し、images フォルダーに入れ直してください。間違った名前のファイルが images フォルダーに入っている場合は、右クリックして 削除 を選び、消してかまいません。
リンクをクリックすると「HTTPステータス 404 – 見つかりません」と表示される	リンク先のファイルが無いか、href のつづりが違います。departments.html が ch05 フォルダーの中にあるかを確かめてください。詳しくは付録A「ページが表示されない」を見てください。
リンクの文字がクリックできない	<a> に href 属性が無いか、" の閉じ忘れがあります。コードと見比べてください。

ほかのつまずきは、付録A「よくあるつまずきと対処法」も参考にしてください。

5.10 まとめと確認問題

まとめ

• リンクは <a href="リンク先">表示する文字</a> で作る。クリックすると、Chrome は href のページをリクエストする
• 画像は <img src="画像の場所" alt="画像の内容"> で表示する。<img> は終了タグを書かない
• alt には画像の内容を書く。画像が表示できないときに代わりに表示され、読み上げのソフトウェアにも使われる
• 画像のファイルは、章のフォルダーの中の images フォルダーに入れる。エクスプローラーから Eclipse にドラッグして、コピーできる
• 今のページがあるフォルダーから見た位置でファイルの場所を書くのが 相対パス。フォルダーの中のファイルは images/logo.png のように / でつなぐ
• ファイル名は、大文字・小文字と拡張子まで合わせて書く

この章で使ったタグと属性は、付録B「タグの早見表」・付録B「属性の早見表」にまとめています。

確認問題

問1　「会社の紹介」という文字をクリックすると、同じフォルダーの company.html に移動するリンクを書いてください。

解答を見る

<a href="company.html">会社の紹介</a> です。

問2　<img> タグの src 属性と alt 属性には、それぞれ何を書きますか。

解答を見る

src には表示する画像のファイルの場所を、alt には画像の内容を表す文章を書きます。

問3　http://localhost/html/ch05/index.html のページに <img src="images/flower.jpg" alt="花"> と書きました。Chrome がリクエストする画像の URL を答えてください。

解答を見る

http://localhost/html/ch05/images/flower.jpg です。今のページの URL の、最後の / より後ろの index.html が、相対パスの images/flower.jpg に置き換わります。

問4　画像のファイルは logo.png ですが、<img src="images/Logo.png" alt="ロゴ"> と書いたところ、画像が表示されませんでした。理由を答えてください。

解答を見る

Tomcat は、ファイル名の大文字と小文字を区別するためです。Logo.png と logo.png は別のファイルとして扱われ、画像が見つかりません。src="images/logo.png" と書きます。

---

前へ

第4章 タグと属性の基本

次へ

第6章 表