Privacy Policy © 2025 eBIZ CREATE Inc.

[第1章：HTMLの基本を学ぶ 08] 画像を表示しよう！（<img>タグの基本と注意点）

こんにちは！
今回は、Webページに画像を表示する方法についてお話します。

画像は、ページのデザインを華やかにするだけでなく、情報をわかりやすく伝える手段としてもとても重要です。
HTMLでは、<img>タグを使うことで簡単に画像を表示することができます。

画像の挿入方法から実務で役立つ注意点まで、丁寧に解説しますので、ぜひ一緒に学んでいきましょう！

 

1. 画像を表示するタグ：<img>

HTMLで画像を表示するには、<img>タグを使います。
このタグは単独で使われ、終了タグは必要ありません。

基本の書き方

<img src="画像のURL" alt="代替テキスト">

属性の意味

  • src
    画像のURL（ファイルの場所）を指定します。
    例：src="image.jpg"
    ローカルに保存した画像や、Web上の画像を指定可能です。
  • alt
    代替テキストを指定します。画像が表示されない場合に、このテキストが代わりに表示されます。
    また、スクリーンリーダーを使用する人にも内容が伝わるので、アクセシビリティの観点で重要です。

 

2. 実際に画像を表示してみよう

以下のコードを試して、画像を表示してみましょう。

<!DOCTYPE html>
<html>
　
  <head>
    <title>画像の例</title>
  </head>
　
  <body>
    <h1>画像を表示してみよう！</h1>
    <img src="example.jpg" alt="サンプル画像">
  </body>
　
</html>

ブラウザで確認

  • 上記コードを保存し、example.jpgという画像を同じフォルダに用意してください。
  • ブラウザで開くと、画像が表示されます。

 

3. 実務で使えるポイント

1. 画像サイズを調整する

画像のサイズは、HTML内で指定できます。
widthとheight属性を使うと簡単に設定できます。

<img src="example.jpg" alt="サンプル画像" width="300" height="200">
  • おすすめ：CSSでサイズを指定すると、デザインの一貫性が保ちやすくなります。

2. 外部の画像を利用する

Web上の画像URLを直接指定することも可能です。

<img src="https://example.com/image.jpg" alt="外部の画像">
  • 注意：外部画像を使う場合は、画像が突然削除されるリスクがあるため、自分のサーバーに保存する方が安全です。

3. Webに最適化された画像を使う

  • 画像のファイルサイズが大きいと、ページの読み込みが遅くなります。
  • JPEG形式は写真に適しており、PNG形式はロゴやアイコンに向いています。

 

4. 画像を使うときの注意点

1. ファイル名は分かりやすく！

  • 例：example.jpgやlogo.pngのように、内容が分かる名前を付けましょう。

2. 代替テキスト（alt属性）は必ず記入

  • alt属性は、SEOやアクセシビリティの面で非常に重要です。
  • 例：商品ページなら、商品名や簡単な説明を記載します。

3. 画像の配置やスタイルはCSSで調整

  • HTMLでは画像を挿入するだけにし、見た目の調整はCSSで行うとコードが整理されます。

 

5. 画像のリスト表示例

次回の記事で紹介するリストと組み合わせると、以下のようなギャラリーが簡単に作れます。

<ul>
  <li><img src="image1.jpg" alt="画像1"></li>
  <li><img src="image2.jpg" alt="画像2"></li>
  <li><img src="image3.jpg" alt="画像3"></li>
</ul>

リストと画像を活用すれば、商品一覧やフォトギャラリーなどの作成に役立ちます！

 

6. 次回の予告：リストを作成して情報を整理しよう

次回は、情報を整理するのに便利なリストの作り方を学びます。
<ul>タグ（箇条書き）と<ol>タグ（番号付きリスト）を使いこなして、内容をスッキリ見せる方法を解説します！

 

7. まとめ

今回は、HTMLの<img>タグを使った画像の表示方法を学びました。
画像はWebページのデザインやユーザー体験に大きな影響を与えるため、正しく活用できると良いですね。

まとめポイント：

  1. <img>タグで画像を表示
  2. alt属性で代替テキストを必ず記入
  3. 画像サイズや形式に気を配る

次回は、「リストを作成して情報を整理しよう（<ul>と<ol>の使い方）」をテーマに、箇条書きや番号付きリストの活用方法を学びます。

一緒にさらにステップアップしていきましょう！

画像を表示しよう！（<img>タグの基本と注意点）

ホームeMAGAZINEWeb構築教材画像を表示しよう！（<img>タグの基本と注意点）