HTMLで画像を挿入するタグ

2023-05-21

HTMLで画像を挿入するには、<img>タグを使用します。

以下は、基本的な<img>タグの使用例です。

<img src="画像のURLまたはファイルパス" alt="代替テキスト">

上記のコードでは、src属性に画像のURLまたはファイルパスを指定します。alt属性は、画像が読み込まれなかった場合やスクリーンリーダーを使用している場合に代替テキストとして表示されます。

例えば、以下のように画像のURLを指定することができます。

<img src="https://example.com/images/picture.jpg" alt="美しい風景">

または、画像ファイルがウェブページと同じディレクトリにある場合は、ファイル名を指定することもできます。

<img src="picture.jpg" alt="美しい風景">

なお、<img>タグは自己終了タグであり、閉じるタグは不要です。

picture要素を使う場合

<picture>要素は、画像のレスポンシブな表示やメディアクエリに基づいた画像の切り替えなど、より高度な画像制御を目的としたHTML要素です。複数のソースを提供し、ブラウザが最適なものを選択できるようにします。

以下は、<picture>要素を使用して画像を挿入する例です。

<picture>
	<source srcset="image-lg.jpg" media="(min-width: 768px)">
	<source srcset="image-md.jpg" media="(min-width: 576px)">
	<img src="image-sm.jpg" alt="代替テキスト">
</picture>

上記のコードでは、<picture>要素内に<source>要素と<img>要素を配置しています。<source>要素では、srcset属性を使用して画像のソースを指定し、media属性を使用してメディアクエリを定義します。ブラウザはメディアクエリに基づいて最適な画像を選択します。

最後の<img>要素は、<source>要素で指定されたソースがすべて利用できない場合の代替として表示される画像です。alt属性には代替テキストを指定します。

このように<picture>要素を使用することで、異なるデバイスやウィンドウサイズに応じて適切な画像を提供することができます。