Lesson8: 画像を表示してみよう


 最後に画像の表示のしかたを教えましょう。
 画像表示は特にファイル名などを間違えると画像が表示されなくなってすこし大変な目にあったりするので注意しましょう。

 それでは、表示したい画像をHTMLファイルと同じフォルダに準備します。
 今回はこんな画像を用意しました。


 ※管理人が20秒ほどで書いたマウスらくがきです。

 この画像は118×120pxでPNGファイルになります。
 名前は保存する際に自分でつけていただいて結構ですが、デフォルトではpiyopiyo.pngになっているはずです。
 それではこの画像を使って、画像表示の練習をしましょう。

 基本のタグはこれです。

 ファイル名のところは半角英数字で(なので画像ファイルなどは必ず半角英数字でないといけません)
 拡張子も正しく表記しましょう。


 これで普通に表示されたはずです。
 画像表示の基本に関してはこれでおわりです。
 リンクをはりたいときはこのIMGタグをリンクタグで囲めばそれでリンクがはられます。


画像の大きさを指定する


 少し画像表示に関してステップアップしてみましょう。
 画像の大きさをHTMLタグで指定してしまいます。


 これらは元の画像を変更していません。
 同じ画像を大きくしたり小さくしたりしています。
 タグは以下のとおりです。




 ちなみに、大きさが元画像のままで表示させる場合でも、大きさを指定したほうが画像表示が速くなります。
 イラストメインのサイトなどはそれぞれ指定したほうが、画像の読み込みが早くなるので見る人もストレスなく見れるようになります。


画像にタイトルをつける


 万が一、万が一ですが、画像が表示されない状況に陥ったとき。
 こんなふうなものが見えませんか?


 このバッテン。Firefoxだと見えないようですが、IEだとこうやって表示されます。
 この部分にあたるものに文字を表示されるようにするタグがあります。
 altタグです。




 これで見えない画像でも、それがどんな画像なのかわかるようになります。
 少し便利ですね。IEの場合は、画像が普通に表示されてる状態でも、マウスカーソルを画像の上に乗せるとタイトルが表示されるようになります。



まとめ


 画像に関してはこれで終わりです。
 画像の周りに余白をつくるなど、まだ少し初心者向けでないこともありますので、調べてみるといいでしょう。


→ Lesson9へ