ブラウザで表示できる画像のファイル形式はたくさんあります。
その中でもよく使われているファイル形式は知っておかないといけません。
画像ファイルの種類と特徴、画像タグの使い方や意味・役割を、理解することが目的になります。
フォルダ作成とファイルの保存場所
Web制作
chap06
neko_1.jpg（ダウンロードした画像）
1-2.html（新規ファイルを作成）
chap02
chap03
nyanroom
sozai
画像ファイルをダウンロード
今回使用する画像ファイルです。
右の画像をクリックしてダウンロードし、chap06フォルダを作成して保存しておきましょう。
文章をコピーしてHTMLファイルを作成
下の文章をコピーし、「1-2.html」ファイルを作成して貼り付けます。
タイトル文は「画像の表示」にしてください。
画像を表示するタグ
ページの内容に、意味のある画像を表示する時に使うタグ
imgタグ（画像の表示/image）
「画像によって文章が伝わりやすくなる」または、「画像に対する説明・紹介する文章がある」など、画像は文章と同等の意味・役割を持ち、文章と合わせて使用する。
デザイン目的で使用する画像は、CSSを使って表示する。
画像が表示できない、または見ることができない環境・状況でも、内容が伝わるように、alt属性を使って画像の説明をする、代替文字を記述しなければいけない。
imgタグには、src属性を使って表示したい画像ファイルの場所を指定する。
alt属性を使って、画像の説明を記述する。
※ 終了タグなし
画像の使用例
文章を伝えるための画像
ウチの猫はとてもブサイクです。
ブサイクでも可愛い猫
知って欲しい内容を画像で伝える
エキゾチックショートヘアー
潰れた鼻とまん丸な顔、短い足に丸い尻尾が特徴の猫。HTMLの基本構造
忘れてしまった人用です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画像の表示</title>
</head>
<body>
</body>
</html>見出しのアウトライン（章立て）
下の章立てを参考に、見出しタグをマークアップしましょう。
- 画像を表示するタグ
- imgタグ（画像の表示/image）
- 画像の使用例
- 文章を伝えるための画像
- 知って欲しい内容を画像で伝える
文章に見出し・段落・改行・リストをマークアップ
うまく表示できなかった人は、入力ミスのチェックに使ってください。
See the Pen 6-1 by Rayout-gw (@Rayout-gw) on CodePen.
画像を表示してみよう
文章の説明で画像を表示する
<img>を使って画像を表示してみましょう。
src属性には画像ファイル名を、alt属性には元の文章をそのまま使うと良いでしょう。
<h3>文章を伝えるための画像</h3>
<p>ウチの猫はとてもブサイクです。<br>
<img src="neko_1.jpg" alt="ブサイクでも可愛い猫"></p>HTMLファイルと画像ファイルが同じフォルダ内にある場合は、「src=”画像ファイル名“」になります。
画像を表示して文章で説明する
<h3>知って欲しい内容を画像で伝える</h3>
<img src="neko_1.jpg" alt="エキゾチックショートヘアー">
<p>エキゾチックショートヘアーは、<br>
潰れた鼻とまん丸な顔、短い足に丸い尻尾が特徴の猫。</p>同じ画像を使ってますが、使い方が違うのがわかりますか？
alt属性の属性値、代替テキストが違いますね。
代替テキストは、その文章に関連した説明文になるので、適切な画像の説明文を考えると良いでしょう。
「猫の画像」は代替テキストにならないのでNGです。
<img>を使うシーンは、この他に画像ギャラリーのように写真を一覧で表示するときに使用します。
画像ギャラリーなどは、「文章の説明で画像を表示する」パターンになるでしょう。
alt属性の代替文字は、画像の説明文を前後の文章から考えるといいですよ