HTML4.0からは<IMG>のalt属性は必須。
WEBに使用できる画像形式はGIF・JPEG・PNGの3形式があります。
重要パラメーター
src="URI"
画像のURIを相対パス・絶対パスのいずれかで指定。
width="n" height="n"
画像の表示サイズを幅(width)と高さ(height)を指定。可能な限り設定することが推奨されています。
title="xxx"
画像に関する説明を記述。マウスオーバーさせた場合に表示されます。
alt="xxx"
その画像が表示されない場合に置き換わるような情報を記載。
align="right/left"
表示位置を指定します。align="right" や align="left" を使用するとテキストが画像の周りを回りこんで表示されます。
border="n"
画像の周りの枠線をピクセルで指定。
画像に <a href="...">~</a>でリンクを設定すると枠線が表示されますが、border="0"で枠線を非表示にできます。
そのほかのパラメーター
galleryimg="bool"
IEなどで画像にマウスを乗せた時に表示されるツールバー(印刷、保存機能など)を表示しないようにします。
<meta> で一括指定することも可能。
hspace="n"
画像の左右の余白をピクセル単位で指定。
vspace="n"
画像の上下の余白をピクセル単位で指定。
lowsrc="url"
src属性で指定した画像が表示されるまで、指定したサイズの小さい画像を表示。
longdesc="url"
長文の説明の場合に、説明ページの URLを指定(title属性の代わり)。
サンプルコード
<img src="../../img/enoki5.jpg" width="200" height="126" title="犬の写真1" alt="散歩に行きたい" />
<a href="/http://web.shikaku-zukan.com/img/enoki3.jpg" target="_blank">
<img src="http://web.shikaku-zukan.com/img/enoki3.jpg" title="犬の写真2" alt="港の見える丘公園に散歩" />
</a>
<a href="/img/enoki4.gif" target="_blank">
<img border="0" src="/img/enoki4.gif" width="200" height="194" title="犬の写真3" alt="散歩につかれてお休み" align="right" />
</a>
HTMLの一般属性
属性 | 説明 |
class="~" | クラス名を指定。使用例 |
id="~" | IDを指定します。使用例 |
style="~" | スタイルシートを直接記述。使用例 |
title="~" | タイトルを指定します。 |
dir="ltr|rtl" | 文字の表示方向を指定。 ltr(左から右)、rtl(右から左) |
lang="~" | 言語を指定。日本語の場合は"ja" |