ＨＴＭＬ－画像－　　－ＨＴＭＬの基礎

画像

■画像の挿入の仕方

ここでは画像の表示方法や、文字列との位置関係、イメージマップの作り方を説明しています。このページに掲載しているタグは以下の通りです。

<img>　画像を表示する
<img>　文字列と画像の位置関係
<img>　２段階に分けて画像を表示する
<img>　イメージマップの作成方法

使用例
<img src="ファイル名" alt="代替文字"> <img src="ファイル名" alt="代替文字" width="画像の横幅" height="画像の縦幅" border="枠の幅" hspace="値" vspace="値">

属性	属性の値	解説
src	絶対パスor相対パスでファイル名を指定	指定されたファイルを表示
alt	画像の説明など	画像が表示されない時に変わりに表示される
width	ピクセル数or 比率（%）	画像の横幅
height	ピクセル数or 比率（%）	画像の縦幅
border	ピクセル数	画像の枠の幅
hspace	ピクセル数	画像の左右にマージンを設定
vspace	ピクセル数	画像の上下にマージンを設定

画像を表示する時は<img>のsrc属性で指定します。

widthとheightの画像の幅を比率で指定する方法は、ブラウザのウインドウ幅に対する比率を指定します。この場合、元の画像の縦横比は保持されません。

alt属性の代替文字は、なんらかの理由で画像が表示されなかった時に代わりに表示される文字です。画像の説明などを入れてください。

border属性は画像の枠線の太さを指定します。
画像にリンクを設定した場合、画像の枠線がリンクの色で表示されます。
この枠線を表示したくない時はborder属性で0を指定すると、
表示されなくなります。

PAGETOP

■文字列と画像の位置関係　<img>

通常、画像と文字列を挿入した場合、画像の横に１行だけ文字列が表示され、２行目以降の文字列は画像の下に表示されます。
画像の位置を指定し、文字列を回りこませたい場合は、align属性で指定します。

　　●文字列の回りこみの指定●

使用例
<img src="画像のファイル名" align="値">

属性	属性の値	解説
align	left right	画像の位置

align属性でleftを指定した場合、画像は左に表示され、文字列は右側に表示されます。またrightが指定された場合は、画像は右に表示され、文字列は左側に表示されます。画像の右・左側が文字列で埋まると、その後の文字列は画像のしたに表示されます。

また通常、画像の横に表示される文字列は、画像の下辺に揃えられるのですが、align属性で文字列が置かれる位置を指定する事が出来ます。

　　●文字列と画像の位置関係の指定●

使用例
<img src="画像のファイル名" align="値">

属性	属性の値	解説
align	top	画像の右・又は左の最上段に配置
	middle	画像の右・又は左の中央に配置
	bottom	画像の右・又は左の最下段に配置

このalign属性の位置の指定は、使用しているブラウザによっても多少表示が違ってきます。（大差はありません）　以下の画像をご覧下さい。

これは、WindowsとMacintoshでの、Internet Explorer^※と、 Netscape^※での表示例です。（実際はMacとWinではフォントなどが違います）
WindowsのIEの表示結果である、align属性のmiddleで中央の位置に指定された文字列だけがほんの少し表示結果が違うだけで、後は全て同じです。

もっとも、align属性の値は上にあげた以外に
　texttop　画像の上の部分と文字列の最上部を揃える
　absmiddle　画像の中央と文字列の中央部分を揃える
　baseline　画像の下の部分と文字列の下を揃える
　absbottom　画像の下の部分と文字列の最下部を揃える

がありますが、top middle bottomとほとんど表示結果は変わりませんし、 baselineとabsbottomの違いもほとんどないように思います。
一度試しに使ってみるのも良いでしょう。（私は試した事はありますが実際にウェブページを作る際に使った事はありません）

※ブラウザのバージョンによっても違います。

PAGETOP

■２段階に分けて画像を表示する　<img>

使用例
<img src="ファイル名１" lowsrc="ファイル名２">

属性	属性の値	解説
src （ファイル名１）	最後に表示される画像のファイル名	最終的に表示されるファイル
lowsrc （ファイル名２）	ファイルサイズの小さい画像のファイル名	一時的に表示されるファイル

常時接続が普及してきた今でも、まだまだ表示速度の遅い回線を使っているユーザーは多いでしょう。そうでなくても、サイズの大きい画像などはダウンロードしてブラウザに表示されるまでに時間がかかる事があります。

それまで間にも表示されなくてイライラしたり、不安になった方も少なからずいると思います。そのような時の対策として、２つの画像・・すぐに表示される小さいサイズの画像と、本来表示する目的の画像を用意しておき、サイズの小さい方から表示、次に目的の画像を表示させます。

lowsrc属性で、はじめに表示されるサイズの小さい画像ファイルを指定しておき、 src属性には目的の画像ファイルを指定します。

PAGETOP

■イメージマップを作成する　<img>

使用例
<img src="画像ファイル名" usemap="#マップ名"> <map name="マップ名"> <area shape="領域の形" coords="座標" href="ＵＲＬ" alt="文字"> </map>

属性	属性の値	解説
usemap	#マップ名	画像に名前をつけます
name	マップ名（usemapでつけた）	画像につけた名前を記述します
area shape	rect circle poly default	長方形・正方形円多角形全体
coords	領域座標をピクセル数で記述	指定された領域の形によって記述方法が異なる
href	ＵＲＬ	リンク先のＵＲＬ
alt	文字列	説明

例えば、挿入した１つの画像に、位置を指定して複数のリンクを貼りたい時などに <map></map>を使用してイメージマップを作成します。

まず、リンクを貼りたい画像を<img>で挿入し、その画像にusemap属性でマップ名を付けます。
そして、次に<area>のshape属性で領域の形を指定します。
領域の形を指定したら、coords属性で領域の座標（下表参照）をピクセル数で記述します。
そして、その指定した領域に張るリンクを、href属性にＵＲＬを記述して指定し、alt属性に説明を入れ、</map>を記述します。

　　●coords属性の記述の仕方●

coords属性の記述方法

PAGETOP

メール

質問メールがとても多くなった為、現在返信が遅れております。お返事が出来ていないものも沢山あり、今のところいつになるのか・必ず返信出来るのかどうかの保証が出来ません。申し訳ございませんが、その事をご理解いただいた上でご送信下さい。また、ここではHTMLの質問に関してのみ受け付けております。

メールはこちらから：ykrmain★★★eay.jp

PAGETOP

Webページ作成の為のＨＴＭＬを解説しています。★本サイトにはプロモーションが含まれています★

　Webページ作成の為のＨＴＭＬを解説しています。★本サイトにはプロモーションが含まれています★