imgタグ
imgは、画像を表示するタグです。
解説
imgタグに指定する画像にはJPEG、PNG、GIF、BMPなど一般的な形式の画像は指定できます。
コンテンツ・モデル
| カテゴリー (自カテゴリ) | フロー・コンテンツ フレージング・コンテンツ エンベッディッド・コンテンツ インタラクティブ・コンテンツ |
| コンテキスト (親カテゴリ) | エンベッディッド・コンテンツを許可する場所 |
| コンテンツ・モデル (子カテゴリ) | なし |
属性
imgタグには以下の属性が指定できます。
| 属性 | 説明 |
|---|---|
| src | 画像のパス（必須） （例）src="img/sample.jpg" |
| alt | 画像が読み込めない時に表示される代替テキスト （例）alt="いぬの画像" |
| width | 画像の幅を指定 （例）width="100" |
| height | 画像の高さを指定 （例）height="100" |
| usemap | 使用するイメージマップの名前を指定する （例）usemap="#mymap" |
| 属性 | 説明 |
|---|---|
| class | クラスを指定する （例）class="hoge" |
| id | IDを指定する （例）id="foo" |
| style | スタイルを指定する （例）style="color:red;" |
その他のグローバル属性値については、グローバル属性をご覧ください。
サンプル
画像（cat.png）をそのままのサイズで表示する
<img src="image/cat.png" alt="ねこ">
画像（cat.png）を横幅80px、縦幅80pxで表示する
<img src="image/cat.png" alt="ねこ" width="80" height="80">
画像（cat.png）を50%のサイズで表示する
<img src="image/cat.png" alt="ねこ" width="50%">
画像を表示するエリアに対する割合になります。
この例の場合は、黄色いエリアの幅に対して50%のサイズとなります。
備考
- imgは「image」（画像）の略です。
- alt属性は必須ではないですが検索エンジンにどういった内容の画像であるかを伝えたり、画像が読み込めなかった場合に閲覧者に何の画像か伝えるためなど指定しておくことをお勧めします。
