画像を表示する

画像を表示する

今回使うタグ
<IMG src="画像のアドレス" width="" height="" alt="">

単純に画像を表示させる場合は、<IMG src="画像のアドレス">のタグが

画像を表示させる最低限のタグです。

ちなみに、『src』は『source』の略で、ここを見れば元のファイルがあるよ！という意味です。

そんじゃ～画像のアドレスってどこに書いてあるの？って事になりますよね。

楽天では『画像倉庫(画像の登録管理)』から画像をクリックすると、

この画像を表示する：
下記のHTMLを利用すると、ホームページにこの画像を表示できます。
<IMG SRC="http://plaza.rakuten.co.jp/img/user/87/20/1128720/91.gif" width="67" height="73" alt="hiroba_run">

のように表示されていると思います。

ここの『SRC="』から『"』の間に書いてあるのが画像のアドレスなのです。

上ので言うと、『http://plaza.rakuten.co.jp/img/user/87/20/1128720/91.gif』が

画像のアドレスにあたります。

（当たり前ですが･･･楽天では画像を登録するごとに画像アドレスの一番最後の数字が増えていき、
途中でファイルを消しても番号が詰まる事はないようですね。）

アドレスとは住所という意味で、その画像が何処にあるか特定するために必要なのです。

では、楽天以外のページではどうやって画像のアドレスを見つけるのでしょうか？

既に楽天以外のページを持っていて、そこに画像が表示されている場合は簡単です。

その場合は、表示されている画像の上で右クリックし、『プロパティ』を見てください。

『アドレス』という部分がありますよね。
これが画像のアドレスなのです。

その他の判別方法は、各ＨＰサービスのヘルプを参照したり、

何がなんだか良く分からないけど、とりあえず画像が表示されたという場合（アルバム等）は、

画像を表示させた後に、上の右クリック方法を行えば分かると思います。

少し話が脱線しますが･･･
上の画像に書いてある画像アドレスの拡張子（ファイル名『 . 』（ドット）以下のアルファベット３文字）は
『.gif』ですが、ＨＰに使える画像形式は、現在のところGIF・JPEG・PNGの３種類です。これらは
楽天『画像の倉庫』へ保存できますが、それぞれの形式の説明は『GIF・JPEG・PNGってなに？』を参考にしてください。

次に『width=""』、『height=""』、『alt=""』の説明をしましょう。

width=""	…	画像の横の長さ
height=""	…	画像の縦の長さ
alt=""	…	画像のコメント

説明を簡単に書くと上の説明で終わりですが、せっかくですから上にも挙げたタグを使って

詳しく説明します。

説明を簡単にするために、

『http://plaza.rakuten.co.jp/img/user/87/20/1128720/91.gif』を

『画像のアドレス』とします。

すると、上の白い背景部分のタグは

<IMG src="画像のアドレス" width="67" height="73" alt="hiroba_run">となりますね。

そして、実際の表示は右のようになります。

今度は縦と横を倍にしてみましょう。実際に書くタグは

<IMG src="画像のアドレス" width="134" height="146" alt="hiroba_run">です。

画像を倍の大きさにしたために、

多少荒くなりますが大きくなったでしょ。

逆に小さくすると、色がつぶれる場合があります。

ちなみに、『width=""』や『height=""』を指定しないと

画像を登録した時の大きさになります。

また、縦・横のどちらかを倍にして、片方を省略しても倍に表示されます。

最後に『alt=""』ですが、これはマウスを画像の上に乗せた時に出てくるコメントです。

正確に書くと、何らかのアクシデントで画像が表示されない場合に

画像の変わりに表示させるコメントです。

試しに、下に３つ画像を並べますので確認してください。

これは『hiroba_run』が表示されます。

<IMG src="画像のアドレス" width="67" height="73" alt="hiroba_run">

これは何も表示されません。

<IMG src="画像のアドレス" width="67" height="73">

画像が表示されない場合のコメント『hiroba_run』が表示されます。
（ただし、画像サイズが小さい場合は全てのコメント文字は表示されません。）

<IMG src="適当な文字" width="67" height="73" alt="hiroba_run">

どうでっか？マウスを乗せるとコメントが表示されへん！？