HTMLで画像を表示しよう！<img> タグの基本と使い方

Webページに画像を表示するには、 タグを使います。この記事では、 タグの基本的な使い方から、よく使うオプションまでわかりやすく解説します！

1. <img> タグの基本構造

   HTMLコード

   1	<img src="image.jpg" alt="画像の説明" />

   各属性の説明

   • src="image.jpg"→画像のファイルパスを指定します。
   • alt="画像の説明" → 画像が表示されない場合の代替テキストを指定します。

   例えば、images フォルダの中にある photo.png を表示したい場合は、以下のように書きます。

   HTMLコード

   1	<img src="images/photo.png" alt="風景の写真" />

---

2. 画像のサイズを変更する

   画像の大きさは、**width（横幅）とheight（縦幅）**で変更できます。

   HTMLコード

   1	<img src="image.jpg" alt="サンプル画像" width="300" height="200 /">

   この例では、画像の横幅を300px、高さを200pxに設定しています。

   CSSでサイズを変更する方法

   HTMLでサイズを指定する代わりに、CSSでサイズを調整することもできます。

   CSSコード

   1 2 3 4

   .small-img {     width: 150px;     height: auto; /* 縦横比を維持 */ }

   HTMLコード

   1	<img src="image.jpg" alt="サンプル画像" class="small-img /">

---

3. 画像の配置を調整する

   画像を中央に配置するには、CSSを使います。

   CSSコード

   1 2 3 4

   .center-img {     display: block;     margin: 0 auto; }

   HTMLコード

   1	<img src="image.jpg" alt="サンプル画像" class="center-img /">

---

4. 画像をリンクにする

   画像をクリックすると他のページに移動できるようにするには、<a> タグで囲みます。

   HTMLコード

   1 2 3

   <a href="https://example.com">   <img src="image.jpg" alt="リンク付き画像"> </a>

   これで、画像をクリックすると https://example.com に移動するようになります。

---

5. 画像の形式について

   Webで使われる画像の形式には、主に以下の種類があります。

   形式	特徴
   JPEG（.jpg, .jpeg）	写真やグラデーション向き。ファイルサイズを小さくできる。
   PNG（.png）	透過可能。イラストやアイコン向き。
   GIF（.gif）	アニメーション対応。
   SVG（.svg）	ベクター画像で拡大しても劣化しない。ロゴ向き。

   適切なフォーマットを選ぶことで、サイトの表示速度を改善できます！

まとめ

画像を表示するには <img> タグを使う src で画像ファイルを指定、alt で代替テキストを設定 サイズは width や height、または CSS で調整可能 CSS で配置を調整し、リンクをつけることも可能 適切な画像フォーマットを選ぶのが大事

<img> タグをマスターすれば、Webページに画像を自由に挿入できるようになります！ぜひ試してみてくださいね