【完全保存版】HTMLで画像を表示する方法｜imgタグの基本から表示されない原因まで初心者向けに解説

HTMLでWebページを作り始めると、
「画像を表示したいけど、うまく出ない」
という壁に必ず一度はぶつかります。

この記事では、「html 画像表示」で検索した初心者の方に向けて、
HTMLで画像を表示する基本的な方法から、
画像が表示されないときの原因と対処法まで、わかりやすく解説します。

HTMLで画像を表示する基本

HTMLで画像を表示するには、img タグを使用します。

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

この1行を書くだけで、画像を表示できます。

imgタグの基本構造

img タグには、必ず指定すべき属性があります。

src属性（必須）

<img src="image.jpg">

表示したい画像ファイルの場所を指定します
相対パス・絶対パスのどちらも使用可能です

alt属性（必須）

<img src="image.jpg" alt="犬の写真">

alt 属性は、画像の内容を説明するテキストです。

画像が表示されないときに表示される
SEO対策として重要
アクセシビリティ向上につながる

画像には必ず alt を設定するのが基本です。

相対パスと絶対パスの違い

画像が表示されない原因で最も多いのが、
パス指定の間違いです。

相対パスで画像を表示する

<img src="img/sample.jpg" alt="サンプル画像">

HTMLファイルから見た位置で指定
サイト制作では最もよく使われる

絶対パスで画像を表示する

<img src="https://example.com/img/sample.jpg" alt="サンプル画像">

URLをフルで指定
外部画像を表示するときに使用

画像サイズを指定して表示する方法

width・height属性を使う方法

<img src="image.jpg" alt="画像" width="300">

数値はpx指定
簡単だが、CSS管理の方がおすすめ

CSSで画像サイズを調整する方法

img {
  width: 300px;
  height: auto;
}

CSSを使うことで、
レスポンシブ対応やデザイン調整がしやすくなります。

画像を中央に表示する方法

img {
  display: block;
  margin: 0 auto;
}

HTMLだけではなく、CSSと組み合わせるのが基本です。

画像が表示されないときの主な原因

ファイル名・拡張子の間違い

image.jpg と Image.jpg の違い
jpg / png / webp の違い

大文字・小文字も区別されるので注意が必要です。

パス指定のミス

<img src="/img/sample.jpg">

先頭の / が原因で表示されないケースも多い
サーバー構成を確認しましょう

画像ファイルが存在しない

フォルダに画像が入っていない
サーバーにアップロードし忘れている

HTMLで画像を表示するときの注意点

画像サイズは適切にする

大きすぎる画像は表示速度が遅くなる
圧縮やリサイズを行うのがおすすめ

alt属性は具体的に書く

<img src="dog.jpg" alt="芝生の上を歩く茶色の犬">

SEO・ユーザー双方にとってメリットがあります。

よくある質問

imgタグは閉じタグが必要ですか

不要です。img は閉じタグを持たないタグです。

背景画像として表示したい場合はどうする？

背景画像はHTMLではなく、CSSで指定します。

div {
  background-image: url("image.jpg");
}

まとめ

HTMLで画像を表示するには、img タグを正しく使うことが重要です。

画像表示は img タグを使う
src と alt は必須
パス指定ミスが表示されない原因の大半
CSSと組み合わせると表現の幅が広がる

「html 画像表示」で検索した方は、
まず imgタグの基本構造とパス指定 をしっかり理解することから始めてみてください。
正しく画像を表示できるようになると、Web制作が一気に楽しくなります。

【完全保存版】HTMLで画像を表示する方法｜imgタグの基本から表示されない原因まで初心者向けに解説