img要素

img要素は画像ファイルを、ページ上に表示します。src属性の値にGIF、JPEG、BMP、PNG形式の画像ファイルの場所とファイル名を相対URI、または絶対URIで指定します。alt属性には画像ファイルの代替テキストを指定し、width属性、height属性には画像ファイルの横幅と高さをピクセル、またはパーセンテージ値( % )で指定します。

また、img要素は内容を持たない空要素のためHTML4.01では終了タグがありません。

例)

<img src="img/img_001.jpg" alt="コスモス" width="150" height="225">

コスモス


alt属性

img要素をページに使用する場合、alt属性の指定が必須です。代替テキストとは、訪問者が何らかの原因で指定した画像ファイルが読み込めない、または画像の表示に対応していない環境でブラウジングする場合の画像ファイルの内容を代替する短い文章です。

また、意味を持たない画像(ホームページの装飾などデザイン上に使用する画像)は、alt="" と、属性値を空にして記述する事が推奨されています。


width属性、height属性

width属性と height属性は必須の属性ではありませんが、指定するようにしましょう。訪問者のブラウザがページを読み込む際、予め画像サイズを指定しておけば、画像の読み込みを待たずに、画像サイズ分の領域を開け、先に他の要素を読み込む事が出来ます。

※代替指定
width属性とheight属性はそれぞれスタイルシートのwidthプロパティとheightプロパティで代替指定できます。

例)

width: 270px;
height: 30px;


border属性(非推奨)

border属性は画像に枠を表示します。border属性の指定が無い場合は通常、枠線は表示されませんが画像にリンクを指定した場合は枠線が表示される事があります。この場合、枠線が必要無ければ、border属性値に「0」を指定します。

例)

<img src="img/img_001.jpg" alt="コスモス" width="150" height="225" border="0">

※代替指定
border属性はスタイルシートのborder-widthプロパティで代替指定する事が推奨されています。

border-width: 0px;


画像とテキストの回り込み align属性(非推奨)

align属性値にleft rightを指定する事でテキストを回り込ませる位置を指定できます。

値)

clear属性(非推奨)
br要素にclear属性を指定することで途中で回り込みを解除することができます。

値)

例)

<img src="img/img_001.jpg" alt="コスモス" width="80" height="120" align="left">○○○○○○○○○○○○○○○○○○○○
<br clear="all">

コスモス○○○○○○○○○○○○○○○○○○○○


例)

<img src="img/img_001.jpg" alt="コスモス" width="80" height="120" align="left">○○○○○○○○○○○<br clear="all">○○○○○○○○○

コスモス○○○○○○○○○○○
○○○○○○○○○

※代替指定
align属性の左右の回り込みはスタイルシートのfloatプロパティで代替指定する事が推奨されています。
clear属性はスタイルシートのclearプロパティで代替指定する事が推奨されています。

例)

<img src="img/img_001.jpg" alt="コスモス" width="80" height="120" style="float: left;">○○○○○○○○○○○<br style="clear: both;">○○○○○○○○○

画像とテキストの上下位置 align属性(非推奨)

align属性値に以下の値を指定する事でテキストと画像の上下方向の揃え方を指定できます。また、指定しない場合の初期値はbottomです。

例)

<img src="img/img_001.jpg" alt="コスモス" width="80" height="120" align="middle">○○○○○○○○○○○

コスモス○○○○○○○○○○○

※代替指定
align属性はスタイルシートのvertical-alignプロパティで代替指定する事が推奨されています。

例)

<img src="img/img_001.jpg" alt="コスモス" width="80" height="120" style="vertical-align: middle;">○○○○○○○○○○○


画像の余白 hspace属性 vspace属性

hspace属性は画像の左右の余白、vspace属性は画像の上下の余白を指定します。値の単位はピクセルです。

例)

<img src="img/img_001.jpg" alt="コスモス" width="80" height="120" hspace="10" vspace="10">

※代替指定
hspace属性、vspace属性スタイルシートのmarginプロパティで代替指定する事が推奨されています。

例)

<img src="img/img_001.jpg" alt="コスモス" width="80" height="120" style="margin: 10px 10px;">


ページトップへ戻る



RAWで撮ろうLife with a cameraLife with a camera 2


inserted by FC2 system