imgの使い方についてまとめ

imgの概要

imgはimageの略です。HTMLに画像を埋め込む際に使用します。

imgのカテゴリー

imgに入れられるタグ一覧

タグ早見表

なし(空要素)

入れられるタグのカテゴリー・モデル

  • コンテンツカテゴリなし
  • コンテンツモデルなし

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 あり

WORK REQUEST

CONTACT