img要素

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

また、img要素は内容を持たない空要素のためXHTML1.0では />のように半角スペースに続けてスラッシュ( / )を記述し終了タグとします。

例)

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

コスモス


alt属性

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

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


width属性、height属性

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

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

例)

width: 150px;
height: 225px;


borderプロパティ

borderプロパティは画像に枠を表示します。borderプロパティの指定が無い場合は通常、枠線は表示されませんが画像にリンクを指定した場合は枠線が表示される事があります。この場合、枠線が必要無ければ、border-styleプロパティに「none」を指定します。

例)

<img src="img/img_001.jpg" alt="コスモス" width="150" height="225" style="border-style: none; />

borderプロパティ


画像とテキストの回り込み floatプロパティ

floatプロパティの値にleft rightを指定する事でテキストを回り込ませる位置を指定できます。

値)

clearプロパティ
br要素にclearプロパティを指定することで途中で回り込みを解除することができます。

値)

例)

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

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


例)

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

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


floatプロパティ , clearプロパティ

画像とテキストの上下位置 vertical-alignプロパティ

vertical-alignプロパティの値に以下の値を指定する事でテキストと画像の上下方向の揃え方を指定できます。また、指定しない場合の初期値はbaselineです。

例)

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

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


vertical-alignプロパティ


画像の余白 marginプロパティ

marginプロパティで画像の余白を指定します。

例)

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

コスモス

marginプロパティ


ページトップへ戻る



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


inserted by FC2 system