【第９回目】画像の扱い方

【第９回目】画像の扱い方　　(2003/03/30)

本日で第９回目。
今日はHPでよく使用する画像の扱い方についてです。
第５回目「alt属性」で少し説明しているので、それ以外のことについて説明します。
それでは今日も始まり始まり～！

----------------------------------------------------------------------
今回の紹介するものは「画像の扱い方」

画像についての説明は必要ないと思うので、早速本題に入ります。

画像をHPで表示するためには<img>タグを使用します。
最低限必要なhtmlタグ書き方は以下のような書き方です。

　『<img src="ここに画像へのパス名">』

これさえ書いておけば、HPで画像を表示することはできます。
ただ、それだけではHPを見る人にとってはちょっと不便なところもあります。
そこで、第５回目で説明した「alt属性」を使用すると、画像の説明など書ける
のでわかりやすくなります。
そのhtmlタグの書き方は以下のような書き方です。
(詳しいことは第５回目「alt属性」を見るほうが良いと思いますが、一応書いておきます)

　『<img src="ここに画像へのパス名" alt="代わりに表示される文字">』

このhtmlタグの書き方で見る分には非常に良いものになっています。
しかし、HPを表示することだけを考えると、このhtmlタグの書き方ではまだまだ物足りないです。
というのは、<img>タグはサイズを初めに指定できるようになっています。
そのhtmlタグの書き方は以下のような書き方です。

　『<img src="ここに画像へのパス名" alt="代わりに表示される文字"
　　　width="画像の横幅のサイズ" height="画像の高さのサイズ">』

こう書くことで、HPを表示する時間を短縮できるものになっています。

「width， height」属性が実際にどういった機能であるかというと・・・
「width， height」で指定しておけば、HPを表示する時に先にその分のスペースを
取ってくれるようになります。

イメージとしては、以下のような感じになります。
(ここでは画像のスペースがわかるように、わざと画像を表示されない状態にしています)
======================================================================
(「width， height」属性を指定しない場合)



(「width， height」属性を指定した場合)



======================================================================

これは、画像を１つだけ表示する場合には、サイズを初めに指定しても指定しなくても、
それ程はっきりとした差はないかもしれません。
しかし、画像を100枚単位で表示する場合には、はっきりとした時間差が出てきます。

最近はADSLなどの高速回線と呼ばれるものでインターネットを利用している人が多いですが、
まだまだアナログ回線と呼ばれる遅い回線を利用している人が多いことも事実です。
そういったHPを表示するのが遅い人のために、HPを作る側が少し工夫するだけで、
HPを見る人にとってかなり便利になります。

画像を使用する場合には、今回紹介したものを活用していってほしいです。

----------------------------------------------------------------------

(雑談)
今回は本家HP広島オフ会のために１週間延期となりました。
さすがに帰ってきた日に書く体力がなかったもんで・・・

さて、次回についてですが、今のところ2003/04/27を予定しています。
これから３週間は、資格試験の勉強のために一旦休ませていただきます。
試験終了後に、新ネタを用意しておきます。
しばらくの間、お待ち下さい。

それでは2003/04/27に続く～！