HTML imgタグについて
imgタグの定義と使用説明
HTMLのimgタグは、Webページに画像を埋め込むために使用されます。このタグは画像ファイルのパスを指定するsrc属性を持ち、画像を表示するための基本的な方法です。
ブラウザのサポート状況
imgタグはすべてのモダンブラウザで広くサポートされています。以下に主要なブラウザでのサポート状況を示します。
| ブラウザ | サポート状況 |
|---|---|
| Google Chrome | Full |
| Mozilla Firefox | Full |
| Safari | Full |
| Microsoft Edge | Full |
| Internet Explorer | Full |
対応する属性
imgタグは以下のような多くの属性を持ちます。
src: 画像ファイルのURLを指定します。alt: 画像が表示されない場合に表示される代替テキスト。width: 画像の幅をピクセル単位で指定します。height: 画像の高さをピクセル単位で指定します。title: 画像に対する追加情報を提供するツールチップを表示。loading: 画像の読み込み戦略を指定します（例：lazyで遅延読み込み）。
対応するイベント
画像の読み込みやインタラクションに関連する以下のようなイベントがあります。
<img src="example.jpg" alt="例の画像"
width="300" height="200" title="サンプル画像"
loading="lazy" "alert('画像が読み込まれました！')"
onerror="alert('画像の読み込みに失敗しました！')">QAセクション
Q1: imgタグで画像が表示されない場合はどうすれば良いですか？
A1: 画像が表示されない理由としては、src属性に指定されたパスが間違っているか、ファイルが存在しない可能性があります。alt属性で代替テキストを提供することも忘れないでください。
Q2: imgタグで画像の遅延読み込みを行うにはどうすれば良いですか？
A2: 画像の遅延読み込みを行うには、loading属性にlazyを指定します。loading="lazy"を追加するだけで、スクロール時に画像が読み込まれるようになります。
Q3: imgタグに複数のイベントハンドラを追加することは可能ですか？
A3: はい、imgタグに複数のイベントハンドラを追加することは可能です。例えば、onloadとonerrorの両方を同時に使用することができます。