LESSON_4
コンテンツ要素① 画像の挿入② 動画の挿入③ 音楽の挿入学習目標
Lesson4 では、HTML ページ内に組み込むコンテンツ要素を学習します。 画像や動画、音楽など、コンテンツ要素をページ内に組み込むことでページが見栄えします。 現在の WEB 制作には欠かせない技術です。

LESSON

画像の挿入

4-1

画像ファイルは単に写真を載せるためのものではなく、 WEB サイトを魅力的に見せるためのナビゲーションやアイコン ・ その他装飾などに画像を使用することも多く、 見栄えの良い WEB サイトには欠かせないものです。
ここでは、 基本的な画像の呼び出し方と必要な設定について理解していきましょう。

画像の挿入

画像を表示するためには、「<img> タグ」を使用します。
HTML ファイルは、 Excel や Word のように文書内に画像を埋め込むことはできないため、 画像を表示する際は表示したい画像を読み出すように指示する必要があります。 指示する際には「src=""」という属性を追加して読み出す画像の保存場所を指定します。

ここで学習するタグ<img>

画像 （Image）

src （属性）

画像の位置を表す （source）
画像位置の指示は、 相対パスや絶対パスで表す

alt （属性）

代替テキスト （alternative text）
画像が表示されない場合の代替要素。 音声ブラウザーなどでも使用される。

title （属性）

補足説明
画像に関する補足や詳細説明を表す。

width （属性）

※ <title> タグとは全く異なります。

画像の幅画像の幅のサイズをピクセル単位で指定します。

height （属性）

画像の高さ画像の高さのサイズをピクセル単位で指定します。

38
HTML5&CSS3

新規メモ帳からファイルを作成する<!doctype html><html lang="ja"><head><meta charset="UTF-8"><title> 画像の挿入 </title></head><body><p>① 素材フォルダーの「Lesson4」-「Lesson4-1-1.html」を開き、 左記の太字のコードを追記しましょう。

② 入力が完了したら、 上書き保存しましょう。
※ 「src 属性」で指定した場所は HTML ファイルから見た相対パスです。

<img src="images/pink.jpg" alt=" チューリッ

この中プ " title=" 長崎旅行で撮影したチューリップ "width="250" height="190">
</p>

ml

<p> 長崎の旅行で撮影したピンク色のチューリップです。 とても綺麗で爽やかです。 </p></body></html>

このファイル

保存したファイルをブラウザーで表示しましょう。

画像が表示されました。
画像の上にマウスを載せると「title 属性」に入力した値がポップアップ表示されることが確認できます。「alt 属性」
は代替文字と言い、 画像が破損し表示されない場合や表示に時間がかかる場合に、 一時的に代替文字が表示されたり、 目の不自由な方用に音声として読み上げられます。

確認できたら、 ファイルはこのままで次に進みましょう。

width と height の指定について
画像のサイズ「width」と「height」には、 準備している画像の本来のサイズと同じ数値を入力するのが基本です。
万一画像が破損していたり、 パスが正しく繋がっていなかった場合に、「width」と「height」を入力しておくことで、 画像分のスペースを保つことができるからです。 サイズの指定がない場合は、 下図のように代替文字分しか確保されません。

また、「width」と「height」のサイズを変更して画像の大きさを調整することもできますが、 縦横比率が崩れると、 ジャギ―と呼ばれる画像のガタつきが発生するためお勧めできません。 あらかじめ画像編集ソフトなどで適切なサイズを準備しておく方が良いでしょう。
39
HTML5&CSS3

画像にリンク挿入
画像にリンクを指定する場合は <img> タグをアンカータグ <a> で囲います。
通常のリンクと同じようにアンカータグに「href=""」や「target=""」などの属性を指定できます。

<!doctype html><html lang="ja"><head><title>
画像へのリンク</title></head><body>① 左記の太字のコードを追記 ・ 編集しましょう。

② 入力が完了したら「Lesson4」フォルダーにファイル名「Lesson4-1-2.html」と付けて保存しましょう。
今回は外部サイトを開くため、「src 属性」を絶対パスで指定しています。 また、 別のウィンドウで閲覧できるように属性に「target="_blank"」を設定しています。

<p><a href="http://www.huistenbosch.co.jp/"
target="_blank"><img src="images/pink.jpg" alt=" チューリッ
プ " title=" 長崎旅行で撮影したチューリップ "width="250" height="190">
</a>
</p>
<p> 長崎の旅行で撮影したピンク色のチューリップです。 とても綺麗で爽やかです。 </p><p> ハウステンボスへ行ってきました。画像をクリックしてください。</p></body></html>

保存したファイルをブラウザーで表示しましょう。
画像をクリックするとハウステンボスの WEB サイトが開きました。

確認できたら、 ファイルを閉じて次に進みましょう。

40
HTML5&CSS3

キャプション付きの画像
キャプションとは、 主に図や写真について説明のために付け加えられる文字情報を指します。 HTML5 から新しく追加された要素で、 画像とキャプションを関連付けするための「<figure>」というタグが追加されました。

ここで学習するタグ<figure>

画像とキャプションを一つのグループとして結び付ける<figcaption>

画像に関するキャプション

新規メモ帳からファイルを作成する<!doctype html><html lang="ja"><head><meta charset="UTF-8"><title> キャプション付きの画像 </title>① 素材フォルダーの「Lesson4」-「Lesson4-1-3.
html」を開き、 左記の太字のコードを入力しましょう。
② 入力が完了したら、 上書き保存しましょう。

</head><body><figure><img src="images/pink.jpg" alt=" チューリッ
プ " title=" 長崎旅行で撮影したチューリップ "width="250" height="190"><figcaption>
長崎の旅行で撮影したピンク色のチューリップです。

画像とキャプションの関連付け
Lesson4-1-1.html で記述したソースは、 画像と文章それぞれを <p> タグで囲っているため、 クローラーにはそれぞれが独立した段落であると認識されます。
今回追加された <figure> というタグで全体を囲うことで、とても綺麗で爽やかです。

『長崎の～～爽やかです。』 の文章が、 チューリップの</figcaption>画像について書かれたものだと結び付けることができま</figure>す。

</body>

表示上はほとんど変化がありませんが、 クローラーに対</html>して、 画像と文章の関連性を伝えられることになります。

保存したファイルをブラウザーで表示しましょう。
今回は、 特に表示に変化はありません。

確認できたら、 ファイルを閉じて次に進みましょう。

41
HTML5&CSS3