画像を使う 【<img>タグ】：HTML入門
HTML入門（5）
記事「文章を書く（<p>タグ）」で、文章を書けるようになったことだし、次は画像を使ってみようと思います。
そうです。みんなが大好きな画像です。
100の言葉より、1枚の画像の方が、明確に考えが伝わることもありますから、画像はとても重要です。
何しろ、画像の有無で、アクセス数も大きく違います。
画像をより良く使うためにも、画像のタグをがっちり理解しておきましょう。お話は、次の順番で進みます。
画像タグ（<img>タグ）とは？
1：<img>タグの基本形
<img>タグは、画像を表示させるときに指定するタグです。
基本形は、次のようになります。
<img src="（場所＋画像ファイル名）" alt="（画像代替文字）" width="（幅）" height="（高さ）">
今までお話してきたタグとは、ずいぶんと違っているので、びっくり仰天、思わず失禁していることと思います。
- タグが1つだけで完結している。（タグが開始タグ、閉じるタグとはなっていない）
- 「属性」なるものを付ける必要がある。
しかし、慌てることなく、ちびることなく、今までと同じように、ひとつずつ見ていけば、何てことはありません。
ちなみに、どうして、「img」かと言えば、「image（映像）」から来ています。
2：属性とは？
属性は、そのタグの詳しい情報を、指定するために使います。
例えば、<img>タグで、次のように何も属性がなかったら、どうでしょうか？
<img>
これでは、何も起こりません。
何しろ、どの画像を表示すれば良いのかさえ分かりませんから、少なくとも画像の場所とファイル名（src属性）だけでも伝えてあげる必要があります。
つまり、あなたはブラウザに「何をどのように表示したいのか？」と問われているわけです。属性を明確に指定することで、期待する結果が得られます。
はっきりしない煮え切らない男は、嫌われてしまうのです。
属性は、画像タグ（<img>タグ）以外のタグにも存在します。その都度、よく使うものだけ、ご紹介いたします。
3：<img>タグの属性
<img>タグの主な属性について、簡単に説明します。
src | 「画像がある場所＋ファイル名（ファイルパス）」を指定します。source（根源）を略して、srcです。 |
|---|---|
alt | 画像が表示されない場合に代替として表示する文字を指定します。alternate（代替）を略して、altです。 |
width | 画像の幅を指定します。widthは、「幅」を意味する英単語です。 |
height | 画像の高さを指定します。heightは、「高さ」を意味する英単語です。 |
さらに、次の属性も覚えておけば、ばっちりです。
title | 画像の説明を書きます。また、画像の上にマウスのカーソルを乗せたときにコメントとして表示されます。 |
|---|---|
border | 画像にリンクを付けた場合の画像回りの枠線の太さを指定します。 |
あ、失礼。覚えるというか、ざっくり眺めて頭を慣らしておいてください。
こんな、一覧表なんかでゴリゴリ頭にねじ込んだって、覚えてもすぐ忘れます。実際に、使いながら覚えていきましょう。
border属性については、記事「リンクさせる 【<a>タグ】：HTML入門」にて書いています。
本にたとえてイメージする
それでは、本を手に取って、開いてみてください。
次の写真のように、画像は、相手に伝えたい情報を、よりイメージしやすくさせる効果があります。
画像タグ（<img>タグ）も同様に、イメージを増幅させたり、文章を補完する役割を担っています。
ちなみに、この本は、株式会社ビービットさんの『ユーザ中心ウェブサイト戦略』です。ユーザビリティを中心とした内容になっています。
実習 <img>タグ
1：画像を用意する
（01）
適当な画像を用意しましょう。
何でも良いですけれど、作業していて楽しくなるものがいいかな。（適当な画像がない場合は、無料Web素材をご利用ください）
（02）
画像は、決まったかしら？
そうしたら、適当な場所にフォルダを作成してください。フォルダ名は適当で構いません。
（03）
画像を、前述（02）で作成した「適当なフォルダ」に入れましょう。
2：HTMLファイルを作成する
（04）
テキストエディタを起ち上げて、次のHTMLコードをコピーして貼り付けてください。
（05）
画像と同じ場所に、HTMLファイルとして保存しましょう。
HTMLファイル名は、「image-view.html」など、お好きなようにどうぞ。
拡張子を間違わないように気を付けてくださいね。「.html」ですよ。
3：ブラウザで表示する
（06）
それでは、ブラウザで表示してみましょう。
どうです！見事に画像が表示されません！
どうしてなのか、分かるかしら？それでは、HTMLコードを、改めて確認してみましょう。
そうです。<img>タグで、src属性（場所＋ファイル名）を指定していません。表示されるわけがないのです。
この画像が表示されない状態も、覚えておいてください。
4：src属性を指定してブラウザで表示する
（07）
今度は画像が表示されるように、<img>タグのsrc属性を入れてみましょう。
src | 画像がある場所＋ファイル名（ファイルパス）を指定します。source（根源）を略して、srcです。 |
|---|
例えば、画像ファイル名が、「free_flower_001.gif」であれば、次のようになります。
「あれ？場所を書いていないやないか」と思うかもしれませんが、HTMLファイルと画像ファイルが同じフォルダ内にある場合は、画像ファイルの場所の記述は省略できます。
画像ファイルの場所の指定には、絶対パスと相対パスの二通りの方法があります。お話が長くなってしまうので、また別の機会に書きます。
（08）
ブラウザで表示してみましょう。今度は、画像が表示されていると思います。表示されたかしら？
6：altを指定する
（09）
<img>タグに、alt属性を入れてみましょう。
alt | 画像が表示されない場合に代替として表示する文字を指定します。alternate（代替）を略して、altです。 |
|---|
しかし、「代替文字」などと言われても、「はぁ？」という感じの人もいらっしゃるかと思います。
それでは試しに、HTMLコードを、画像が表示されない状態にして、代替文字を表示してみましょう。
src属性は記述せず、alt属性だけ記述します。（無理矢理、画像が表示されない状態にしているの）
（10）
ブラウザで表示してみましょう。画像の代わりに、「代替文字：お花」が表示されます。
alt属性を入れておくと、次のようなメリットがあります。
- 画像が何らかのトラブルによって表示されない場合、あるいは表示に時間がかかっている場合などに、事前に代替文字だけ表示されます。
- 音声ブラウザを使用しているユーザが、代替文字によって画像の概要を理解することができます。
- SEO対策上、効果があると言われています。
alt属性は、入れるのが手間なので面倒だと感じるかもしれませんが、入れておく方がいいんだなぁ。
（11）
誤解のないように書いておきますが、通常は、もちろんsrc属性も記述します。このsrc属性とalt属性の2つは、<img>タグでは必須です。
7：width属性とheight属性を指定する
（12）
次は、画像にwidth属性（幅）と、height属性（高さ）を指定してみましょう。
width | 画像の幅を指定します。widthは、「幅」を意味する英単語です。 |
|---|---|
height | 画像の高さを指定します。heightは、「高さ」を意味する英単語です。 |
画像の大きさは、30×30なので、次のように指定します。
（13）
ブラウザで表示してみましょう・・・でも特に変化はなく、表示上はそのままです。
width属性とheight属性を指定しておくメリットは、大量に画像を表示する画面などで、事前に幅と高さが固定できることです。
また、width属性とheight属性を実際とは違う値にすることもできます。例えば、それぞれ倍の60に指定すると、次のようになります。
ただ、画像を実際より大きく表示すると画質が落ちるし、小さく表示すれば、それは意味のない無駄な行為と言えます。
画像の大きさを、実際とは違う値にすることは、あまり一般的ではありません。
8：title属性を指定する
（14）
title属性も指定しておくと、便利な場合があります。
title | 画像の上にマウスのカーソルを乗せたときに表示されるコメントを指定します。 |
|---|
<img>タグのtitle属性には、画像の説明を書きます。
（15）
ブラウザで表示してみましょう。
画像の上にマウスのカーソルを乗せてみてください。title属性で指定した文字が表示されます。
IEの場合、alt属性でも画像の上にマウスのカーソルを乗せると文字が表示されるので、機能を混同しがちです。
しかし、それはIEの独自の動作です。alt属性は代替文字を表示させるために使います。勘違いしないように気を付けましょう。
すべての画像にalt属性は必要か？
「画像タグ（<img>タグ）に、alt属性を記述することは必須です」と書きました。
しかし、考えてみると、ホームページには、いろいろな所に画像が使われているので、「alt属性は、いらないのではないかしら？」という画像も存在します。
例えば、背景のデザイン、あるいはメニューなどのアクセントとして使っている場合もあります。
これらの代替文字を入れる必要性が感じられない画像に関しては、一般的に「alt=""」というように空（から）記述します。
あるいは、HTMLコードをチェックするツールなどでは、エラー表示されることがあるので、「alt=" "」というように半角スペース（もしくは全角スペース）を入れる場合もあります。
つまり、やはり「画像タグ（<img>タグ）に、alt属性を記述することは必須です」が、中身を書かない画像も存在するということです。
次回予告
次回は、リンクタグ（<a>タグ）について書きます。
関連記事
HTMLに関連する記事を、ご紹介します。
1：カスタマイズ前
2：HTML入門
- HTML入門 はじめました
- HTMLを表示させてみよう
- 見出しを付ける 【<h>タグ】
- 文章を書く 【<p>タグ】
- 画像を使う 【<img>タグ】（この記事です）
- リンクさせる 【<a>タグ】
- 表を作る 【<table>タグ】
- 箇条書き 【<ul>タグ】
- グループ化 【<div>タグ】
- HTML入門まとめ
3：もう少しHTML
作成日：2008/03/20 更新日：2008/03/20
« 「文章を書く 【<p>タグ】」｜「リンクさせる 【<a>タグ】」 »
コメントありがとうございます。
こんばんは！
alt属性とtitle属性
そうですね。
ソフトが、alt属性もtitle属性も書いておいてくれると、
あまり気にしないですよね。
それぞれ、代替と説明を書くにしても、
それじゃあ、どんな風に書けば良いのか？というと、
ちょっと使い方は、難しい感じがしています。
私は、とりあえず、両方入れて、どちらも同じ内容にしています。
考えている余裕がないんだなぁ。(´Д｀;)ウーン
コメントの投稿
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/244-b73f86eb
（私のことです↑）
altは立替でtitleが説明なんですね。
ＦＣ２のブログで記事を書くときに、画像を挿入するとタグを勝手に書いてくれますが、タイトル部分に入れた文字はalt属性になってるので、それで良いものだと思っていました（＾＾；）ホントにFirefoxでは表示されませんね。
とても参考になりました！ポチポチ