From e6d7b3d331d8fc0a2244f70838fb1496d4f4f776 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 2 Jul 2021 23:23:49 +0900 Subject: Web/HTML/Element/img を更新 (#1254) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/06/17 時点の英語版に同期 - https://github.com/mdn/translated-content/issues/1231 --- files/ja/web/html/element/img/index.html | 556 +++++++++++++++---------------- 1 file changed, 267 insertions(+), 289 deletions(-) (limited to 'files/ja/web/html/element/img') diff --git a/files/ja/web/html/element/img/index.html b/files/ja/web/html/element/img/index.html index ea5307e855..19a1fcb7ca 100644 --- a/files/ja/web/html/element/img/index.html +++ b/files/ja/web/html/element/img/index.html @@ -1,6 +1,6 @@ --- title: ': 画像埋め込み要素' -slug: Web/HTML/Element/Img +slug: Web/HTML/Element/img tags: - Content - Element @@ -19,21 +19,20 @@ tags: - Pictures - Reference - Web +browser-compat: html.elements.img translation_of: Web/HTML/Element/img ---
{{HTMLRef}}
-

HTML の <img> 要素は、文書に画像を埋め込みます。

+

<img> は HTML の要素で、文書に画像を埋め込みます。

{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}
- -

上記の例では、 <img> 要素のとてもシンプルな使い方を示しています。

他にも、様々な目的で指定できる属性がたくさんあります。

@@ -44,17 +43,18 @@ translation_of: Web/HTML/Element/img
  • {{htmlattrxref("sizes", "img")}} および {{htmlattrxref("srcset", "img")}} を使用したレスポンシブ画像のヒント ({{htmlelement("picture")}} 要素、およびレスポンシブ画像のチュートリアルもご覧ください)。
    • -

    対応している画像形式

    +

    対応している画像形式

    -

    HTML 標準では、対応しなければならない画像形式を指定していないので、{{glossary("user agent", "ユーザーエージェント")}}によって対応する画像形式は異なります。ウェブで最もよく使われている画像形式のリストを以下に示します。

    +

    HTML 標準では、対応する画像形式を指定していないので、{{glossary("user agent", "ユーザーエージェント")}}によって対応する画像形式は異なります。

    {{page("/ja/docs/Web/Media/Formats/Image_types", "Common_image_file_types")}}

    -
    -

    注: ウェブブラウザーが対応している画像形式に関する、より包括的な情報については、画像ファイルの種類と形式ガイドを参照してください。こちらには、対応されているがウェブコンテンツでは推奨されていない画像形式 (例: ICO、BMP など)も含まれています。

    +
    +

    Tip

    +

    ウェブブラウザーが対応している画像形式に関する、より包括的な情報については、画像ファイルの種類と形式ガイドを参照してください。こちらには、対応されているがウェブコンテンツでは推奨されていない画像形式 (例: ICO、BMP など) も含まれています。

    -

    画像読み込みエラー

    +

    画像読み込みエラー

    画像の読み込みまたは表示の間にエラーが発生した場合、かつ {{htmlattrxref("onerror")}} イベントハンドラーが {{event("error")}} イベントを扱うよう設定されていた場合は、イベントハンドラーが呼び出されます。これはいくつもの状況がありえます。

    @@ -66,168 +66,175 @@ translation_of: Web/HTML/Element/img
  • 指定された画像が、{{Glossary("user agent", "ユーザーエージェント")}}が対応している形式ではない場合。
    • -

    属性

    +

    属性

    この要素にはグローバル属性があります。

    -
    {{htmlattrdef("alt")}}
    -
    この属性は、画像を説明する代替文字列を定義します。 -
    -

    注: ブラウザーは常に画像を表示するわけではありません。ブラウザーが画像を表示しない状況はいくつかがあります。

    - -
      -
    • 視覚ブラウザー以外のブラウザー (視覚障碍者向けの物を含む) で閲覧された場合
      • -
    • ユーザーが画像を非表示に設定している場合 (帯域の節約、プライバシー上の理由)
      • -
    • 画像が無効であったり未対応の画像形式であったりした場合
      • -
    - -

    このような場合、ブラウザーは、画像をこの要素の alt 属性で定義された文字列に置き換えます。このような理由から、 alt には可能な限り役に立つ値を指定するべきです。

    -
    - -

    alt 属性を省略すると、画像がコンテンツの鍵となる部分であり、同等のテキスト表現を行うことができないことを表します。この属性に空文字列を設定すると (alt="")、この画像がコンテンツにおいて重要な箇所ではないことを示し、視覚ブラウザーではない場合は{{glossary("Rendering engine", "レンダリング")}}を省略することがあります。視覚ブラウザーでは、 alt が空欄で画像の表示に失敗した場合は、壊れた画像のアイコンの表示が省略される場合もあります。

    - -

    この属性は画像をテキストにコピー＆ペーストした場合や、リンクされた画像をブックマークに保存したときにも使用されます。

    -
    -
    {{htmlattrdef("crossorigin")}}
    -
    -

    関連する画像の取得の際に {{glossary("CORS")}} を使用しなければならないかどうかを示します。 CORS リクエストから返されたCORS が有効な画像は、 {{HTMLElement("canvas")}} 要素で「汚染」されることなく再利用することができます。

    - -

    crossorigin 属性が指定されていない場合は、 ({{httpheader("Origin")}} リクエストヘッダーがない) CORS 以外のリクエストが送信され、ブラウザーは画像が汚染されたものとしてマークし、その画像データへのアクセスを制限して、 {{HTMLElement("canvas")}} 要素での使用を防ぎます。

    - -

    crossorigin 属性が指定されている場合は、({{httpheader("Origin")}} リクエストヘッダーを伴う) CORS リクエストが送信されます。しかし、サーバーがオリジンのサイトによる画像データへのオリジン間アクセスを許可することをオプトインしない場合 ({{httpheader("Access-Control-Allow-Origin")}} レスポンスヘッダーが一切送信されていないか、送信された {{httpheader("Access-Control-Allow-Origin")}} レスポンスヘッダーにサイトのオリジンが含まれていない場合)、ブラウザーは画像が汚染されていると判断し、画像データへのアクセスを制限し、 {{HTMLElement("canvas")}} 要素での使用を禁止します。

    - -

    許可されている値:

    - -
    -
    anonymous
    -
    CORS リクエストは、資格情報を省略して (つまり、{{glossary("cookie", "クッキー")}}、 X.509 証明書、 {{httpheader("Authorization")}} リクエストヘッダーなしで) 送信されます。
    -
    use-credentials
    -
    CORS リクエストは、資格情報 (つまり、Cookie、X.509 証明書、 Authorization リクエストヘッダー) が含まれた状態で送信されます。サーバーが元のサイトとの資格情報の共有を選択する (Access-Control-Allow-Credentials: true レスポンスヘッダーを送り返す) ことをしなかった場合、ブラウザーは画像を汚染されたものとしてマークし、その画像データへのアクセスを制限します。
    -
    - -

    この属性がの値が無効である場合は、列挙型のキーワードに anonymous が指定されたものとして扱われます。詳しくは CORS 設定属性を参照してください。

    -
    -
    {{htmlattrdef("decoding")}}
    -
    -

    ブラウザーに画像のデコードのヒントを提供します。次のような値が使用できます。

    -
    -
    -
    -
    sync
    -
    他のコンテンツと不可分の表示として、画像を同期的にデコードします。
    -
    async
    -
    他のコンテンツの表示が遅れないように、画像を非同期的にデコードします。
    -
    auto
    -
    既定のモードで、デコード方式を指定しません。ブラウザーはユーザーのために最良の方法を選択します。
    -
    -
    -
    {{htmlattrdef("height")}}
    -
    画像固有の高さをピクセル値で指定します。
    -
    {{htmlattrdef("intrinsicsize")}} {{deprecated_inline}}
    -
    この属性はブラウザーに、画像の{{glossary("intrinsic size", "固有の寸法")}}を無視し、この属性で指定された寸法であると見せかけるよう指示します。特に、画像がこれらの次元のラスターであって、画像の naturalWidth/naturalHeight はこの属性で指定された値が返されます。説明と例
    -
    {{htmlattrdef("ismap")}}
    -
    この真偽値を持つ属性は、画像がサーバーサイドマップの一部であるかを示します。そうである場合は、クリック位置の正確な座標をサーバーに送信します。 -
    -

    注: この属性は <img> 要素が、有効な {{htmlattrxref("href","a")}} 属性を持つ {{htmlelement("a")}} 要素の子孫である場合に限り許可されます。

    -
    -
    -
    {{htmlattrdef("loading")}}
    -
    ブラウザーがどのように画像を読み込むかを示します。 -
      -
    • eager: 画像が現在可視ビューポートに入っているかどうかにかかわらず、直ちに画像を読み込みます (これが既定値です)。
      • -
    • lazy: 画像がブラウザーで定義されたビューポートからの距離に達するまで、画像の読み込みを遅延させます。これは、画像が必要とされるのが合理的に確実になるまで、処理に必要なネットワークやストレージの帯域幅を使用しないようにするためです。これは一般的に、ほとんどの典型的な使用法において、コンテンツの性能を向上させることができます。 -
      注: 読み込みが延期されるのは JavaScript が有効になっているときだけです。これはトラッキング対策であり、スクリプトが無効になっているときにユーザーエージェントが遅延読み込みに対応している場合でも、サーバーがいつ何枚の画像が要求されたかを追跡できるようにページのマークアップに画像を戦略的に配置することで、サイトがセッション全体を通してユーザーのおおよそのスクロール位置を追跡することが可能になるからです。
      -
      • -
    -
    -
    {{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
    -
    リソースを読み込む際に、どのリファラーを使用するかを示す文字列です。 -
      -
    • no-referrer: {{httpheader("Referer")}} ヘッダーを送信しないことを表します。
      • -
    • no-referrer-when-downgrade: {{glossary("TLS")}} ({{glossary("HTTPS")}}) を使用せずにあるオリジンへ移動する場合は、 Referer ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、{{glossary("user agent", "ユーザーエージェント")}}の既定の動作です。
      • -
    • origin: Referer ヘッダーにそのページのオリジンのスキーム、{{glossary("host", "ホスト名")}}、{{glossary("port", "ポート番号")}}を含めます。
      • -
    • origin-when-cross-origin: 異なるオリジンへのナビゲーションでは、リファラーをスキーム、ホスト、ポートのみに制限します。同一のオリジンへのナビゲーションでは、リファラーのフルパスを含めます。
      • -
    • unsafe-url: Referer ヘッダーにオリジンとパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これはオリジンやパスの情報が TLS で保護されたリソースからセキュアでないオリジンへ漏えいしますので、安全ではありません。
      • -
    -
    -
    {{htmlattrdef("sizes")}}
    -
    ソースのサイズのセットを示す、カンマ区切りの文字列を1個以上並べたリストです。それぞれのソースサイズの構成は以下のとおりです。 -
      -
    1. メディア条件。最後のアイテムでは省略しなければなりません。
      2. -
    2. ソースサイズ値。
      3. -
    - -

    メディアの状態はビューポートのプロパティで記述するものであり、画像のプロパティではありません。例えば、 (max-height: 500px) 1000px は、ビューポートの高さが 500px 以下であれば 1000px 幅のソースを使用することを提案します。

    - -

    ソースサイズ値は、画像の表示サイズを指定するものです。{{glossary("User agent", "ユーザーエージェント")}}は srcset 属性で与えられたソースからひとつを選択するために、現在のソースサイズを使用します。そのとき、ソースは幅記述子 ('w') を使用して説明します。選択したソースサイズは画像の{{glossary("intrinsic size", "固有の寸法")}} ({{glossary("CSS")}} スタイルが適用されていない場合の、画像の表示サイズ) に影響します。srcset 属性がない場合、あるいは幅記述子 (w) を持つ値がない場合は、sizes 属性の効果はありません。

    -
    -
    {{htmlattrdef("src")}}
    -
    画像の {{glossary("URL")}} です。この属性は、 <img> 要素に必須です。 srcset に対応する{{glossary("Browser", "ブラウザー")}}では src を、画素密度記述子 1x の候補画像であるように扱います。ただし、この画素密度記述子が srcset で定義済みである、または srcset に 'w' 記述子が含まれている場合を除きます。
    -
    {{htmlattrdef("srcset")}}
    -
    {{glossary("User agent", "ユーザーエージェント")}}が使用可能なソース画像のセットを示す、カンマ区切りで文字列を 1 個以上並べたリストです。各々の文字列の構成は以下のとおりです: -
      -
    1. 画像の {{glossary("URL")}}
      2. -
    2. 任意で、ホワイトスペースの後に以下のいずれかを記述: -
        -
      • 幅記述子。これは直後に 'w' を付加した正の整数です。幅記述子は実際の画素密度を計算するために、sizes 属性で与えられたソースサイズで割られます。
        • -
      • 画素密度記述子。これは直後に 'x' を付加した正の浮動小数点数です。
        • -
      -
      3. -
    - -

    記述子を指定しない場合は、ソースを既定の記述子 1x に割り当てます。

    - -

    幅記述子と画素密度記述子を同一の srcset 属性に混在させると無効になります。重複した記述子 (例えばひとつの srcset に2つのソースがあり、どちらも '2x' とする) も無効になります。

    - -

    ユーザーエージェントには、利用可能なソースからひとつを選択する裁量があります。これは、ユーザー設定や{{glossary("bandwidth", "帯域幅")}}の条件などに基づいて選択を適合させるような、かなりの裁量が与えられています。例としてはレスポンシブ画像のチュートリアルをご覧ください。

    -
    -
    {{htmlattrdef("width")}}
    -
    画像固有の幅をピクセル値で指定します。
    -
    {{htmlattrdef("usemap")}}
    -
    要素に関連づけられた イメージマップの部分的な {{glossary("URL")}} ('#' で始まる) です。 -
    -

    注: <img> 要素が {{htmlelement("a")}} または {{HTMLElement("button")}} 要素の子孫である場合は、この属性を使用することはできません。

    -
    -
    +
    {{htmlattrdef("alt")}}
    +
    この属性は、画像を説明する代替文字列を定義します。 +
    +

    注

    +

    ブラウザーは常に画像を表示するわけではありません。ブラウザーが画像を表示しない状況はいくつかがあります。

    + +
      +
    • 視覚ブラウザー以外のブラウザー (視覚障碍者向けのものを含む) で閲覧された場合
      • +
    • ユーザーが画像を非表示に設定している場合 (帯域の節約、プライバシー上の理由)
      • +
    • 画像が無効であったり未対応の画像形式であったりした場合
      • +
    + +

    このような場合、ブラウザーは、画像をこの要素の alt 属性で定義された文字列に置き換えます。このような理由から、 alt には可能な限り役に立つ値を指定するべきです。

    +
    + +

    alt 属性を省略すると、画像がコンテンツの鍵となる部分であり、同等のテキスト表現を行うことができないことを表します。この属性に空文字列を設定すると (alt="")、この画像がコンテンツにおいて重要な箇所ではないことを示し、視覚ブラウザーではない場合は{{glossary("Rendering engine", "レンダリング")}}を省略することがあります。視覚ブラウザーでは、 alt が空欄で画像の表示に失敗した場合は、壊れた画像のアイコンの表示が省略される場合もあります。

    + +

    この属性は画像をテキストにコピー＆ペーストした場合や、リンクされた画像をブックマークに保存したときにも使用されます。

    +
    +
    {{htmlattrdef("crossorigin")}}
    +
    +

    関連する画像の取得の際に {{glossary("CORS")}} を使用しなければならないかどうかを示します。 CORS リクエストから返されたCORS が有効な画像は、 {{HTMLElement("canvas")}} 要素で「汚染」されることなく再利用することができます。

    + +

    crossorigin 属性が指定されていない場合は、 ({{httpheader("Origin")}} リクエストヘッダーがない) CORS 以外のリクエストが送信され、ブラウザーは画像が汚染されたものとしてマークし、その画像データへのアクセスを制限して、 {{HTMLElement("canvas")}} 要素での使用を防ぎます。

    + +

    crossorigin 属性が指定されている場合は、({{httpheader("Origin")}} リクエストヘッダーを伴う) CORS リクエストが送信されます。しかし、サーバーがオリジンのサイトによる画像データへのオリジン間アクセスを許可することをオプトインしない場合 ({{httpheader("Access-Control-Allow-Origin")}} レスポンスヘッダーが一切送信されていないか、送信された {{httpheader("Access-Control-Allow-Origin")}} レスポンスヘッダーにサイトのオリジンが含まれていない場合)、ブラウザーは画像を読み込むことをブロックし、開発ツールのコンソールに CORS エラーを記録します。

    + +

    許可されている値:

    + +
    +
    anonymous
    +
    CORS リクエストは、資格情報を省略して (つまり、{{glossary("cookie", "クッキー")}}、 X.509 証明書、 {{httpheader("Authorization")}} リクエストヘッダーなしで) 送信されます。
    +
    use-credentials
    +
    CORS リクエストは、資格情報 (つまり、Cookie、X.509 証明書、 Authorization リクエストヘッダー) が含まれた状態で送信されます。サーバーが元のサイトとの資格情報の共有を選択する (Access-Control-Allow-Credentials: true レスポンスヘッダーを送り返す) ことをしなかった場合、ブラウザーは画像を汚染されたものとしてマークし、その画像データへのアクセスを制限します。
    +
    + +

    この属性がの値が無効である場合は、列挙型のキーワードに anonymous が指定されたものとして扱われます。詳しくは CORS 設定属性を参照してください。

    +
    +
    {{htmlattrdef("decoding")}}
    +
    +

    ブラウザーに画像のデコードのヒントを提供します。次のような値が使用できます。

    +
    +
    +
    +
    sync
    +
    他のコンテンツと不可分の表示として、画像を同期的にデコードします。
    +
    async
    +
    他のコンテンツの表示が遅れないように、画像を非同期的にデコードします。
    +
    auto
    +
    既定のモードで、デコード方式を指定しません。ブラウザーはユーザーのために最良の方法を選択します。
    +
    +
    +
    {{htmlattrdef("height")}}
    +
    画像固有の高さをピクセル値で指定します。
    +
    {{htmlattrdef("intrinsicsize")}} {{deprecated_inline}}
    +
    この属性はブラウザーに、画像の{{glossary("intrinsic size", "固有の寸法")}}を無視し、この属性で指定された寸法であると見せかけるよう指示します。特に、画像がこれらの次元のラスターであって、画像の naturalWidth/naturalHeight はこの属性で指定された値が返されます。説明と例
    +
    {{htmlattrdef("ismap")}}
    +
    この真偽値を持つ属性は、画像がサーバーサイドマップの一部であるかを示します。そうである場合は、クリック位置の正確な座標をサーバーに送信します。 +
    +

    注

    +

    この属性は <img> 要素が、有効な {{htmlattrxref("href","a")}} 属性を持つ {{htmlelement("a")}} 要素の子孫である場合に限り許可されます。これにより、ポインティングデバイスを持たないユーザーのフォールバック先を提供します。

    +
    +
    +
    {{htmlattrdef("loading")}} {{experimental_inline}}
    +
    ブラウザーがどのように画像を読み込むかを示します。 +
      +
    • eager: 画像が現在可視ビューポートに入っているかどうかにかかわらず、直ちに画像を読み込みます (これが既定値です)。
      • +
    • lazy: 画像がブラウザーで定義されたビューポートからの距離に達するまで、画像の読み込みを遅延させます。これは、画像が必要とされるのが合理的に確実になるまで、処理に必要なネットワークやストレージの帯域幅を使用しないようにするためです。これは一般的に、ほとんどの典型的な使用法において、コンテンツの性能を向上させることができます。 +
      +

      注

      +

      読み込みが延期されるのは JavaScript が有効になっているときだけです。これはトラッキング対策であり、スクリプトが無効になっているときにユーザーエージェントが遅延読み込みに対応している場合でも、サーバーがいつ何枚の画像が要求されたかを追跡できるようにページのマークアップに画像を戦略的に配置することで、サイトがセッション全体を通してユーザーのおおよそのスクロール位置を追跡することが可能になるからです。

      +
      +
      • +
    +
    +
    {{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
    +
    リソースを読み込む際に、どのリファラーを使用するかを示す文字列です。 +
      +
    • no-referrer: {{httpheader("Referer")}} ヘッダーを送信しないことを表します。
      • +
    • no-referrer-when-downgrade: {{glossary("TLS")}} ({{glossary("HTTPS")}}) を使用せずにあるオリジンへ移動する場合は、 Referer ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、{{glossary("user agent", "ユーザーエージェント")}}の既定の動作です。
      • +
    • origin: Referer ヘッダーにそのページのオリジンのスキーム、{{glossary("host", "ホスト名")}}、{{glossary("port", "ポート番号")}}を含めます。
      • +
    • origin-when-cross-origin: 異なるオリジンへのナビゲーションでは、リファラーをスキーム、ホスト、ポートのみに制限します。同一のオリジンへのナビゲーションでは、リファラーのフルパスを含めます。
      • +
    • unsafe-url: Referer ヘッダーにオリジンとパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これはオリジンやパスの情報が TLS で保護されたリソースからセキュアでないオリジンへ漏えいしますので、安全ではありません。
      • +
    +
    +
    {{htmlattrdef("sizes")}}
    +
    ソースのサイズのセットを示す、カンマ区切りの文字列を1個以上並べたリストです。それぞれのソースサイズの構成は以下のとおりです。 +
      +
    1. メディア条件。リスト内の最後のアイテムでは省略しなければなりません。
      2. +
    2. ソースサイズ値。
      3. +
    + +

    メディアの状態はビューポートのプロパティで記述するものであり、画像のプロパティではありません。例えば、 (max-height: 500px) 1000px は、ビューポートの高さが 500px 以下であれば 1000px 幅のソースを使用することを提案します。

    + +

    ソースサイズ値は、画像の表示サイズを指定するものです。{{glossary("User agent", "ユーザーエージェント")}}は srcset 属性で与えられたソースからひとつを選択するために、現在のソースサイズを使用します。そのとき、ソースは幅記述子 ('w') を使用して説明します。選択したソースサイズは画像の{{glossary("intrinsic size", "固有の寸法")}} ({{glossary("CSS")}} スタイルが適用されていない場合の、画像の表示サイズ) に影響します。srcset 属性がない場合、あるいは幅記述子 (w) を持つ値がない場合は、sizes 属性の効果はありません。

    +
    +
    {{htmlattrdef("src")}}
    +
    画像の {{glossary("URL")}} です。この属性は、 <img> 要素に必須です。 srcset に対応する{{glossary("Browser", "ブラウザー")}}では src を、画素密度記述子 1x の候補画像であるように扱います。ただし、この画素密度記述子が srcset で定義済みである、または srcset に 'w' 記述子が含まれている場合を除きます。
    +
    {{htmlattrdef("srcset")}}
    +
    {{glossary("User agent", "ユーザーエージェント")}}が使用可能なソース画像のセットを示す、カンマ区切りで文字列を 1 個以上並べたリストです。各々の文字列の構成は以下のとおりです: +
      +
    1. 画像の {{glossary("URL")}}
      2. +
    2. 任意で、ホワイトスペースの後に以下のいずれかを記述: +
        +
      • 幅記述子。これは直後に 'w' を付加した正の整数です。幅記述子は実際の画素密度を計算するために、sizes 属性で与えられたソースサイズで割られます。
        • +
      • 画素密度記述子。これは直後に 'x' を付加した正の浮動小数点数です。
        • +
      +
      3. +
    + +

    記述子を指定しない場合は、ソースを既定の記述子 1x に割り当てます。

    + +

    幅記述子と画素密度記述子を同一の srcset 属性に混在させると無効になります。重複した記述子 (例えばひとつの srcset に2つのソースがあり、どちらも '2x' とする) も無効になります。

    + +

    ユーザーエージェントには、利用可能なソースからひとつを選択する裁量があります。これは、ユーザー設定や{{glossary("bandwidth", "帯域幅")}}の条件などに基づいて選択を適合させるような、かなりの裁量が与えられています。例としてはレスポンシブ画像のチュートリアルをご覧ください。

    +
    +
    {{htmlattrdef("width")}}
    +
    画像固有の幅をピクセル値で指定します。
    +
    {{htmlattrdef("usemap")}}
    +
    要素に関連づけられた イメージマップの部分的な {{glossary("URL")}} ('#' で始まる) です。 +
    +

    注

    +

    <img> 要素が {{htmlelement("a")}} または {{HTMLElement("button")}} 要素の子孫である場合は、この属性を使用することはできません。

    +
    +
    -

    非推奨の属性

    +

    非推奨の属性

    -
    {{htmlattrdef("align")}} {{Obsolete_Inline}}
    -
    周囲の文脈に対する画像の配置を指定します。もう使用するべきではありません。 — 代わりに {{glossary("CSS")}} の {{cssxref('float')}} プロパティや {{cssxref('vertical-align')}} プロパティを使用してください。要素ボックス内の画像の位置を示すために、 {{cssxref("object-position")}} プロパティを使用することもできます。
    -
    -
    -
    top
    -
    vertical-align: top; または vertical-align: text-top; と等価です。
    -
    middle
    -
    vertical-align: -moz-middle-with-baseline; と等価です。
    -
    bottom
    -
    値の既定値はなく vertical-align: unset; または vertical-align: initial; と等価です。
    -
    left
    -
    float: left; と等価です。
    -
    right
    -
    float: right; と等価です。
    -
    -
    -
    {{htmlattrdef("border")}} {{Obsolete_Inline}}
    -
    画像の周りの境界線の幅を指定します。代わりに {{glossary("CSS")}} の {{cssxref('border')}} プロパティを使用してください。
    -
    {{htmlattrdef("hspace")}} {{Obsolete_Inline}}
    -
    画像の左右に挿入する空間の幅をピクセル単位で指定します。代わりに CSS の {{cssxref('margin')}} プロパティを使用してください。
    -
    {{htmlattrdef("longdesc")}} {{Obsolete_Inline}}
    -
    画像の詳細な説明へのリンクです。有効な値は、 {{glossary("URL")}} または要素の {{htmlattrxref("id")}} です。 -
    -

    この属性は、最新の {{glossary("W3C")}} のバージョンである HTML 5.2 でも言及されていますが、一方、 {{glossary("WHATWG")}} の HTML Living Standard では完全に削除されています。将来が不確実なので、代わりに、 aria-describedby または aria-details のような {{glossary("WAI")}}-{{glossary("ARIA")}} の代替手段を検討してください。

    -
    -
    -
    {{htmlattrdef("name")}} {{Obsolete_Inline}}
    -
    要素の名前です。代わりに {{htmlattrxref("id")}} 属性を使用してください。
    -
    {{htmlattrdef("vspace")}} {{Obsolete_Inline}}
    -
    画像の上下に挿入する空間の幅をピクセル単位で指定します。HTML5 では、代わりに CSS の {{cssxref('margin')}} プロパティを使用してください。
    +
    {{htmlattrdef("align")}} {{deprecated_inline}}
    +
    周囲のコンテキストに対する画像の配置を指定します。代わりに {{glossary("CSS")}} の {{cssxref('float')}} プロパティや {{cssxref('vertical-align')}} プロパティを使用してください。使用できる値は次の通りです。
    +
    +
    +
    top
    +
    vertical-align: top; または vertical-align: text-top; と等価です。
    +
    middle
    +
    vertical-align: -moz-middle-with-baseline; と等価です。
    +
    bottom
    +
    値の既定値はなく vertical-align: unset; または vertical-align: initial; と等価です。
    +
    left
    +
    float: left; と等価です。
    +
    right
    +
    float: right; と等価です。
    +
    +
    +
    {{htmlattrdef("border")}} {{deprecated_inline}}
    +
    画像の周りの境界線の幅を指定します。代わりに {{glossary("CSS")}} の {{cssxref('border')}} プロパティを使用してください。
    +
    {{htmlattrdef("hspace")}} {{deprecated_inline}}
    +
    画像の左右に挿入する空間の幅をピクセル単位で指定します。代わりに CSS の {{cssxref('margin')}} プロパティを使用してください。
    +
    {{htmlattrdef("longdesc")}} {{deprecated_inline}}
    +
    画像の詳細な説明へのリンクです。有効な値は、 {{glossary("URL")}} または要素の {{htmlattrxref("id")}} です。 +
    +

    注

    +

    この属性は、最新の {{glossary("W3C")}} のバージョンである HTML 5.2 でも言及されていますが、 {{glossary("WHATWG")}} の HTML Living Standard では完全に削除されています。将来が不確実なので、代わりに、 aria-describedby または aria-details のような {{glossary("WAI")}}-{{glossary("ARIA")}} の代替手段を使用してください。

    +
    +
    +
    {{htmlattrdef("name")}} {{deprecated_inline}}
    +
    要素の名前です。代わりに {{htmlattrxref("id")}} 属性を使用してください。
    +
    {{htmlattrdef("vspace")}} {{deprecated_inline}}
    +
    画像の上下に挿入する空間の幅をピクセル単位で指定します。HTML5 では、代わりに CSS の {{cssxref('margin')}} プロパティを使用してください。
    -

    CSS でのスタイル付け

    +

    CSS でのスタイル付け

    <img> は置換要素です。 {{cssxref("display")}} の値が既定で inline ですが、既定の寸法は埋め込まれた画像の内部的な値で定義されます。画像には {{cssxref("border")}}/{{cssxref("border-radius")}}, {{cssxref("padding")}}/{{cssxref("margin")}}, {{cssxref("width")}}, {{cssxref("height")}}, などのプロパティを設定することができます。

    @@ -237,44 +244,44 @@ translation_of: Web/HTML/Element/img

    画像の種類に応じて、固有の寸法を持つことができます。ただし、固有の寸法が必須ではない画像形式があります。例えば {{glossary("SVG")}} 画像は、固有の寸法を持ちません。つまり、 SVG 画像には {{SVGElement("svg")}} 要素に width または height が設定されていない限り、固有の寸法はありません。

    -

    例

    +

    例

    -

    代替テキスト

    +

    代替テキスト

    以下の簡単な例では、ページに画像を埋め込み、アクセシビリティを向上させるために代替テキストを含めています。

    -
    <img src="https://developer.mozilla.org/static/img/favicon144.png"
-     alt="MDN ロゴ — MDN のテキストが入った恐竜のロゴ">
+
    <img src="https://developer.mozilla.org/static/img/favicon144.png"
+     alt="MDN ロゴ">
 
    
 
 
    {{ EmbedLiveSample('Alternative_text', '100%', '160') }}
    
 
-
+
 
 
    この例は前回のを土台に、画像をリンクにする方法を示しています。これを行うのはとても単純です。 — <img> タグを {{HTMLElement("a")}} の中に組み込むだけです。一つの考慮事項として、リンクが指すリソースを説明する代替テキストを作成するようにしてください。
    
 
-
    <a href="https://developer.mozilla.org">
+
    <a href="https://developer.mozilla.org">
   <img src="https://developer.mozilla.org/static/img/favicon144.png"
        alt="MDN サイトにおいでください">
 </a>
    
 
 
    {{ EmbedLiveSample('Image_link', '100%', '160') }}
    
 
-
    srcset 属性の使用
    
+
    srcset 属性の使用
    
 
 
    この例では、 srcset 属性によって高解像度版のロゴの参照を指定しています。これで、高解像度の端末では src 画像の代わりにこちらが読み込まれます。 src で参照される画像は、 srcset に対応している{{glossary("User agent", "ユーザーエージェント")}}では、 1x の候補としてカウントされます。
    
 
-
     <img src="https://developer.mozilla.org/static/img/favicon72.png"
+
     <img src="https://developer.mozilla.org/static/img/favicon72.png"
       alt="MDN logo"
       srcset="https://developer.mozilla.org/static/img/favicon144.png 2x">
    
 
 
    {{EmbedLiveSample("Using_the_srcset_attribute", "100%", "160")}}
    
 
-
    srcset および sizes 属性の使用
    
+
    srcset および sizes 属性の使用
    
 
 
    src 属性は、 srcset に対応している{{glossary("User agent", "ユーザーエージェント")}}で 'w' 記述子を使用している場合は無視されます。 (max-width: 600px) のメディア条件に一致すると、 200px の幅の画像 (200px にもっと近いもの) が読み込まれ、そうでなければ他の画像が読み込まれます。
    
 
-
     <img src="/files/16796/clock-demo-200px.png"
+
     <img src="/files/16864/clock-demo-200px.png"
       alt="時計"
       srcset="/files/16864/clock-demo-200px.png 200w,
           /files/16797/clock-demo-400px.png 400w"
@@ -282,41 +289,42 @@ translation_of: Web/HTML/Element/img
 
 
    {{EmbedLiveSample("Using_the_srcset_and_sizes_attributes", "100%", 350)}}
    
 
-
    
-
    その場で大きさを変更してみるには、この例を別なページで表示させる必要があり、そうすればコンテンツエリアの大きさを実際に使用することができます。
    
+
    
+	
    注
    
+	
    その場で大きさを変更してみるには、{{LiveSampleLink('Using_the_srcset_and_sizes_attributes', 'この例を別なページで表示')}}させる必要があり、そうすればコンテンツエリアの大きさを実際に使用することができます。
    
 
    
 
-
    セキュリティとプライバシーの考慮事項
    
+
    セキュリティとプライバシーの考慮事項
    
 
 
    <img> 要素の多くは無害な使用ですが、ユーザーのセキュリティとプライバシーに望ましくない結果をもたらす可能性もあります。詳細情報と緩和策については Referer ヘッダー: プライバシーとセキュリティの考慮事項を参照してください。
    
 
-
    アクセシビリティの考慮
    
+
    アクセシビリティの考慮
    
 
-
    意味のある代替説明を書く
    
+
    意味のある代替説明を書く
    
 
 
    alt 属性の値は明確で簡潔に画像の内容を説明するものにしてください。画像そのもの存在を説明するものであったり、画像のファイル名であったりするべきではありません。画像が言葉で説明できるものではなく、 alt 属性を意図的に省略する場合は、画像が伝えようとしていることの内容を他の方法で表すように考慮してください。
    
 
-
    悪い例
    
+
    悪い例
    
 
-
    <img alt="image" src="penguin.jpg">
+
    <img alt="image" src="penguin.jpg">
 
    
 
-
    良い例
    
+
    良い例
    
 
-
    <img alt="海岸に立っているイワトビペンギン" src="penguin.jpg">
+
    <img alt="海岸に立っているイワトビペンギン" src="penguin.jpg">
 
    
 
 
    alt 属性が画像にない場合、読み上げソフトによっては代わりに画像のファイル名を読み上げることがあります。ファイル名が画像の内容を表していない場合、これが操作を混乱させる可能性があります。
    
 
 
 
-
    title 属性
    
+
    title 属性
    
 
 
    The {{htmlattrxref("title")}} 属性を alt 属性の代わりに利用することはできません。加えて、 alt 属性の値を同じ画像の title 属性に複製して宣言することは避けてください。このようにすると、読み上げソフトが説明を二回読み上げ、操作を混乱させる可能性があります。
    
 
@@ -325,117 +333,87 @@ translation_of: Web/HTML/Element/img
 
    title 属性の値は、よくツールチップとして、画像の上でカーソルを停止させた後で間もなく表示されます。これはユーザーに追加の情報を提供することができますが、ユーザーが必ず見ると仮定してはいけません。ユーザーが見ることが特に重要または有益である情報があるのであれば、上記の title を使用するのではなく、何らかの方法で行内に表示するべきです。
    
 
 
 
-
    技術的概要
    
-
-
      
- 
    • alt 属性が空ではない場合:
-
-  
        
-   
      • button
        • 
-   
      • checkbox
        • 
-   
      • {{ARIARole("link")}}
        • 
-   
      • {{ARIARole("menuitem")}}
        • 
-   
      • {{ARIARole("menuitemcheckbox")}}
        • 
-   
      • {{ARIARole("menuitemradio")}}
        • 
-   
      • {{ARIARole("option")}}
        • 
-   
      • {{ARIARole("progressbar")}}
        • 
-   
      • {{ARIARole("scrollbar")}}
        • 
-   
      • {{ARIARole("separator")}}
        • 
-   
      • {{ARIARole("slider")}}
        • 
-   
      • switch
        • 
-   
      • tab
        • 
-   
      • {{ARIARole("treeitem")}}
        • 
-  
      
- 
      • 
- 
    • alt 属性が空の場合、 {{ARIARole("none")}} または {{ARIARole("presentation")}}
      • 
- 
    • alt 属性がない場合、許可されている role なし
      • 
-
    
+
    技術的概要
    
 
 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
+	
+		
+			
+			
+		
+		
+			
+			
+		
+		
+			
+			
+		
+		
+			
+			
+		
+		
+			
+			
+		
+		
+			
+			
+		
+		
+			
+			
+		
+	
    コンテンツカテゴリフローコンテンツ、記述コンテンツ、埋め込みコンテンツ、知覚可能コンテンツ。要素が usemap 属性を持つ場合は、対話型コンテンツのカテゴリの一角にもなります。
    許可されている内容なし。これは{{Glossary("empty element", "空要素")}}です。
    タグの省略開始タグは必須。終了タグを記述してはならない。
    許可されている親要素埋め込みコンテンツを受け入れるすべての要素。
    暗黙の ARIA ロール
-    
-   
    許可されている ARIA ロールすべて
    DOM インターフェイス{{domxref("HTMLImageElement")}}
    コンテンツカテゴリーフローコンテンツ、記述コンテンツ、埋め込みコンテンツ、知覚可能コンテンツ。要素が usemap 属性を持つ場合は、対話型コンテンツのカテゴリーの一角にもなります。
    許可されている内容なし。これは{{Glossary("empty element", "空要素")}}です。
    タグの省略開始タグは必須。終了タグを記述してはならない。
    許可されている親要素埋め込みコンテンツを受け入れるすべての要素。
    暗黙の ARIA ロール
+			
+			
    許可されている ARIA ロール
+				
      
+				
    • alt 属性が空ではない場合:
+
+					
        
+					
      • button
        • 
+					
      • checkbox
        • 
+					
      • {{ARIARole("link")}}
        • 
+					
      • {{ARIARole("menuitem")}}
        • 
+					
      • {{ARIARole("menuitemcheckbox")}}
        • 
+					
      • {{ARIARole("menuitemradio")}}
        • 
+					
      • {{ARIARole("option")}}
        • 
+					
      • {{ARIARole("progressbar")}}
        • 
+					
      • {{ARIARole("scrollbar")}}
        • 
+					
      • {{ARIARole("separator")}}
        • 
+					
      • {{ARIARole("slider")}}
        • 
+					
      • switch
        • 
+					
      • tab
        • 
+					
      • {{ARIARole("treeitem")}}
        • 
+				
      
+				
      • 
+				
    • alt 属性が空の場合、 {{ARIARole("none")}} または {{ARIARole("presentation")}}
      • 
+				
    • alt 属性がない場合、許可されている role なし
      • 
+			
    
+			
    DOM インターフェイス{{domxref("HTMLImageElement")}}
    
 
    
 
-
    仕様書
    
-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
    仕様書状態備考
    {{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}referrerpolicy 属性を追加。
    {{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '<img>')}}{{Spec2('HTML WHATWG')}}
    {{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-img-element', '<img>')}}{{Spec2('HTML5 W3C')}}
    {{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}}{{Spec2('HTML4.01')}}
    
+
    仕様書
    
+
+
    {{Specifications}}
    
 
-
    ブラウザーの互換性
    
+
    ブラウザーの互換性
    
 
-
    {{Compat("html.elements.img")}}
    
+
    {{Compat}}
    
 
-
    関連情報
    
+
    関連情報
    
 
 
      
- 
    • HTML の画像
      • 
- 
    • 画像のファイル形式のガイド
      • 
- 
    • レスポンシブ画像
      • 
- 
    • {{HTMLElement("picture")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}} 要素
      • 
- 
    • その他の画像に関する CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, and {{cssxref("image-resolution")}}.
      • 
+	
    • HTML の画像
      • 
+	
    • 画像のファイル形式のガイド
      • 
+	
    • レスポンシブ画像
      • 
+	
    • {{HTMLElement("picture")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}} 要素
      • 
+	
    • その他の画像に関する CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, and {{cssxref("image-resolution")}}.
      • 
 
    
-- 
cgit v1.2.3-54-g00ecf