mozilla
Your Search Results

    img

    概要

    HTML <img> 要素 (HTML 画像要素) は、ドキュメントに画像を表示します。

    使用補足:
    ブラウザは、要素から参照された画像を常に表示するわけではありません。視覚ブラウザ以外のブラウザ(視覚障がい者向けの聴覚ブラウザなど)で閲覧された場合や、ユーザが画像を非表示に設定している場合、または記述が正しくない場合や、指定された画像形式が未対応のものでブラウザが画像を表示できない場合など、いくつかのケースがこれに該当します。このような場合は、ブラウザは、画像をこの要素の alt 属性で定義されたテキストに置き換えます。

    • コンテンツカテゴリ フローコンテンツフレージングコンテンツ、埋め込みコンテンツ、パルパブルコンテンツ。要素が usemap 属性を持つ場合は、インタラクティブコンテンツカテゴリの一員でもあります。
    • 許可された内容 なし。これは空要素です。
    • タグの省略 開始タグが必須で、終了タグは不要です。
    • 許可された親要素 埋め込みコンテンツを受け入れるすべての要素。
    • DOM インターフェイス HTMLImageElement

    属性

    他のすべての HTML 要素と同様に、この要素はグローバル属性をサポートします。

    align 非推奨 HTML4.01廃止 HTML5 vertical-align CSS プロパティを使用してください
    画像の周りのコンテキストに対する画像の配置を指定します。
    alt
    この属性は、画像を説明する代替テキストを定義します。画像の URL が間違っている場合や指定された画像の形式が未対応のものであった場合、または画像がダウンロード中の場合に表示されます。

    使用補足: この属性を省略すると、画像がコンテンツの鍵となる部分であり、同等のテキストがないことを示します。この属性に空文字列をセットすると、この画像がコンテンツにおいて重要な箇所ではないことを示します。視覚型ではないブラウザは、この要素の表現を省略する可能性があります。

    border 非推奨 HTML4.01廃止 HTML5
    画像の周りの境界線の幅を指定します。
    crossorigin HTML5
    この列挙型の属性は、関連画像を CORS を使用して取得しなければならないか、そうでないかを示します。CORS が有効な画像 は、汚染 されることなく <canvas> 要素で再利用できます。次の値が使用できます:
    anonymous
    クロスオリジン要求 (Origin: HTTP ヘッダを持つ要求) が実行されます。ただし、信用情報は送信されません (Cookie、X.509 証明書、HTTP ベーシック認証は利用されません)。サーバが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Origin: HTTP ヘッダの設定なし)、画像が 汚染 され、その使用も制限されます。
    use-credentials
    クロスオリジン要求 (Origin: HTTP ヘッダを持つ要求) が実行され、信用情報が送信されます (Cookie、証明書、HTTP ベーシック認証が利用されます)。サーバが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Credentials: HTTP ヘッダに関わらず)、画像が 汚染 され、その使用も制限されます。
    この属性が提供されない場合、リソースは CORS 要求なしで取得され (Origin: HTTP ヘッダを送信せずに取得)、<canvas> 要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに anonymous が使用されたものとして扱われます。追加の情報は CORS 設定属性 を参照してください。
    height
    画像の高さを HTML5 の CSS ピクセルまたは HTML 4 のピクセル、または割合で指定します。
    hspace 非推奨 HTML4.01, 廃止 HTML5
    画像の左右に挿入する空間の幅をピクセル単位で指定します。
    ismap
    この真偽値を持つ属性は、画像がサーバサイドマップの一部であるかどうかを示します。その場合、クリック位置の正確な座標がサーバに送信されます。

    使用補足: この属性は、<img> 要素が正しい href 属性を持つ <a> 要素の子要素である場合にのみ使用できます。

    longdescHTML 4 のみ
    表示される画像の説明の URL です。これは、alt テキストを補足するものです。HTML5 では、説明へのリンクに通常の <a> 要素を使用します。
    name 非推奨 HTML4.01, 廃止 HTML5
    要素の名前です。これは、後方互換性のために HTML 4 でのみサポートされています。代わりに id 属性を使用してください。
    src
    画像の URL です。この属性は、<img> 要素に必須です。
    srcsetHTML5
    ユーザエージェントが使用可能な画像のセットを示す、カンマ区切りで文字列を 1 個以上並べたリストです。各々の文字列の構成は以下のとおりです:
    1. 画像のURLを 1 つ
    2. 幅記述子。これは直後に 'w' を付加した正の整数です。指定しない場合のデフォルト値は無限大です。
    3. 画素密度記述子。これは直後に 'x' を付加した正の浮動小数点数です。指定しない場合のデフォルト値は 1x です。

    リスト内の各々の文字列は、少なくとも幅記述子か画素密度記述子がなければ不正な値になります。リスト内では、幅記述子と画素密度記述子の組が同じ値である文字列を複数置いてはなりません。
    ブラウザは、表示する時点でもっとも適切な画像を選択します。

    width
    画像の幅をピクセル単位または割合で指定します。
    usemap
    要素に関連付けられた イメージマップ の部分 URL ('#' で始まる) です。

    使用補足: この属性は、<img> 要素が <a> 要素または <button> 要素の子要素である場合は使用できません。

    vspace 非推奨 HTML4.01, 廃止 HTML5
    画像の上下に挿入する空間の幅をピクセル単位で指定します。

    サポートされた画像形式

    HTML 標準では、サポートすべき画像形式のリストを提示していません。そのため、ユーザエージェントごとにサポートする形式が異なります。Gecko は次の画像形式をサポートしています:

    注記:
    XBM 形式のサポートは Gecko 1.9.2 で廃止されました。

    CSS との対話

    CSS について、<img>置換要素です。これはベースラインがありません。つまり vertical-align: baseline を伴うインライン形式のコンテキスト内で使用したときに、画像の下端はコンテナのベースラインに揃えられるでしょう。

    画像は固有の寸法を持つことができますが必須ではなく、その種類によります。SVG 画像は固有の寸法を持たず、ラスター画像は寸法を持ちます。

    例 1

    <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="MD Logo" />
    

    MD Logo

    <a href="https://developer.mozilla.org/" target="_blank"> <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="MDN Logo" /> </a>
    

    MDN Logo

    Example 3: srcset 属性の使用

    srcset 属性をサポートするブラウザは、src 属性を無視します。表示される画像は、スクリーンのタイプに依存します。

     <img src="mdn-logo-sm.png" 
          alt="MD Logo" 
          srcset="mdn-logo-HD.png 2x, mdn-logo-small.png 15w, mdn-banner-HD.png 100w 2x" />

    仕様

    仕様書 策定状況 コメント
    WHATWG HTML Living Standard
    The definition of '<img>' in that specification.
    Living Standard  
    HTML5
    The definition of '<img>' in that specification.
    勧告候補  
    HTML 4.01 Specification
    The definition of '<img>' in that specification.
    勧告  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    基本サポート (有) (有) (有) (有)
    srcset 属性 34.0 32.0 (32.0) (初期設定では無効) 未サポート 21 8
    機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート (有) (有) (有) (有) (有)
    srcset 属性 未サポート 未サポート 未サポート 未サポート 8 (有)

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: ethertank, Marsf, yyss
    最終更新者: yyss,