<img src="画像ファイル名" alt="代替テキスト">
さっそく、前回の続きから入らせていただきます。画像を表示させるシリーズでした。
今回は、画像の代わりにテキストを表示させる方法（代替テキストの表示）を覚えていただきましょう。
イメージを表示できないブラウザのために、画像の代わりにテキストで説明を表示させたり、イメージを表示できるブラウザであっても画像の読み込みにエラーが生じた場合や、あるいはイメージを表示させない設定にしている場合に有効なタグをこれから覚えていただきますね。また、イメージが表示される場合でも、マウスカーソルを画像に重ねると、説明として代替テキストを表示してくれるので、けっこう便利です。
普通に画像を表示させるタグは、<img src="hanami.gif"> のように書きましたが、画像の代替テキストを表示させる場合は alt="表示させるテキスト"を追加します。alt（オルト） は英語の alternate か alternation (他のものにする）という言葉が元になっているようです。そういえば、キーボードにも Alt キーがありましたよね。このキーを押しながら別のキーを押すことで、それぞれのキーに他の役割を持たせることができるんでした。Alt って便利なんですね。
余談ですが、このキーを僕は最初アルトと読んでいまして、オルトと読むことに気づいたのは、ほんの数年前でした。アルトじゃ、鈴木の軽自動車ですね。いやー、はずかしぃー。(^_^;
では、ちょっくら練習してみましょう。
画像ファイルはお好みのものを使ってください。前回使用したタグを元に、次のように書いてみました。メモ帳で書いて、たとえば daitai.htm として保存しましょう。また、下の場合では hanami.gifという画像ファイルを同じ場所に保存してあります。たとえば、C:\My Documentsに両方のファイル、daitai.htmとhanami.gifを置いてあるわけです。
<html>
<head>
<title>
今回は画像を使って遊びましょう（本文の中に画像を）
</title>
</head>
<body text="#0000ff">
@niftyではただいま1999→2000年末年始特集をやっています。<br>
ぜひ@niftyホームページにアクセス、アクセス。<br>
@niftyは、アット・ニフティと読んでね。(^_^)<br>
<img src="hanami.gif" alt="花見の画像ですよん"><br>
早く春にならないかな。<br>
今年の冬は、なんか暖かいぃ！<br>
</body>
</html>
ブラウザで表示させると、こんな感じになります。
マウスカーソルはスクリーンコピーしても表示されませんが、実際には画像の上にカーソルが重なっています。
その状態で「花見の画像ですよん」という代替テキストが表示されます。皆さんは別の代替テキストを表示させてみてくださいね。
たとえば、「ようこそ！」とか、「愛してるぜベイビー！」とかなんとか。(^_^)
さらに遊んでみましょう。上のタグの中の、画像の名前だけをいじってみます。次のようにしてみました。今度は daitaib.htm とでも名付けて保存します。画像を用意する必要はありません。なぜですかって？ それは、やってみればお分かりになるはず。
<html>
<head>
<title>
今回は画像を使って遊びましょう（本文の中に画像を）
</title>
</head>
<body text="#0000ff">
@niftyではただいま1999→2000年末年始特集をやっています。<br>
ぜひ@niftyホームページにアクセス、アクセス。<br>
@niftyは、アット・ニフティと読んでね。(^_^)
<img src="hanabi.gif" alt="花見の画像ですよん"><br> （←hanami.gifであるべきファイル名）
早く春にならないかな。<br>
今年の冬は、なんか暖かいぃ！<br>
</body>
</html>
どこが変更されたか、お分かりですか。画像のファイル名が hanabi.gifに変わっています。こんな名前の画像は用意していないのですが、このタグを daitaib.htm とでも名付けて保存して、ブラウザで開いたらどうなるでしょう。答は教えないので、実際にやってみてください。(^_^)hanami.gif以外の画像を使っている方は、その画像名をちょこっと変えてみてください。たとえば、poi.gifだったら、boi.gifに変えてみるとか、全然別の名前でも構いません。
これをブラウザで開いてみると、こんな感じになります。
画像が表示されない場合こうなります。
Netscapeでは？マークですね。
Internet Explorerの場合はXマークが出ます。
こんなふうに、画像が表示されなくても、ピンチヒッターとして文字で説明してくれる、それが alt タグです。
このように画像が表示されない原因は、ファイル名を間違える場合以外にもあります。そこで、ちょっと、閑話休題といきましょうか。
覚えておきたい大切なことがあります。ホームページをウェブ上のサーバーで公開する場合、ファイル転送ソフトを使ってファイルを転送するのが一般的ですが、その際にファイルの名前のつづり方だけでなく、大文字や小文字にも気を付けてください。なぜかと言うと、ウェブ上のサーバーでは大文字のファイル名や小文字のファイル名を区別するからです。
具体的には、hanami.gif HANAMI.GIF Hanami.gif hanami.GIFなどはウェブ上ではすべて別のものとみなされてしまいます。ところが、普通のパソコンでは上のファイルは同じ名前として処理されます。ですから、みなさんのパソコンで作ったファイルを元にしてブラウザで表示確認を行うときちんと表示されるのに、サーバーにファイルを転送して確認したらうまく表示されないなどという現象が起きることがあります。（僕の場合、何度経験したことか）(^_^;あと、以前に学習していただいた、パスの書き方を間違えると、これも正しくブラウザで表示されないようになってしまいます。絶対パスと相対パスでしたよね。みなさん、ぜったい間違えないでくださいよ。
では、今回最後のタグです。今までのおさらいです。
<html>
<head>
<title>
今回は画像を使って遊びましょう（画像に代替テキストを）
</title>
</head>
<body text="#0000ff">
<img src="hanami.gif" width="50%" height="25%" alt="花見の画像ですよん
"><br>
早く春にならないかな。今年の冬は、なんか暖かいぃ！<br>
<img src="bubble.gif" width="50%" height="25%" alt="シャボン玉だって！子供
の頃にやりましたよね"><br>
シャボン玉にビールを入れると粘度が増して長持ちするとか。(^_^)<br>
<img src="mori.gif" width="50%" height="25%" alt="森林浴って健康に良いそう
ですよ。"><br>
森に行けば、勇気がもりもり湧いてくるってか。(^_^)<br>
</body>
</html>
実際の表示例は、代替テキストがいずれかひとつだけの表示になります。
例によってマウスカーソルが見えませんが、ご愛敬ということでお許しください。実際には左のようにすべての代替テキストが表示さえることはありませんが、画像にカーソルを重ねたときのイメージです。
では、今回はここまで。
スィーユー！
