HTML 画像

1. 画像の基本構文

HTMLにおいて、画像は <img> タグで定義されます。

<img> タグは空要素（Empty Element）であり、属性のみを保持し、終了タグを持ちません。

画像をページに表示するには、主に以下の2つの属性を使用します。

• src - 画像へのパス（URL）を指定します。
• alt - 画像の代替テキストを指定します。

1.1 基本的な書き方

<img src="img_girl.jpg" alt="ジャケットを着た女の子" width="500" height="600">

2. src 属性

src 属性は、表示したい画像ファイルの場所をブラウザに伝えるための、必須の属性です。

ブラウザがページを読み込む際、この属性で指定されたパスから画像を直接取得し、ページ内に挿入します。もしブラウザが画像を見つけられない場合は、壊れたリンクのアイコンが表示されます。

3. alt 属性

alt 属性は、何らかの理由でユーザーが画像を見ることができない場合に表示される「代替テキスト」を定義します（通信速度が遅い、src 属性のエラー、またはユーザーがスクリーンリーダーを使用している場合など）。

alt 属性の値には、その画像の内容を説明するテキストを指定すべきです。

<img src="img_chania.jpg" alt="ハニアの街並み">

[!TIP]
スクリーンリーダー（視覚障がい者がWebサイトを利用するための音声読み上げソフト）は、この alt 属性のテキストを読み上げます。アクセシビリティ向上のため、適切な説明を入力することが推奨されます。

4. 画像のサイズ（Width と Height）

width（幅）と height（高さ）属性を使用して、画像のサイズを指定することができます。

<img src="img_girl.jpg" alt="ジャケットを着た女の子" width="500" height="600">

これらの属性値は、デフォルトでピクセル単位（px）として扱われます。

4.1 属性 vs スタイル

画像サイズは、style 属性（CSS）を使用して指定することも可能です。

<img src="img_girl.jpg" alt="ジャケットを着た女の子" style="width:500px;height:600px;">

どちらの方法も有効ですが、スタイルシート（CSS）を使用してサイズを管理する方が、レスポンシブなデザインに対応しやすいため、モダンな開発ではCSSが好まれる傾向にあります。

5. 別のフォルダにある画像

画像が現在のページとは別のサブフォルダに保存されている場合は、フォルダ名を src 属性に含める必要があります。

<img src="/images/html5.gif" alt="HTML5 ロゴ" style="width:128px;height:128px;">

6. 外部サーバー上の画像

一部のWebサイトでは、外部のサーバー（別のWebサイト）に保存されている画像を直接参照することがあります。これには完全なURLを指定する絶対URLを使用します。

<img src="https://www.google.com/images/google_green.jpg" alt="google.com">

[!IMPORTANT]
外部の画像を使用する場合は、著作権に注意してください。また、外部サイトが画像を削除したりURLを変更したりすると、自サイトでの表示も消えてしまいます。

7. アニメーション画像

HTMLでは、.gif フォーマットなどのアニメーション画像を簡単に表示できます。

<img src="programming.gif" alt="プログラミング中のコンピューター" style="width:48px;height:48px;">

8. リンクとしての画像

画像をリンクにするには、<a> タグの中に <img> タグを配置します。

<a href="default.asp">
  <img src="smiley.gif" alt="HTML チュートリアルへ" style="width:42px;height:42px;">
</a>

9. 画像のフローティング（配置）

CSSの float プロパティを使用すると、テキストの右側や左側に画像を浮かせて配置することができます。

<p><img src="smiley.gif" alt="笑顔のアイコン" style="float:right;width:42px;height:42px;">
画像はテキストの右側に表示され、テキストがその周囲を回り込みます。</p>

<p><img src="smiley.gif" alt="笑顔のアイコン" style="float:left;width:42px;height:42px;">
画像はテキストの左側に表示され、テキストがその周囲を回り込みます。</p>

10. まとめ