画像は、ホームページの顔を決める要素の一つです。
本稿では、画像タグであるimgタグについて実践します。
この記事で紹介するタグ：imgタグ
画像タグのサンプル
表示イメージ
ファイル名：html04.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTMLの基本タグ4（imgタグ）</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTMLの基本タグ4（imgタグ）</h1>
<h2>庭の花</h2>
<p><img src="small_flower.jpg" width="720" height="405" alt="紫の小さな花の画像"></p>
</body>
</html>
サンプルで利用している花の画像（ご自由にお使いください）
※保存方法：画像を右クリック、「名前を付けて画像を保存…」を選択して作成するHTMLファイルと同じフォルダに保存してください
解説
ホームページ上に画像を表示するには、imgタグを利用します。（サンプル11行目）
imgタグは、文字列と同じくインライン要素扱いなので、pタグなどのブロックレベル要素に含めて利用します。
<p><img src="～" width="～" height="～" alt="～"></p>
imgタグの基本的な使い方を示します。
imgタグの基本記述
<img src="画像ファイル名" width="横幅" height="縦幅" alt="画像の説明">
上記、imgタグ基本記述では、src, width, height, alt と4つの属性を指定しています。
表にまとめるとこんな感じです。
| 属性 | 意味 | 記述例 |
|---|---|---|
| src（必須） | 画像ファイル名 | src=”hoge.jp” src=”img/hoge.png” など |
| width | 画像の表示横幅（ピクセル単位） | width=”1024″ ※1024ピクセルという意味 |
| height | 画像の表示縦幅（ピクセル単位） | height=”768″ ※768ピクセルという意味 |
| alt | 画像ファイル名に対する説明文 ※なんらかの理由で画像が表示されない場合や音声読み上げブラウザ等で利用される | alt=”つばめの画像” |
src属性以外は省略可能です。ですから画像を表示するだけなら、
<img src="画像ファイル名">
とすればいいことになります。ただ、できるならwidthとheight属性の記述も推奨します。理由は後述します。
画像ファイル名の大文字と小文字の区別
OSにWindowsを使っている方がよく間違える項目として、ファイル名や拡張子などの半角英大文字と小文字の区別ができていない、という点が挙げられます。
Windowsでは、以下は同じファイルとして扱われてしまいます。
例）
test.jpg、test.JPG、TEST.jpg、TEST.JPG
サーバで利用されるOSのLinux、Unix系のMacOSなどは、これらは全て異なるファイルとして扱われます。
ですから、自分のパソコンではきちんと画像が表示されているのにサーバにホームページをアップロードしたら見えなくなった、ということがよくあります。多くは、ファイル名に使っている大文字小文字の区別が出来ていない事が原因です。
よくありがちなミス
画像ファイル名：hoge.JPG
作ったHTML
<img src="hoge.jpg">
実際の画像ファイル名は、hoge.JPGなので、imgタグに指定したhoge.jpgは別ファイルとして扱われてしまい画像が表示されません。
widthとheigt属性の注意点
widthとheightは画像サイズの指定ですが、あくまでホームページ上に表示するサイズを表します。
もし、画像ファイルが1200×800ピクセル（横幅×縦幅）だったとして、そのままのサイズで表示すれば、
<img src="hoge.jpg" width="1200" height="800">
となりますが、widthとheightを変更して
<img src="hoge.jpg" width="600" height="400">
とすれば、半分の大きさで表示されることになります。ただし、半分の大きさで表示されたからといって、読み取りが速くなるわけではありあません。あくまで表示サイズを800×400ピクセルと小さくしただけで、画像自体は1200×800ピクセルだからです。
ですから、特殊な場合を除き、できるだけ画像のサイズと表示サイズ指定であるwidth、heightを合わせた方がいいでしょう。
alt属性の必要性
最後にalt属性です。
その画像を説明する文字列を入れることが基本です。
この画像であれば、
alt="レゴで作った小さいカメラの画像"
などです。
alt属性の役割は、これだけではありません。
社会には、目の不自由な人向けの音声ブラウザなども存在します。サイトに表示された画像を見ることが出来ない場合を考慮してalt属性を入れることも必要になってきています。
画像クリックするとページ遷移する方法
imgタグとaタグを組み合わせると画像クリックすると別のサイトに飛ぶ（遷移する）ページを作ることが出来ます。
方法は、簡単でaタグのリンク文字列の代わりにimgタグを記述するだけです。
画像リンクのサンプル：gazou_link.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>画像リンクのサンプル</title>
<meta charset="utf-8">
</head>
<body>
<h1>画像リンクのサンプル</h1>
<p>ネコを<strong>クリック</strong>できます。</p>
<p><a href="https://dianxnao.com/" target="_blank"><img src="dot_neko.png" width="320" height="320" alt="ドット絵のネコ画像"></a></p>
</body>
</html>
上記サンプルで利用している画像
※画像を右クリックして「名前を付けて画像を保存…」を選択してダウンロードしてください。
画像ファイルの扱いに関しては他にも必要な項目がありますが、まずは基本のみ説明させて頂きました。
以上、HTMLの基本タグ4として画像タグ（imgタグ）の解説でした。
課題
１
次の画像からどちらか1つ選んで表示イメージを参考にホームページを作成してください。
ファイル名：gazou.html
【条件】
・imgタグの属性width、heightに関しては、元画像サイズを使い、alt属性に各自で考えた写真に合った文字列を設定する
・見出し、画像、画像の説明文（文字列の段落）の順に表示すること
使用する画像（どちらか一方）
表示イメージ（てんとう虫画像を使った例）
２
スマートフォンまたはデジカメで撮影した写真をパソコンに取り込み、写真と写真の説明文を添えたページを作ってみてください。
ファイル名：photo.html
作成イメージ
3
次の画像をaタグのリンク文字列として設定し、下記指定サイトURLに別タブで遷移させる。そんなホームページを作ってみましょう。（要するに画像をクリックすると別サイトに飛ぶページ、という意味です）
ファイル名：choco.html
遷移先URL
https://ja.wikipedia.org/wiki/%E3%83%81%E3%83%A7%E3%82%B3%E3%83%AC%E3%83%BC%E3%83%88
コメント
[…] […]