<img> - イメージ

トップ > HTMLリファレンス > <img>

概要

項目説明
形式<img src="...">
サポートH2 / e2 / Ch1 / Fx1 / Sa1 / Op1 / N2 / i1
カテゴリフローコンテンツ, フレージングコンテンツ, エンベデッドコンテンツ, フォーム関連要素,
インタラクティブコンテンツ(usemap属性有の場合), パルパブルコンテンツ
親要素エンベデッドコンテンツ を子要素に持てるもの
子要素無し(Empty)
タグの省略開始タグ:必須 / 終了タグ:無し

説明

img は IMaGe(画像)の略です。src 属性には、GIF形式(*.gif)、JPEG形式(.jpg)、PNG形式(*.png)などの画像ファイルを指定します。

HTML4.01 では、画像を表示できないブラウザや、文字は音声に変換して読めても画像を見ることのできない人のために、<img> タグには alt 属性が必須とされていましたが、HTML5 では必須ではなくなるようです。

必須属性ではありませんが、height と width 属性も極力指定するようにしましょう。これらを指定しないと、ブラウザがページを表示する際に、画像を読み込む度に画面全体のレイアウトが変更されてしまい、ページ表示の体感速度が遅くなってしまいます。

属性

【重要属性】
属性意味
src=urlH5/e2/Ch/Fx/Sa/Op/N2/i1。表示する画像ファイルを指定します。これは必須属性です。
alt=altH2/e2/Ch/Fx/Sa/Op/N2/i1。画像の代わりに表示される文字列を指定します。画像を表示できない(表示しない)ブラウザを考慮し、HTML4.01 では必須の属性として定義されています。
height=nH3/e2/Ch/Fx/Sa/Op/N2/i1。画像の高さをピクセルまたはパーセンテージで指定します。
width=nH3/e2/Ch/Fx/Sa/Op/N2/i1。画像の横幅をピクセルまたはパーセンテージで指定します。
【クリッカブルマップ関連属性】
属性意味
usemap=usemapH3/e2/Ch/Fx/Sa/Op/N2。クライアントサイドクリッカブルマップを実現するために用います。<map>を参照してください。
ismapH2/e2/Ch/Fx/Sa/Op/N2。サーバーサイドクリッカブルマップを実現する際に用います。
【固有属性】
属性意味
crossorigin=stateH5。CORS(Cross-Origin Resource Sharing)で使用される属性で、他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定します。
align=alignH2-H4T/e2/Ch/Fx/Sa/Op/N2/i1。表示位置を指定します。align="right" や align="left" を使用するとテキストが画像の周りを回りこんで表示されます。回り込みを解除するには <br clear=all> を用います。
hspace=nH3-H4T/e2/Ch/Fx/Sa/Op/N2/i1。画像の周りの横方向の余白をピクセル単位で指定します。
vspace=nH3-H4T/e2/Ch/Fx/Sa/Op/N2/i1。画像の周りの縦方向の余白をピクセル単位で指定します。
border=nH3-H4T/e2/Ch/Fx/Sa/Op/N2/i1。画像の周りの枠線をピクセルで指定します。画像を <a href="...">~</a>で囲むと自動的に枠線が表示されますが、border=0 とすればこれを消すことができます。
galleryimg=boole6。200×200 以上の画像にマウスを乗せた時に表示されるイメージツールバー(印刷、保存機能など)を表示しないようにします。<meta> で一括指定することも可能です。
longdesc=urlH4-4。このフレームに対する説明が title 属性で示せないくらい長文の場合に、その説明ページの URL を指定します。
lowsrc=urle4/N2。画像が表示されるまでのいらいらを解消するために、転送中は lowsrc で指定した荒い(サイズの小さい)画像を表示し、転送がすべて完了した時点で src で指定した通常の画像を表示するようにします。
suppress=suppressN4。suppress は抑圧という意味です。省略時の値は false ですが、true を指定すると、画像のダウンロード中に、代替アイコンの代わりにツールチップが表示されるようになります。
name=nameH4/e4/N3。名前を指定します。
【動画関連属性】
属性意味
controlse2-e3。動画の下部に再生制御用のコントロールを表示します。IE4.0 では廃止されました。
dynsrc=urle2。動画ファイル(*.avi)を指定します。<embed><object> タグもありますので、現在ではあまり利用されていません。
loop=ne2。再生回数を指定します。loop=infinite を指定すると無限に繰り返します。
start=starte2。fileopen を指定するとページを表示するとすぐに再生が始まります。mouseover を指定するとマウスが動画の上にきた時点で再生が始まります。
【データバインド関連属性】
属性意味
datafld=dataflde4-?。データバインド機能を用いる際の、データソースの列名を指定します。
datasrc=datasrce4-?。データバインド機能を用いる際の、データソースの ID を指定します。
【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

HTML
 <img src="image/sample.gif" alt="イラスト2" width=100 height=100>
表示
イラスト2

テクニック


Copyright (C) 1996-2015 杜甫々
初版:1996年9月10日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/img.htm