CSS

画像タグ

<IMG>

【説 明】

「SRC=」で指定したURLの画像を表示します。表示できる画像フォーマットは、「GIF」「JPEG」「Progressive JPEG」「PNG(★4.04)」「XPM」「XBM」です。

GIF 形式では256色以下しか表示することができませんが、透明化やインターレース(じわじわと表示される)がサポートされています。圧縮方式は可逆圧縮です。

JPEG 形式はフルカラーで圧縮率も高いのですが、小さな画像の場合は逆にデータ量が増える場合があります。 Progressive JPEG 形式は JPEG 形式を進化させたもので、高速で高品質な表示と、スムーズで高速なインターレースがサポートされています。圧縮方式は非可逆圧縮です。

PNG 形式は Navigator 4.04 からサポートされた、GIF 形式を発展させた形式です。GIF よりも圧縮率が高く、48 bit までのカラーと16 bit までのグレースケールをサポートしています。透明化やインターレースもサポートしていますが、アニメーションはサポートされていません。圧縮方式は可逆圧縮です。

・SRC="url"
 「url」には、画像ファイルのURLを指定します。

・ALT="画像を表わすテキスト"
 「画像を表わすテキスト」には、ユーザーが画像の表示できないブラウザを使用した場合や、ロードを途中で止めた場合に、画像の代わりに表示させる文字を記述します。また4.0以降の新しいブラウザでは、画像のロード前や、ロード後にマウスカーソルが画像の上に行った時にも表示される場合があります。

・WIDTH="幅"
 「幅」は、ピクセル数またはパーセントで指定します。「高さ」とともに指定しておくと、画像の表示位置が先に決定されますので、HTMLソースのそれ以下の部分を画像が完全にロードされる前に表示することができます。

・HEIGHT="高さ"
 「高さ」は、ピクセル数またはパーセントで指定します。「幅」とともに指定しておくと、画像の表示位置が先に決定されますので、HTMLソースのそれ以下の部分を画像が完全にロードされる前に表示することができます。

・BORDER="枠の太さ"
 「枠の太さ」には、画像のまわりに表示される枠の太さを指定します。画像をリンクするように指定すると勝手に枠が表示されますが、0 を指定することで消すことができます。

・ALIGN="位置"
 「位置」には、 left ・ right ・ top ・ texttop ・ middle ・ absmiddle ・ baseline ・ bottom ・ absbottom が指定できます。

・VSPACE="縦スペース"
 「縦スペース」には、回り込みテキストなどとの縦方向の間隔をピクセル数で指定します。

・HSPACE="横スペース"
 「横スペース」には、回り込みテキストなどとの横方向の間隔をピクセル数で指定します。

・LOWSRC="軽い画像のurl"
 「軽い画像のurl」には、「SRC=」で最終的に表示する画像の前に、(本来は)とりあえず表示させておくデータ量の少ない画像のURLを指定します。つまり、2つの画像が切り替わる効果を出すことができます。ただし、一度キャッシュに読み込まれてしまうと、効果がでなくなります。

・USEMAP="url#マップ名"
 「マップ名」には、クライアント・サイド・イメージマップで使用するマップ名を指定します。マップ名は、 <MAP> タグの「NAME=」で指定される値で、その書式は <A> タグの「HREF=」の指定方法と同様です。

・NAME="画像の名前"
 「画像の名前」には、JavaScriptでこの画像を参照する場合の名前を指定します。

【使用例】

<IMG SRC="river.gif" ALT="The PongChing River" WIDTH=63 HEIGHT=83>

The PongChing River



<IMG SRC="river.gif" ALT="The PongChing River" WIDTH=80% HEIGHT=83>

The PongChing River



<A HREF="#PAGETOP">
<IMG SRC="river.gif" BORDER="0" WIDTH=63 HEIGHT=83>
<IMG SRC="river.gif" WIDTH=63 HEIGHT=83>
<IMG SRC="river.gif" BORDER="4" WIDTH=63 HEIGHT=83>
</A>



<IMG SRC="river.gif" ALIGN="left" WIDTH=63 HEIGHT=83>
北海道には<BR>
こんな名前の川があります。
<BR CLEAR="left">
いいんでないかい。

北海道には
こんな名前の川があります。
いいんでないかい。



<IMG SRC="river.gif" ALIGN="left" VSPACE=20 HSPACE=40 WIDTH=63 HEIGHT=83>
北海道には<BR>
こんな名前の川があります。
<BR CLEAR="left">
いいんでないかい。

北海道には
こんな名前の川があります。
いいんでないかい。



<IMG SRC="river.gif" ALIGN="right" WIDTH=63 HEIGHT=83>
北海道には<BR>
こんな名前の川があります。
<BR CLEAR="right">
いいんでないかい。

北海道には
こんな名前の川があります。
いいんでないかい。



<IMG SRC="river.gif" ALIGN="left" WIDTH=63 HEIGHT=83>
<IMG SRC="river.gif" ALIGN="right" WIDTH=63 HEIGHT=83>
北海道には<BR>
こんな川があります。
<BR CLEAR="all">
いいんでないかい。

北海道には
こんな川があります。
いいんでないかい。



北海道の川 <IMG SRC="river.gif" ALIGN="top" WIDTH=63 HEIGHT=83>

北海道の川

※ALIGN="top"を指定した場合は、一番高さのあるものの上に合わせます。



北海道の川 <IMG SRC="river.gif" ALIGN="texttop" WIDTH=63 HEIGHT=83>

北海道の川

※ALIGN="texttop"を指定した場合は、一番高さのある文字の上に合わせます。



北海道の川 <IMG SRC="river.gif" ALIGN="middle" WIDTH=63 HEIGHT=83>

北海道の川

※ALIGN="middle"を指定した場合は、画像の中心に文字のベースラインを合わせます。



北海道の川 <IMG SRC="river.gif" ALIGN="absmiddle" WIDTH=63 HEIGHT=83>

北海道の川

※ALIGN="absmiddle"を指定した場合は、画像の中心にラインの中心を合わせます。



北海道の川 <IMG SRC="river.gif" ALIGN="baseline" WIDTH=63 HEIGHT=83>

北海道の川

※ALIGN="baseline"を指定した場合は、画像の下を文字のベースラインに合わせます。



北海道の川 <IMG SRC="river.gif" ALIGN="bottom" WIDTH=63 HEIGHT=83>

北海道の川

※ALIGN="bottom"を指定した場合は、画像の下を文字のベースラインに合わせます。



北海道の川 <IMG SRC="river.gif" ALIGN="absbottom" WIDTH=63 HEIGHT=83>

北海道の川

※ALIGN="absbottom"を指定した場合は、画像の下をラインの下に合わせます。


<< PAGE TOP >>

<MAP> 〜 </MAP>

【説 明】

クライアントサイド・イメージ・マップのマップを定義します。この範囲内で <AREA> タグを用いてクリックに反応するエリアとリンク先を定義します。

・NAME="マップ名"
 「マップ名」は、 <IMG> タグの「USEMAP=」で指定するマップ名です。 <A> タグの「NAME=」と同様にマップに名前を付けます。

【使用例】

<MAP NAME="SMAP">

<AREA SHAPE="RECT" COORDS="8,8,47,47" HREF="#A1">

<AREA SHAPE="RECT" COORDS="58,8,97,47" HREF="#A2">

</MAP>

<IMG SRC="csimap.gif" BORDER=0 WIDTH=103 HEIGHT=53 USEMAP="#SMAP">


<< PAGE TOP >>

<AREA>

【説 明】

クライアントサイド・イメージ・マップのクリックに反応するエリアとリンク先を定義します。このタグは、<MAP>〜</MAP>の範囲内で使用します。 <AREA> タグでエリア指定した部分が、他のエリアと重なってしまった場合には、先に定義した方が優先されます。

・SHAPE="形状"
 「形状」には、RECT(四角形)・CIRCLE(円)・POLY または POLYGON(多角形/角は最大100まで)・DEFAULT(特に指定されていないエリア)が指定できます。 省略された場合は「RECT」が選択されたことになります。

・COORDS="形状の各座標"
 「形状の各座標」は、「SHAPE=」で指定した形状に合わせた形式で座標を指定します。

「RECT」の場合は、「左上のX座標」「左上のY座標」「右下のX座標」「右下のY座標」の4つの座標をカンマ(,)で区切って指定します。

「CIRCLE」の場合は、「中心のX座標」「中心のY座標」「半径」の3つの座標をカンマ(,)で区切って指定します。

「POLY」の場合は、すべての角の座標を「X座標」「Y座標」の順で指定します。

・HREF="url"
 「url」には、指定したエリアがクリックされた場合のリンク先を指定します。

・NOHREF
 指定したエリアがクリックされても、何も反応しないようにする指定です。

・TARGET="ウインドウ名"
 <A> タグと同様にリンク先を表示するウインドウ(フレーム)を指定することができます。

【使用例】

<MAP NAME="SMAP">

<AREA SHAPE="RECT" COORDS="8,8,47,47" HREF="#A3">

<AREA SHAPE="RECT" COORDS="58,8,97,47" HREF="#A4">

</MAP>

<IMG SRC="csimap.gif" BORDER=0 WIDTH=103 HEIGHT=53 USEMAP="#SMAP">


<< PAGE TOP >>

<< PAGE TOP >>

BACK UP 初心者でホームページを考えてられてる方へ

独自ネットショップや楽天ショップ・YAHOOショップ運営される初心者の方も、無料で、親切にアドバイスいたします。
SEO・月次更新・リニュアルetc

ホームページ制作の事なら

何でもお問合せください。

お問合せフォームはこちらから

ホームページ作成は京都のリュウム株式会社

京都市中京区橋弁慶町222番地
ヒライビル3階

TEL 075-257-4588
営業時間 AM10:00-PM7:00


CSS
Ryuumu