【HTML Living Standard】img要素の使い方
img要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
imgオブジェクトは、ウェブページに画像コンテンツを埋め込むためのオブジェクトです。この要素を用いることで、JPEG、PNG、GIF、SVGといった様々な画像形式を文書内に表示することが可能になります。<img>要素は、ウェブサイトのデザインを豊かにし、情報を視覚的に伝える上で不可欠な存在です。
この要素には、主に二つの重要な属性があります。一つはsrc属性で、これは表示したい画像のURLを指定します。このURLは、インターネット上の画像への絶対パスでも、ウェブサイト内の画像ファイルへの相対パスでも指定できます。もう一つはalt属性で、これは画像の内容を簡潔に説明する代替テキストを提供します。alt属性は、画像ファイルが見つからない場合や、ネットワークエラーによって画像が読み込めなかった場合に、そのテキストが代わりに表示されます。さらに重要な点として、視覚障がいを持つユーザーがスクリーンリーダーを利用する際に、画像の内容を音声で伝えるために不可欠であり、ウェブアクセシビリティの確保に大きく貢献しますので、常に設定することが強く推奨されます。
また、width属性とheight属性を用いて、画像の表示幅と高さをピクセル単位で指定することもできます。これらの属性を事前に指定することで、ブラウザは画像を読み込む前に表示領域を確保し、ページのレイアウトが急に変動するのを防ぎ、ユーザー体験の向上に寄与します。<img>要素は、インライン要素として扱われ、文書の流れの中で自然に画像を配置できます。適切にalt属性を設定し、画像のサイズを最適化することは、ウェブサイトのパフォーマンスとSEOにも良い影響を与えます。
構文(syntax)
1<img src="path/to/image.jpg" alt="Description of the image">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML imgタグで画像を埋め込む
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>imgタグの基本サンプル</title> 7</head> 8<body> 9 <h1>画像表示の例</h1> 10 11 <!-- imgタグは、ウェブページに画像を埋め込むために使用します。 --> 12 <!-- src属性: 画像ファイルのパスまたはURLを指定します。 --> 13 <!-- alt属性: 画像が表示できない場合に代替として表示されるテキストを指定します。これは視覚障害者向けのスクリーンリーダーにも利用されます。 --> 14 <img src="https://via.placeholder.com/150" alt="これはサンプルのプレースホルダー画像です。"> 15 16 <p> 17 上記は、<code><img></code>タグを使用して表示された画像です。<br> 18 <code>src</code>属性には画像のアドレスを、<code>alt</code>属性には画像の内容を表すテキストを指定します。 19 </p> 20</body> 21</html>
HTMLの<img>タグは、ウェブページに画像を表示するために使用される要素です。このタグは、ブラウザが画像を読み込み、指定された場所に表示する役割を担います。<img>タグ自体はコンテンツを持たない「空要素」であり、終了タグを必要としないのが特徴です。
プログラミングにおける「引数」のように、<img>タグは、画像を特定したり、その表示方法を制御するための「属性」を持ちます。中でも最も重要な属性はsrcとaltです。src属性は「ソース」の略で、表示したい画像ファイルの場所（パスやURL）を指定します。ブラウザはこのsrc属性の値に基づいて画像データを見つけ出し、ウェブページ上に描画します。
もう一つの重要なalt属性は「代替テキスト」を意味します。これは、何らかの理由で画像が表示できない場合や、視覚に障がいのある方がスクリーンリーダーを利用してウェブページを閲覧する際に、画像の内容を言葉で伝えるために不可欠なテキスト情報です。ウェブアクセシビリティの観点からも、alt属性は必ず指定すべきです。
サンプルコードでは、<img src="https://via.placeholder.com/150" alt="これはサンプルのプレースホルダー画像です。">のように記述されており、srcで画像のURLを指定し、altで画像の説明を提供しています。これにより、ウェブページに画像が表示されるだけでなく、その画像が持つ情報も適切に伝わります。<img>タグ自体が、特定の処理結果を返すような「戻り値」の概念は持ちません。
<img>タグで画像を埋め込む際は、src属性に画像ファイルの正確なパスやURLを指定してください。誤りがあると画像は表示されません。また、alt属性には画像の内容を具体的に記述することが非常に重要です。これは、画像が表示できない場合の代替テキストとして機能するだけでなく、視覚障害者向けのスクリーンリーダーにも利用され、ウェブのアクセシビリティと検索エンジン最適化（SEO）に大きく貢献します。<img>タグはコンテンツを持たない空要素のため、閉じタグは不要です。画像の読み込み速度やページレイアウトの安定性を考慮し、widthやheight属性、またはCSSで適切なサイズを指定することも検討しましょう。
HTML img 要素で画像サイズを指定する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML img サイズ指定</title> 7</head> 8<body> 9 <!-- 幅と高さを両方指定する例 --> 10 <!-- 指定された値が元の画像のアスペクト比と異なる場合、画像が歪んで表示されることがあります。 --> 11 <img src="https://via.placeholder.com/300x200" alt="幅150px、高さ100pxに指定された画像" width="150" height="100"> 12 13 <br><br> 14 15 <!-- 幅のみを指定する例 --> 16 <!-- 高さは元の画像のアスペクト比を維持したまま自動的に調整されます。 --> 17 <img src="https://via.placeholder.com/300x200" alt="幅200pxに指定され、高さは自動調整された画像" width="200"> 18 19 <br><br> 20 21 <!-- 高さのみを指定する例 --> 22 <!-- 幅は元の画像のアスペクト比を維持したまま自動的に調整されます。 --> 23 <img src="https://via.placeholder.com/300x200" alt="高さ150pxに指定され、幅は自動調整された画像" height="150"> 24</body> 25</html>
HTMLの<img>要素は、ウェブページ上に画像を表示するために用いられる要素です。プログラミング言語における「引数」や「戻り値」のような概念は直接持ちませんが、表示する画像の情報を指定するために「属性」を使用します。
必須属性の一つであるsrc属性には表示したい画像のURLを指定し、alt属性には画像が表示されない場合の代替テキストや、視覚に障害を持つユーザーがスクリーンリーダーを利用する際に読み上げられるテキストを指定します。このalt属性は、アクセシビリティ（利用しやすさ）の観点からも非常に重要です。
画像の表示サイズを制御するには、width属性とheight属性を使用します。width属性は画像の表示幅を、height属性は画像の表示高さをピクセル単位で指定できます。
これらの属性の指定方法によって、画像の表示挙動は異なります。もしwidthとheightの両方を指定した場合、画像は指定された厳密なサイズで表示されますが、この値が元の画像のアスペクト比（縦横比）と異なる場合、画像が縦長や横長に歪んで表示されることがあります。
これに対し、widthまたはheightのどちらか一方のみを指定した場合、指定されなかったもう一方のサイズは、元の画像のアスペクト比を維持するように自動的に調整されます。これにより、画像が歪むことなく、指定した側のサイズ基準で適切に表示されます。システム開発において、ユーザー体験を損なわずに画像を美しく表示するためには、これらのサイズ指定の挙動を理解し、適切に利用することが重要です。
<img>要素で画像の幅と高さを両方指定すると、元の画像のアスペクト比と異なる場合に画像が歪んで表示されることがあります。画像が不自然に伸び縮みするのを防ぐためには、幅か高さのいずれか一方のみを指定してください。そうすることで、もう一方は自動的に元の画像のアスペクト比を保ったまま調整されます。画像のサイズ調整は、通常HTML属性よりもCSSで行うことが推奨され、より柔軟なデザインが可能です。また、alt属性には画像の内容を説明する代替テキストを必ず記述してください。これは画像が表示できない時のために重要であり、アクセシビリティや検索エンジン最適化（SEO）に貢献します。