HTMLリファレンスマニュアル

HTMLタグ完全ガイド

HTML: <img> タグ

HTML <img>タグはHTMLドキュメントで画像を定義します。このタグは通常<img>要素とも呼ばれます。

オンラインサンプル

画像をどうやって挿入するか：

例

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<img　src="pig.gif"　alt="pig　face"　width="32"　height="32">
</body>
</html>

テストをしてみる ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

すべての主要ブラウザは<img>タグをサポートしています。

画像のaltとtitle属性の違い：

画像のalt属性は、画像が正常に表示されない場合に表示されるテキストヒントです。
画像のtitle属性は、マウスが要素に移動したときに表示されるテキストヒントです。

タグの定義及び使用方法

<img>タグはHTMLページ内の画像を定義します。

<img>タグには2つの必須属性があります：srcとalt。

<img>タグは、以下の画像形式をサポートする可能性があります（ブラウザによって異なります）：jpeg、gif、png、apng、svg、bmp、bmp ico、png ico。

注釈：技術的には、画像はHTMLページに挿入されるのではなく、HTMLページにリンクされます。<img>タグの役割は、参照されている画像の占位符を作成することです。

ヒント：を含む<a>タグに<img>タグを埋め込むことで、画像に別のドキュメントへのリンクを追加します。

HTML 4.01 HTMLと5の違い

HTML5 では以下の属性をサポートしていません：align、border、hspace、longdesc、vspace。

HTML 4.01 では、以下の属性：align、border、hspace、vspaceが廃止されました。

HTMLとXHTMLの違い

HTMLでは、<img>タグには終了タグがありません。
XHTMLでは、<img>タグを正しく閉じる必要があります。

属性

New　：HTML5 に新しい属性が追加されました。

属性	値	説明
align	top 　bottom 　middle 　left 　right	HTML5 サポートされていません。HTML 4.01 廃止されました。　　画像を周囲のテキストに基づいてどのように配置するかを指定します。
alt	text	画像の代替テキストを指定します。
border	ピクセル	HTML5 サポートされていません。HTML 4.01 廃止されました。　　画像の周囲の枠を指定します。
crossoriginHTML5	anonymous use-credentials	画像のクロスドメイン属性を設定します。
height	ピクセル	画像の高さを指定します。
hspace	ピクセル	HTML5 サポートされていません。HTML 4.01 廃止されました。　　画像の左側と右側の余白を指定します。
ismap	ismap	画像をサーバー側イメージマップとして指定します。
longdesc	URL	HTML5 サポートされていません。HTML 4.01 廃止されました。　　長い画像の説明を含むドキュメントを含むURLを指します。
src	URL	画像を表示するURLを指定します。
usemap	#mapname	画像をクライアント側イメージマップとして定義します。
vspace	ピクセル	HTML5 サポートされていません。HTML 4.01 廃止されました。　　画像の上側と下側の余白を指定します。
width	ピクセル	画像の幅を指定します。

グローバル属性

<img> タグがサポート HTMLのグローバル属性。

イベント属性

<img> タグがサポート HTMLのイベント属性。

オンラインサンプルを試してみてください。

画像の配置
このサンプルでは、テキスト内に画像を配置する方法を示しています。

浮遊画像
このサンプルでは、画像を段落の左側または右側に浮遊させる方法を示しています。

イメージリンクの設定
このサンプルでは、イメージをリンクとして使用する方法を示しています。

イメージマップの作成
このサンプルでは、クリック可能なエリアを持つイメージマップの作成方法を示しています。各エリアはリンクです。

HTML チュートリアル：HTML イメージ

HTML DOM リファレンスマニュアル： Image オブジェクト

HTML: <input> タグ HTML: <iframe> タグ