<img>タグ

<img>タグは、画像をWebページに表示するときに使うタグです。ブログや商品ページ、プロフィール写真など、いろんな場面で使われています。

基本の書き方

・・・<img src="画像のURL" alt="画像の説明">

• src（source）：画像のファイルパスやURLを指定します。
• alt（alternative text）：画像が表示されなかったときに代わりに表示されるテキスト。SEOやアクセシビリティにも役立ちます。

画像のサイズを変えたいとき

See the Pen Untitled by 八木ジョナタン (@dftlsyeb-the-encoder) on CodePen.

• widthとheightで画像の大きさを指定できます（px単位）。
• 片方だけ指定すると、もう片方は自動で比率が保たれます。

よく使うその他の属性

属性名	説明
title	マウスを乗せたときに表示される説明文
loading=”lazy”	ページを下にスクロールしたときに画像を読み込む（表示が速くなる）
class	CSSのスタイルをあてるときに使う

画像がリンクになる例

・・・<a href="https://example.com">
・・・・・・<img src="banner.jpg" alt="バナー画像">
・・・</a>

画像をクリックすると別のページへジャンプするようにもできます！

まとめ

<img>タグはとてもシンプルですが、Webページには欠かせない重要な要素です。正しい属性を使えば、表示がきれいになるだけでなく、アクセシビリティや読み込み速度の面でもメリットがあります。

これからWeb制作を始める人は、ぜひ覚えておきましょう！