カスタム検索

<img>タグ

<img>タグの機能と属性
機能 画像を配置する
属性 HTML-4.01 コア 言語 イベント  src  alt  longdesc  name  height  width  usemap  ismap  
XHTML-1.0 コア 言語 イベント  src  alt  longdesc  height  width  usemap  ismap  
備考 空要素

<img>タグは画像を配置します。開始タグと終了タグで囲む要素がない「空要素」なので、ほとんどの場合、省略形である<img />と記述されます。

src属性

画像ファイルが保存されている場所(パス)を指定します。この属性は必須となります。指定するパスは絶対パス、相対パスのどちらでも構いません。

alt属性

画像のかわりに表示されるテキストを指定します。ブラウザで画像が表示されないときや、画像を表示させないように設定されている場合、このテキストが表示されます。ブラウザによっては、画像にマウスポインタを重ねるとポップアップ表示するものもあります。画像を使用する場合はこのalt属性も記述しておくようにしましょう。

img.html
<html>
    <head>
        <title>&lt;img&gt;タグの例</title>
    </head>
    <body>
        <img src="/images/example/img_sample.gif" alt="マスコットキャラクター画像" />
    </body>
</html>

longdesc属性

alt属性と同様の機能ですが、より長い説明文を指定する際に使用します。ただし、サポートしているブラウザはほとんどありません。

height属性、width属性

height属性とwidth属性を使用すると、画像の大きさを変更することができます。height属性は画像の高さ(縦)を、width属性は幅(横)を指定します。height属性とwidth属性のどちらか一方のみを指定すると、縦横比を保ったまま拡大/縮小表示します。

img2.html
<html>
    <head>
        <title>&lt;img&gt;タグの例</title>
    </head>
    <body>
        <img src="/images/example/img_sample.gif" alt="マスコットキャラクター画像" />
        <img src="/images/example/img_sample.gif" alt="マスコットキャラクター画像" height="200px" />
        <img src="/images/example/img_sample.gif" alt="マスコットキャラクター画像" width="50px" />
        <img src="/images/example/img_sample.gif" alt="マスコットキャラクター画像" height="50px" width="200px" />
        <img src="/images/example/img_sample.gif" alt="マスコットキャラクター画像" width="10%" width="10%" />
    </body>
</html>

CSSを使用すれば、このheight属性、width属性と同等のことが可能です。画像の大きさを変更することは表示スタイルに関することなので、なるべくCSSを使用するようにしてください。

usemap属性、ismap属性

usemap属性とismap属性は、この<img>タグで配置されている画像がイメージマップ用の画像であることを指定します(イメージマップと、その使用例については、<map>タグを参照してください)。

usemap属性

usemap属性によるイメージマップの指定はブラウザによって処理されるイメージマップ(クライアントサイドイメージマップという)であることを意味します。この方法によるイメージマップは、<map>タグによって定義されます。

usemap属性の値には、参照する<map>タグのパス(名前)を指定しますが、通常、同じページ内に<map>タグを記述するので、#を付けて、参照する<map>タグの名前(name属性の値)を記述しておきます。

ismap属性

ismap属性によるイメージマップの指定はサーバによって処理されるイメージマップ(サーバサイドイメージマップという)であることを意味します。どのような動作をするかは、サーバ側のプログラムに委ねられます。値にはismapを指定しておきます(「ismap="ismap"」と記述しておきます)。

name属性

name属性は、画像に名前を付けるために使用します。このname属性を使用するとプログラムによって画像の表示を操作するのに便利です。

CopyLeft 2021 Webデザインレッスン プライバシーポリシー サイト管理者に連絡