初めに
本記事では、<img> タグを使い、ウェブページで画像を表示するための方法をまとめます。
<img> タグ
画像をウェブページに表示するときには、<img> タグを用います。
<img src="画像のURLまたはファイルのパス" alt="代替テキスト">
基本的な構造は、src 属性で画像のURLまたはファイルパスを指定し、alt 属性で画像が表示されない場合に表示する代替テキストを記述します。
サイズの指定
width 属性と height 属性を用い、サイズをピクセル単位で指定できます。
<img src="画像のURLまたはファイルのパス" alt="代替テキスト" width="幅のピクセル数" height="高さのピクセル数">
タイトル
画像にタイトルを追加するには、title 属性を使用します。マウスを画像の上に置くと、このタイトルが表示されます。
<img src="画像のURLまたはファイルのパス" alt="代替テキスト" title="画像のタイトル">
<ifigure> 要素、<figcaption> 要素
<ifigure> 要素、<figcaption> 要素は、HTMLで画像や図表に関連するキャプションや説明を追加するための要素です。
<figure> <img src="画像のURLまたはファイルのパス" alt="代替テキスト" width="幅のピクセル数" height="高さのピクセル数"> <figcaption>キャプションや説明</figcaption> </figure>
（例）
<!-- 画像のURLだけ変更しています--> <figure> <img src="画像のURL" alt="魔女っ子ピクセルアート" width="160" height="160"> <figcaption>ドット絵</figcaption> </figure>
