imgの概要
imgはimageの略です。HTMLに画像を埋め込む際に使用します。
imgに使える属性
属性とは<img> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。
よく使うグローバル属性
| id | 概要 | 要素に対してID固有の識別名を付けることができます。 |
|---|---|---|
| 属性の値 | 英字から始まる英数字 | |
| class | 概要 | 要素に対して分類名を付けることができます。 |
| 属性の値 | 英字から始まる英数字 | |
| style | 概要 | 要素に対して直接スタイルを指定することができます。 |
| 属性の値 | スタイルシートのコード |
imgで使える属性
| src | 概要 | 画像ファイルを指定します。imgに必須の属性です。 |
|---|---|---|
| 属性の値 | 画像のパス | |
| alt | 概要 | 画像を表示できないブラウザを考慮し、画像を説明する代替文字列を定義します |
| 属性の値 | 文字列 | |
| loading | 概要 | 画像の読み込むタイミングを指定します |
| 属性の値 | lazy（遅延）,eager（すぐ表示）,auto（ブラウザに準じる） | |
| width | 概要 | 画像の横幅を指定します |
| 属性の値 | ピクセルまたはパーセンテージ | |
| height | 概要 | 画像の高さを指定します |
| 属性の値 | ピクセルまたはパーセンテージ | |
| usemap | 概要 | 要素に関連するイメージマップの部分的なURLを指定します。img要素がaまたはbutton要素の子孫である場合は、この属性は使用できません |
| 属性の値 | #で始まるURL | |
| ismap | 概要 | 画像をサーバーサイドクリッカブルマップとして扱う場合に指定します。この属性はimg要素がhref属性を持つa要素の子孫である場合に限り使用できます。 |
| 属性の値 | a要素のhref属性にサーバサイドでクリックされた座標を元に処理をするプログラムへのURIなどを指定します。 | |
| srcset | 概要 | ユーザーエージェントが使用可能なソース画像のセットを示す。 |
| 属性の値 | カンマ区切りで文字列を1個以上並べたリストです。画像URLなど。 | |
| sizes | 概要 | srcsetで指定した画像サイズを指定します。 |
| 属性の値 | カンマ区切りで文字列を1個以上並べたリストです。ソースのサイズの値。 | |
| crossorigin | 概要 | 画像の取得の際にCORS（Cross-Origin Resource Sharing）を使用するかどうかを示します。 |
| 属性の値 | anonymous, use-credentials | |
| decoding | 概要 | ブラウザに画像のデコード方式のヒントを提供します。 |
| 属性の値 | auto（ブラウザに準じる。規定値）、sync（他のコンテンツと同期的にデコード）、async（他のコンテンツと非同期にデコード） |
スポンサードサーチ
imgの使い方
ブラウザ対応状況
| ブラウザの対応（PC) | |
|---|---|
| Chrome | あり |
| Safari | あり |
| Internet Explorer | あり |
| Edge | あり |
| Firefox | あり |
| Opera | あり |
| ブラウザの対応（SP) | |
| Chrome | あり |
| Safari | あり |
| Samsung Internet | あり |