基本タグ（５）イメージ






ここでは、イメージに関するタグの説明をしていきます。
サンプルを付けておきますので、実際どうなるか試してみてください。

●イメージを使いたい
イメージを表示するためには、<IMG SRC="★">タグを使います。
このタグが基本のタグとなります。
★の所には、イメージファイル名（URL)が入ります。
ここで指定したイメージを表示します。
（サンプル）

<HTML>

<HEAD>
<TITLE>イメージを使いたい</TITLE>
</HEAD>

<BODY>
では、イメージを貼り付けてみましょう。<P>

<IMG SRC="http://fukazu.s19.xrea.com/sozai/lion2.gif"><P>

<IMG SRC="http://fukazu.s19.xrea.com/sozai/lion3.gif">
</BODY>

</HTML>


●イメージが表示されない時にテキストで対応したい
イメージをサポートしてないブラウザや、イメージが表示されない場合のために、
代わりに表示されるテキストを指定するには<IMG SRC="★" ALT="☆">
タグを使います。
★の所には、イメージファイル名（URL)を、☆の所には、代わりに表示される
テキストを指定します。
また、ALTオプションをつけておくと、イメージが表示されている場合でも
されていない場合でも、マウスポインターをイメージのとこに持っていくことで、
入力したテキストの内容が表示されます。
（サンプル）

<HTML>

<HEAD>
<TITLE>イメージが表示されない時にテキストで対応したい</TITLE>
</HEAD>

<BODY>
では、イメージが表示されない状態で見てみましょう。<P>

<IMG SRC="lion2.gif" ALT="ライオン画像です"><P>

<IMG SRC="lion3.gif" ALT="こんな感じです">
</BODY>

</HTML>


●イメージの大きさを変えたい
イメージを表示させるにあたってサイズを指定したい場合は
<IMG SRC="★" WIDTH="☆" HEIGHT="◆">タグを使います。
★の所は、イメージファイル名（URL)を、☆の所は横幅のピクセル数または%を、
◆の所は、縦幅のピクセル数または%を入れます。
ピクセル数は、イメージに対する絶対的な大きさを指定するため、
どんなスクリーンでも同じ大きさになります。
これに対し、%はウインドウの大きさに対する割合（比率）を指定するものです。
従って、イメージの大きさは相対的になり、ウインドウの大きさに左右されます。
（サンプル）

<HTML>

<HEAD>
<TITLE>イメージの大きさを変えたい</TITLE>
</HEAD>

<BODY>
<CENTER>
<IMG SRC="http://fukazu.s19.xrea.com/sozai/lion2.gif"
 WIDTH="60" HEIGHT="120">
<IMG SRC="http://fukazu.s19.xrea.com/sozai/lion2.gif"
 WIDTH="40%" HEIGHT="30%"><P>

<IMG SRC="http://fukazu.s19.xrea.com/sozai/lion2.gif"
 WIDTH="30" HEIGHT="15%">
<IMG SRC="http://fukazu.s19.xrea.com/sozai/lion2.gif"
 WIDTH="50"><P>
</CENTER>
</BODY>

</HTML>


●境界線を引きたい
通常イメージには境界線は引かれませんが、境界線を設定したい場合には、
<IMG SRC="★" BORDER="☆">タグを使います。
★の所は、イメージファイル名（URL)を、☆の所は境界線の太さ（ピクセル数）を入れます。
BORDERオプションを使って境界線の太さを指定する事により、
イメージに境界線を描いたり変更したりできるようになります。
ピクセル数に0を指定すると、境界線は表示されません。
（サンプル）

<HTML>

<HEAD>
<TITLE>境界線を引きたい</TITLE>
</HEAD>

<BODY>
<CENTER>
<IMG SRC="http://fukazu.s19.xrea.com/sozai/lion2.gif"
 BORDER="0">
<IMG SRC="http://fukazu.s19.xrea.com/sozai/lion2.gif"
 BORDER="1"><P>

<IMG SRC="http://fukazu.s19.xrea.com/sozai/lion2.gif"
 BORDER="5">
<IMG SRC="http://fukazu.s19.xrea.com/sozai/lion2.gif"
 BORDER="10">
</CENTER>
</BODY>

</HTML>


●イメージとテキストの並べ方を指定したい
<IMG SRC="★" ALIGN="☆">タグを使うと、
イメージと前後のテキストとの結び付けを指定する事が出来ます。
★の所は、イメージファイル名（URL)を、☆の所はTOPを指定すると
イメージの上部に、MIDDLE（もしくはCENTER）を指定するとイメージの中央に、
BOTTOMを指定すると、下部に合わせて並びます。
ALIGNオプションを使わなくてもテキストを並べる事は出来ますが、
この場合には、BOTTOMを指定した時と同じ結果になります。
（サンプル）

<HTML>

<HEAD>
<TITLE>イメージとテキストの並べ方を指定したい</TITLE>
</HEAD>

<BODY>
<IMG SRC="http://fukazu.s19.xrea.com/sozai/lion2.gif"
 ALIGN="TOP"> TOPを指定。<P>

<IMG SRC="http://fukazu.s19.xrea.com/sozai/lion2.gif"
 ALIGN="MIDDLE"> MIDDLEを指定。<P>

<IMG SRC="http://fukazu.s19.xrea.com/sozai/lion2.gif"
 ALIGN="CENTER"> CENTERを指定。<P>

<IMG SRC="http://fukazu.s19.xrea.com/sozai/lion2.gif"
 ALIGN="BOTTOM"> BOTTOM（標準）を指定。<P>

</BODY>

</HTML>







【ＨＯＭＥ】 / 【ＭＥＮＵ】 / 【ＮＥＸＴ】 / 【ＢＡＣＫ】