6. 画像の挿入

Web ページにおいて画像を適切に挿入することは、視覚的な魅力を高め、情報を分かりやすく伝えるために重要です。このセクションでは、HTML を使って画像を挿入する方法を学びます。

6.1 画像の基本挿入方法

HTML で画像を挿入するためには、<img>タグを使用します。<img>タグには、画像のソース（画像ファイルのパス）を指定するためのsrc属性と、画像の説明を指定するためのalt属性が必要です。

基本的な例

以下に基本的な例を示します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>画像の挿入例</title>
  </head>
  <body>
    <h1>画像の挿入の例</h1>
    <img src="images/sample.jpg" alt="サンプル画像" />
  </body>
</html>

src属性には画像ファイルのパスを指定します。例ではimages/sample.jpgと指定しています。
alt属性には画像が表示されない場合に表示される代替テキストを指定します。これにより、視覚障害者が使用するスクリーンリーダーや、画像が読み込まれなかった場合の対応が可能になります。

6.2 画像のサイズ指定

画像のサイズを指定するためには、width属性とheight属性を使用します。

例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>画像サイズの指定</title>
  </head>
  <body>
    <h1>画像サイズの指定例</h1>
    <img src="images/sample.jpg" alt="サンプル画像" width="300" height="200" />
  </body>
</html>

width属性には画像の幅（ピクセル単位）を指定します。
height属性には画像の高さ（ピクセル単位）を指定します。

6.3 相対パスと絶対パス

画像のパスの指定には相対パスと絶対パスの 2 つの方法があります。

相対パス

相対パスは、HTML ファイルから見て画像ファイルがどこにあるかを指定します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>相対パス例</title>
  </head>
  <body>
    <h1>相対パスの例</h1>
    <img src="images/sample.jpg" alt="サンプル画像" />
  </body>
</html>

絶対パス

絶対パスは、ウェブ上の画像の完全な URL を指定します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>絶対パス例</title>
  </head>
  <body>
    <h1>絶対パスの例</h1>
    <img src="https://www.example.com/images/sample.jpg" alt="サンプル画像" />
  </body>
</html>

6.4 画像の配置

画像の配置を調整するために、CSS を使用します。ここでは、例として画像を中央に配置する方法を紹介します。

例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>画像の配置例</title>
    <style>
      .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <h1>画像の中央配置</h1>
    <img
      src="images/sample.jpg"
      alt="サンプル画像"
      class="center"
      width="300"
    />
  </body>
</html>

styleタグ内に CSS を記述し、画像を中央に配置するためのクラス.centerを作成しています。
display: block;は画像をブロック要素として扱うための指定です。
margin-left: auto;とmargin-right: auto;を使って、自動的に左右の余白を同じにします。

6.5 画像のキャプション付き表示

Web ページのデザインにおいて、画像にキャプション（説明文）を付けることがよくあります。そのためには<figure>タグと<figcaption>タグを使用します。

例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>画像のキャプション例</title>
  </head>
  <body>
    <h1>画像のキャプション</h1>
    <figure>
      <img src="images/sample.jpg" alt="サンプル画像" width="300" />
      <figcaption>サンプル画像のキャプション</figcaption>
    </figure>
  </body>
</html>

<figure>タグは画像とキャプションをグループ化します。
<figcaption>タグは画像の説明文を指定するために使用します。

以上が、HTML で画像を挿入する基本的な方法です。まずはこれらの基本を押さえた上で、実際にコードを書いて試してみましょう。