<画像>


HTML <img> タグ

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<img src="/upload/course/000/000/010/580977768651f670.gif" alt="Smiley face" width="42" height="42">

</body>
</html>

インスタンスの実行 »

[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します

ブラウザのサポート

1000.png

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

タグの定義と使用方法

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

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

注: 技術的に言えば、画像は HTML ページに挿入されるのではなく、HTML ページにリンクされます。 <img> タグは、参照された画像のプレースホルダーを作成します。

ヒント: <a> タグ内に <img> タグを入れ子にして、画像へのリンクを別のドキュメントに追加します。

HTML 4.01 と HTML5 の違い

次の属性は HTML5 ではサポートされていません: align、border、hspace、longdesc、vspace。

HTML 4.01 では、align、border、hspace、vspace の属性が非推奨になりました。

HTML と XHTML の違い

HTML では、<img> タグには終了タグがありません。

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

属性

New: HTML5 の新しい属性。

プロパティ値説明
整列top
下
真ん中
左
そうですね		HTML5はサポートされていません。 HTML 4.01 は非推奨になりました。 周囲のテキストに対して画像をどのように配置するかを指定します。
alttext 画像の代替テキストを指定します。
ボーダーピクセルHTML5はサポートされていません。 HTML 4.01 は非推奨になりました。 画像の周囲の境界線を指定します。
クロスオリジン新規匿名
use-credentials		画像のクロスドメイン属性を設定します
heightpixels画像の高さを指定します。
hspaceピクセルHTML5はサポートされていません。 HTML 4.01 は非推奨になりました。 画像の左右の余白を指定します。
ismapismapは、画像をサーバー側の画像マップとして指定します。
longdescURLHTML5はサポートされていません。 HTML 4.01 は非推奨になりました。 長い画像説明ドキュメントを含む URL を指します。
srcURL 画像を表示するURLを指定します。
usemap#mapnameは、イメージをクライアント側のイメージマップとして定義します。
vspaceピクセルHTML5はサポートされていません。 HTML 4.01 は非推奨になりました。 画像の上下の余白を指定します。
widthpixels 画像の幅を指定します。


グローバル属性

<img> タグは HTML グローバル属性をサポートします。

イベント属性

<img> タグは HTML イベント属性をサポートします。

Examples

試してみる - 例

別の場所から画像を挿入する
この例は、他のフォルダーまたはサーバーから Web ページに画像を表示する方法を示します。

例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>插入来自一个文件夹的图片:</p>
<img src="/upload/course/000/000/010/5809788beaca7942.gif" alt="Stickman" width="24" height="39">

<p>插入来自一个网站的图片::</p>
<img src="/upload/course/000/000/010/58043146a1da1979.jpg" alt="Lamp" width="15" height="15">

</body>
</html>

サンプルを実行する»

オンラインサンプルを表示するには、「サンプルを実行」ボタンをクリックしてください

画像リンクを作成する
この例は、画像をリンクとして使用する方法を示しています。

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>
一个图片链接:
<a href="http://www.w3cschool.cc">
<img src="/upload/course/000/000/010/5809791e1eef2805.gif" alt="Go to W3CSchool.cc!" width="42" height="42" border="0">
</a>
</p>

</body>
</html>

インスタンスを実行する»

オンラインインスタンスを表示するには、[インスタンスを実行]ボタンをクリックしてください

イメージマップを作成する
この例では、クリック可能な領域を持つイメージマップを作成する方法を示します。これらの各フィールドはハイパーリンクです。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</p>

<img src="/upload/course/000/000/010/580979883b949162.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

関連記事

HTMLチュートリアル: HTML画像

HTML DOMリファレンスマニュアル: 画像オブジェクト