img要素

img要素 画像を表示する インライン要素

デジカメでとった写真やイラストや地図などの画像を表示します。指定できる画像形式はjpg gif png
src属性とalt属性は必要、src属性は画像のurlを指定します。 alt属性は画像が表示されなかった場合に表示される代替テキストです。

<img src="a.gif" alt="代替文字">

xhtmlの場合img要素の後ろに半角スペースと/を入れます。

<img src="a.gif" alt="代替文字" />

width属性とheight属性で画像の横幅と縦の長さを指定

<img src="a.gif" alt="代替文字" width="88" height="31">

画像をリンクとして使う場合

<a href="index.html"><img src="a.gif" alt="代替文字"></a>

img要素に指定できる属性

src属性・・・画像のurlを指定
alt属性・・・画像が表示されなかった場合に表示される代替テキスト
width属性・・・画像の横の長さを指定します。値にはピクセルをあらわす整数かパーセント
height属性・・・画像の高さを指定します。値にはピクセルをあらわす整数かパーセント

cssでデザインを指定する場合

html ※クラス名は好きなように変更してください

<img class="a" src="a.gif" alt="代替文字">

css

画像の回り込み

画像を回り込ませることができます。この場合は左に回り込みます
値にはleft（左寄せ）、right（右寄せ）、none（左右の配置と回り込みをしない）

img.a { float: left; }

画像に対しての文章の配置

値にはmiddle（中央揃え）、top（上揃え）、bottom（下揃え）

img.a { vertical-align: top; }

画像周りの余白

marginプロパティを使って画像の周囲に余白をつくります。 値には長さが入ります。
値が4つだと1つ目が上、2つ目が右、3つ目が下、4つ目が左を指定します

img.a { margin: 0 1em 1pt 1ex; }

画像の枠線をなくす

画像にリンクを貼ると枠線ができてしまうのでその枠線をなくす場合の指定

img.a { border-style: none;}

共通属性

指定できる共通属性

id属性 class属性 style属性 title属性 lang属性 dir属性

イベント属性

イベント属性