HTML編 24/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
画像を表示する
画像に名前を付ける
画像に枠を付ける




画像に名前を付ける

●<IMG SRC="n" ALT="n">
先ほどリンク切れの画像を表示してみました。そこには画像アイコンが表示されていたと思います。「logo.jpg」やボタン画像のように、この画像が表示されないとページの意味をなさない物もあります。そのような画像にはALTオプションで名前を付けておくと、仮に表示されなかった時もテキストで内容が表示されますので、一応使い物になります。パラメータに表示させたい文字を入力します。

<IMG SRC="img/logo.jpg" ALT="Kimura's Room">

下の例はまたわざとパスを切って表示しています。ALTタグで指定した「Kimura's Room」が表示されていると思います。
またブラウザによってはマウスのポインタを画像の上に持っていくと、自動的にポップアップ表示でこの名前が出る物もあります。便利といえば便利ですが、ALTタグを忘れると空のポップアップが出てしまいちょっとマヌケですので、ALTタグは忘れないようにしましょう。もしポップアップさせたくない場合は、ALTタグを書かないのではなく、「ALT=""」とします。
View
<HTML>
<HEAD>
<TITLE>ようこそ!Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">

<CENTER>
<!--★★全体をセンターにするためのテーブル★★-->
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="97%" HEIGHT="97%">
<TR>
<TD ALIGN="center" VALIGN="middle">

<!--★★ここから内容★★-->
<H2>ようこそ!</H2>
<HR SIZE="5" WIDTH="321">

<!--★★ロゴ★★-->
<IMG SRC="logo.jpg" WIDTH="321" HEIGHT="42"
ALT="Kimura's Room"><BR>

<!--★★四角のグラデーション部分ここから★★-->
<FONT SIZE="2" COLOR="#0000ff">◆</FONT>
------略-------
<FONT SIZE="2" COLOR="#ff0000">◆</FONT>
<!--★★四角のグラデーション部分ここまで★★-->

<!--★★おしながきのテーブル★★-->
<TABLE BGCOLOR="#ffffff" BORDER="3" CELLPADDING="2" CELLSPACING="3">
<TR>
<TH BGCOLOR="#009933" COLSPAN="2"><FONT COLOR="#ffffff">おしながき</FONT></TH>
------略-------
<TD NOWRAP>●Enquete</TD>
<TD><FONT SIZE="2">アンケートにご協力ください。</FONT></TD>
</TR>
</TABLE>
<!--★★ここまで内容★★-->

<!--★★全体をセンターにするためのテーブルを閉じる★★-->
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>




画像に枠を付ける

●<IMG SRC="n" BORDER="n">
BORDERオプションを付けると画像に黒枠が表示されます。パラメータにピクセル数を指定することで、枠の幅は自由に変えられますが、残念ながら色は黒のみです。あとでリンクのページで触れますが、この画像に対してリンクを張った場合、BODYタグの中で指定したリンク色の枠になります。とはいえ画像にリンクを張る場合は、リンクボタン画像というケースがほとんどでしょうし、リンクを張らない画像は黒しか使えないのであまり使い道のないタグかも知れません。「logo.jpg」に3ピクセルの枠を付けてみます。

<IMG SRC="img/logo.jpg" WIDTH="321" HEIGHT="42" ALT="Kimura's Room" BORDER="3">

「◆」の下に「glasses.gif」というGIFアニメーション画像も配置しました。GIFアニメーションも普通のJPEG画像やGIF画像と同じ指定で配置できます。サイズはWIDTH="55" HEIGHT="25"です。ALTは「ぐるぐるメガネ」としました(笑)。GIFアニメーションは面白いのですが、あまり多用すると見づらくなったり、表示が重くなりますのでほどほどにしましょう。
またGIFアニメーションを作るときは、意味がないのでしたら無限ループで作らないようにすることをお勧めします。必ずというわけではないのですが、まれに無限ループのGIFアニメーションを読み込むと、ブラウザが暴走していつまでたっても読み込み続けることがあります。
View
<HTML>
<HEAD>
<TITLE>ようこそ!Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">

<CENTER>
<!--★★全体をセンターにするためのテーブル★★-->
<TABLE BORDER="0" ALIGN="center" CELLPADDING="0" CELLSPACING="0" WIDTH="97%" HEIGHT="97%">
<TR>
<TD ALIGN="center" VALIGN="middle">

<!--★★ここから内容★★-->
<H2>ようこそ!</H2>
<HR SIZE="5" WIDTH="321">

<!--★★ロゴ★★-->
<IMG SRC="img/logo.jpg" WIDTH="321" HEIGHT="42" ALT="Kimura's Room"
BORDER="3"><BR>

<!--★★四角のグラデーション部分ここから★★-->
<FONT SIZE="2" COLOR="#0000ff">◆</FONT>
------略-------
<FONT SIZE="2" COLOR="#ff0000">◆</FONT>
<!--★★四角のグラデーション部分ここまで★★-->
<BR><BR>

<!--★★GIFアニメーション画像★★-->
<IMG SRC="img/glasses.gif" WIDTH="55" HEIGHT="25" ALT="ぐるぐるメガネ" BORDER="0"><BR>

<!--★★おしながきのテーブル★★-->
<TABLE BGCOLOR="#ffffff" BORDER="3" CELLPADDING="2" CELLSPACING="3">
<TR>
<TH BGCOLOR="#009933" COLSPAN="2"><FONT COLOR="#ffffff">おしながき</FONT></TH>
------略-------
<TD NOWRAP>●Enquete</TD>
<TD><FONT SIZE="2">アンケートにご協力ください。</FONT></TD>
</TR>
</TABLE>
<!--★★ここまで内容★★-->

<!--★★全体をセンターにするためのテーブルを閉じる★★-->
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

backindexnext