cman.jpWEBページ作成
広告
<img> 「画像の表示」[読み方：イメージ]
<img>タグは、ページ内に小窓を設けそこに画像を表示する場合に使用します。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<img> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ フレージングコンテンツ エンベディッドコンテンツ インタラクティブコンテンツ(usemap属性を持つ場合) フォーム関連要素 パルバブルコンテンツ | エンベディッドコンテンツを子要素にもてる場所 | 無 | 終了タグ無 |
<img> の属性
【構文】
<img src="img.html" height="100" width="200"></img>
| 属性 | 意味 | 値のサンプルなど | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| src="URI" | 画像に表示するURI【必須】 | ../img.jpg | ||||||||||||
| alt="テキスト" | 画像が表示できない場合の代替テキスト | "画像の説明" | ||||||||||||
| height="高さ" | 画像の高さ（ピクセル値） | "200"（初期値：150） | ||||||||||||
| width="幅" | 画像の幅（ピクセル値） | "200"（初期値：300） | ||||||||||||
| border="太さ" | 画像の境界線幅 ※HTML5以降に廃止。指定不可。 | "0"（境界線なし）、"10" | ||||||||||||
| crossorigin="値" | CORS(Cross-Origin Resource Sharing)で 使用される属性。 他のサイトのリソースにアクセスする際に、 認証情報を使用するかどうかを指定 ※HTML5で追加 |
| ||||||||||||
| usemap="#名前" | <map>タグで使用する画像の関連付け | "#SAMPLE" | ||||||||||||
| ismap | サーバサイドイメージマップの場合に指定 | "ismap" | ||||||||||||
| name="固有名" | 画像に付ける固有名 ※HTML5で廃止。idで指定。 | "imgname" | ||||||||||||
| longdesc="URI" | 画像を説明するURI ※HTML5で廃止。指定不可。 | ../img.html | ||||||||||||
| hspace="余白幅" | 画像の左右余白（ピクセル） ※HTML5で廃止。スタイルシートで指定。 | "10" | ||||||||||||
| vspace="余白高さ" | 画像に上下余白（ピクセル） ※HTML5で廃止。スタイルシートで指定。 | "10" | ||||||||||||
| align="表示位置" | 画像を表示する位置 ※HTML5で廃止。スタイルシートで指定。 |
| ||||||||||||
| srcset="URL 画像幅,･･･" | さまざまな状況で使用する画像 ※HTML5以降に追加 | "sample.jpg 1000W" | ||||||||||||
| sizes="値" | さまざまなページ・レイアウトのための画像サイズ ※HTML5以降に追加 | "100vw, 1280px" | ||||||||||||
| referrerpolicy="値" | リファラーポリシーを指定 ※HTML5以降に追加 | リファラーポリシー | ||||||||||||
| decoding="値" | 画像のデコード方式を指定 ※HTML5以降に追加 |
| ||||||||||||
| loading="値" | コンテンツの読み込みタイミングを指定 ※HTML5以降に追加 |
| ||||||||||||
| fetchpriority="値" | コンテンツの読み込みタイミングを指定 ※HTML5以降に追加 |
| ||||||||||||
| 廃止された属性 |
|
|||||||||||||
| グローバル属性 |
| |
| イベント属性 |
| |
<img>タグのサンプル
<img src="sample.jpg" width="100" height="140" alt="代替テキスト">
<img src="sample.jpg" width="150" height="70" alt="代替テキスト" title="我が家のねこ">
画像の大きさ変更や画像にマウスを合わせたときのタイトルなども指定できます
留意事項
- <img>は終了タグが不要です。
- height、widthは指定しなくても表示可能です。
ただし、指定した方が表示速度が速くなるため、指定することが推奨されます。 - 大きな画像をheight、width指定で小さく表示しても、サーバから送られる画像サイズは変わりません。大きな画像を小さく表示させる場合は、表示させる小さな画像も準備することが推奨されます。
画像サイト → http://image-convert.cman.jp/ へのリンク - align、hspace、vspace属性は、HTML5で廃止されました。スタイルシートで指定してください。
- longdes属性は、HTML5で廃止されました。idで指定してください。
- name属性は、HTML5で廃止されました。指定できません。
広告