6日でできる 新HTML入門｜画像の表示とimgタグの使い方
画像を正しく読み込めるようになると、HTMLページは文章だけでなく、見た目にも伝わりやすいページへ広がります。
Webページでは、文章だけでなく画像を使うことで、内容をより分かりやすく伝えられます。旅行の写真、商品画像、プロフィール画像、説明用の図など、画像はページの印象や理解しやすさを大きく左右する大切な要素です。
HTMLで画像を表示するときは、HTMLファイルの中に画像そのものを直接書き込むのではありません。別に用意した画像ファイルを、<img> タグで読み込む形になります。そのため、画像ファイルの形式、ファイル名、保存場所、パスの書き方を理解しておくことが大切です。
ここでは、画像ファイルを準備するときの基本ルールから、<img> タグの使い方、src属性やalt属性の役割、複数の属性を書くときのルールまで、Webページに画像を掲載するための流れをやさしく解説していきます。
画像はHTMLファイルとは別に用意する
HTMLで画像を表示するときは、画像ファイルをHTMLファイルとは別に用意します。HTMLファイルには、画像を表示するための指示を書き、実際の画像データはjpg、png、gifなどの画像ファイルとして保存しておきます。
たとえば、HTMLファイルと同じフォルダに flower.png という画像ファイルを置いた場合、HTML側では <img> タグを使ってその画像を読み込みます。
HTMLファイルは「どの画像を表示するか」を指定する役割を持ち、画像ファイルは「実際に表示される画像データ」として使われます。この関係を理解しておくと、画像が表示されないときにも原因を探しやすくなります。
| ファイル | 役割 |
|---|---|
| HTMLファイル | ページの構造を作り、画像ファイルを読み込む |
| 画像ファイル | ページ上に表示する画像データ |
| フォルダ | HTMLファイルや画像ファイルを整理して保存する場所 |
画像が表示されない場合は、HTMLの書き方だけでなく、画像ファイルの名前や保存場所が正しいかも確認する必要があります。
図1：HTMLファイルと画像ファイルの関係
この図から分かること
HTMLファイルの中に画像データそのものを入れるのではなく、別に保存した画像ファイルを <img> タグで読み込みます。HTMLファイルは画像の場所を指定し、画像ファイルは実際の表示に使われます。
そのため、画像を正しく表示するには、<img> タグの書き方だけでなく、画像ファイル名や保存場所も正しく管理することが大切です。
Webページで使いやすい画像形式
Webページでよく使われる画像形式には、JPEG、PNG、GIFがあります。画像形式によって得意な用途が異なるため、どのような画像を使うかに合わせて選ぶと分かりやすくなります。
| 画像形式 | 拡張子 | 特徴 | 向いている画像 |
|---|---|---|---|
| JPEG | .jpg、.jpeg | 写真のような色数の多い画像に向いている | 風景写真、人物写真、商品写真 |
| PNG | .png | 画質を保ちやすく、透明部分も扱える | ロゴ、アイコン、図解 |
| GIF | .gif | 色数は少なめだが、簡単なアニメーションに使える | 小さなアニメーション、簡単な図 |
写真を掲載する場合はJPEG、ロゴや図解のようにくっきり見せたい画像にはPNGがよく使われます。GIFは、簡単なアニメーション画像などで使われることがあります。
学習を始めたばかりの段階では、まず jpg、png、gif の3つを覚えておくとよいです。画像を用意するときは、ファイル名の最後に付いている拡張子を確認し、HTMLで指定するときにも同じ拡張子まで正しく書きます。
画像ファイル名の基本ルール
画像ファイル名は、分かりやすく、扱いやすい名前にすることが大切です。特にWebページで使う画像は、環境によって正しく読み込めるように、半角英数字を中心にした名前にしておくと安心です。
おすすめのファイル名は、次のような形です。
| よいファイル名 | 理由 |
|---|---|
| hokkaido-lavender.png | 半角英字とハイフンで分かりやすい |
| profile_photo.jpg | 半角英字とアンダースコアで整理されている |
| main-visual.jpg | 画像の役割が名前から分かる |
反対に、次のようなファイル名は避けたほうが安全です。
| 避けたいファイル名 | 理由 |
|---|---|
| 北海道の写真.png | 日本語ファイル名は環境によって扱いにくい場合がある |
| my photo.jpg | 空白が入っているため、パス指定でトラブルになりやすい |
| photo#1.png | 記号が原因で正しく扱えない場合がある |
画像ファイル名には、半角英数字、ハイフン、アンダースコアを使うと管理しやすくなります。また、大文字と小文字はサーバーによって区別されることがあります。
たとえば、Photo.jpg と photo.jpg は、環境によっては別のファイルとして扱われます。HTMLで photo.jpg と書いたのに、実際のファイル名が Photo.jpg になっていると、画像が表示されない原因になります。
学習段階では、ファイル名は小文字でそろえる習慣をつけておくと安心です。
Windows 11で画像の拡張子を確認する
画像ファイルをHTMLで読み込むときは、ファイル名だけでなく拡張子まで正しく指定する必要があります。拡張子とは、ファイル名の最後に付く .jpg、.png、.gif などの部分です。
Windows 11では、初期設定によっては拡張子が表示されていないことがあります。拡張子が見えない状態だと、実際の画像形式を確認しづらくなります。
Windows 11で拡張子を表示する流れは、次のとおりです。
| 手順 | 操作 |
|---|---|
| 1 | エクスプローラーを開く |
| 2 | 上部メニューの表示を選択する |
| 3 | 表示メニューからファイル名拡張子にチェックを入れる |
| 4 | ファイル名の末尾に .jpg、.png、.gif などが表示されることを確認する |
拡張子が見えるようになると、HTMLで src属性に書くファイル名を正確に確認できます。
たとえば、画像ファイルが hokkaido-lavender.png であれば、HTMLでも同じように hokkaido-lavender.png と書きます。hokkaido-lavender.jpg と書いてしまうと、別のファイル名を指定したことになり、画像を読み込めません。
画像拡張子の確認（Windows 11の場合）
- エクスプローラーを開く
- リボンの「表示」タブを選択
- 「表示」→「ファイル名拡張子」にチェックを入れる
- これでファイル名に拡張子（.jpg/.png/.gif）が表示され、正しい形式か確認できます。
画像の保存場所とパスの考え方
画像を表示するには、画像ファイルがどこに保存されているかをHTMLで指定します。この場所を示す書き方をパスと呼びます。
画像ファイルをHTMLファイルと同じフォルダに置く場合は、画像ファイル名だけで指定できます。
<img src="hokkaido-lavender.png" alt="ラベンダー畑と青空">この場合、HTMLファイルと hokkaido-lavender.png が同じ場所にあるため、src属性にはファイル名だけを書けば読み込めます。
一方、imagesというフォルダの中に画像を入れる場合は、フォルダ名も含めて指定します。
<img src="images/hokkaido-lavender.png" alt="ラベンダー畑と青空">このように、HTMLファイルから見て画像がどこにあるのかを考えて書くことが大切です。
| 画像の場所 | src属性の指定例 |
|---|---|
| HTMLファイルと同じフォルダ | src="photo.png" |
| imagesフォルダの中 | src="images/photo.png" |
| photosフォルダの中 | src="photos/photo.jpg" |
画像が表示されないときは、まずsrc属性に書いたパスと、実際の画像ファイルの保存場所が一致しているか確認しましょう。
図2：画像ファイルの保存場所とパス
この図から分かること
画像ファイルをどこに保存するかによって、src属性に書く内容が変わります。HTMLファイルと同じフォルダに画像がある場合は、画像ファイル名だけで指定できます。
画像をimagesフォルダなどに分けて保存している場合は、フォルダ名を含めて指定します。画像が表示されないときは、ファイル名だけでなく、フォルダの位置も確認することが大切です。
imgタグの基本
画像を表示するときに使うのが <img> タグです。<img> は、imageの略で、HTMLに画像を読み込むためのタグです。
基本的な書き方は次のようになります。
<img src="画像ファイル名" alt="画像の説明"><img> は空要素です。つまり、開始タグと終了タグで内容を囲むタイプではありません。</img> のような終了タグは書きません。
<img> では、src属性とalt属性をよく使います。
| 属性 | 役割 |
|---|---|
| src | 読み込む画像ファイルの場所を指定する |
| alt | 画像の内容を説明する代替テキストを指定する |
src属性は、画像を表示するために必要な属性です。どの画像を読み込むのかを指定します。
alt属性は、画像の説明を書くための属性です。画像が読み込めないときや、スクリーンリーダーを利用している人に画像の内容を伝えるときに役立ちます。
imgタグを使ったHTMLファイルの例
ここでは、旅行写真を紹介するページを例にして、<img> タグを使って画像を表示するHTMLを書いてみます。画像ファイルは、HTMLファイルと同じフォルダに保存している想定です。
素材のダウンロード
使用する画像ファイル名は、次の2つです。
以下のリンクから画像素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。
| ラベンダー畑と青空の写真 | 牧場を歩く馬の写真 |
|---|---|
| hokkaido-lavender.png | hokkaido-horse.png |
 |  |
ファイル名： Lesson5-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>北海道の写真ギャラリー</title>
</head>
<body>
<h1>北海道の風景ギャラリー</h1>
<p>夏の北海道で見られる自然の風景を紹介します。</p>
<img src="hokkaido-lavender.png" alt="青空の下に広がるラベンダー畑">
<img src="hokkaido-horse.png" alt="緑の牧場を歩く馬">
<p>ラベンダー畑や牧場の風景は、北海道らしい自然の魅力を感じられる写真です。</p>
</body>
</html>ブラウザの表示例
このHTMLでは、2つの <img> タグを使って、2枚の画像を読み込んでいます。1枚目は hokkaido-lavender.png、2枚目は hokkaido-horse.png です。
それぞれの <img> タグには、src属性とalt属性を指定しています。src属性には画像ファイル名、alt属性には画像の内容が分かる説明文を書いています。
<img> タグは空要素なので、終了タグはありません。画像を2枚表示したい場合は、<img> タグを2つ書きます。
alt属性は画像の内容を伝えるために使う
alt属性は、画像の代わりになる説明文を指定するための属性です。画像が何らかの理由で読み込めないとき、alt属性に書いた文字が画像の代わりに使われます。
また、スクリーンリーダーを使ってWebページを読む人にとっても、alt属性はとても大切です。画面を見ることが難しい場合でも、alt属性の説明によって画像の内容を理解しやすくなります。
たとえば、次のように書きます。
<img src="hokkaido-lavender.png" alt="青空の下に広がるラベンダー畑">この例では、画像が「青空の下に広がるラベンダー畑」であることがalt属性から分かります。
alt属性を書くときは、画像を見ていない人にも内容が伝わるように、簡潔で分かりやすい説明にするとよいです。
| alt属性の書き方 | 説明 |
|---|---|
| alt="青空の下に広がるラベンダー畑" | 画像の内容が具体的に分かる |
| alt="写真" | 何の写真か分かりにくい |
| alt="画像1" | 内容が伝わらない |
画像の内容を正しく説明することで、読み手にやさしいHTMLになります。特に、情報を伝えるために必要な画像では、alt属性を丁寧に書くことが大切です。
src属性は画像ファイルの場所を指定する
src属性は、画像ファイルの場所を指定するための属性です。srcはsourceの略で、読み込み元という意味で考えると分かりやすいです。
画像ファイルがHTMLファイルと同じフォルダにある場合は、ファイル名をそのまま書きます。
<img src="hokkaido-horse.png" alt="緑の牧場を歩く馬">画像ファイルがimagesフォルダに入っている場合は、次のように書きます。
<img src="images/hokkaido-horse.png" alt="緑の牧場を歩く馬">src属性に書く内容が間違っていると、画像は読み込まれません。特に、次のような点を確認しましょう。
| 確認ポイント | 内容 |
|---|---|
| ファイル名 | HTMLに書いた名前と実際の画像ファイル名が一致しているか |
| 拡張子 | .jpg、.png、.gif などが正しいか |
| 大文字と小文字 | Photo.png と photo.png を間違えていないか |
| 保存場所 | 画像が同じフォルダにあるか、別フォルダにあるか |
| フォルダ名 | images などのフォルダ名を正しく書いているか |
画像が表示されない原因の多くは、src属性の指定ミスです。タグの形だけでなく、ファイルの置き場所と名前をセットで確認しましょう。
属性の基本的な書き方
HTMLタグには、追加情報を指定するために属性を書くことがあります。<img> タグでは、src属性やalt属性がよく使われます。
属性は、開始タグの中に書きます。基本の形は次のとおりです。
属性名="値"<img> タグであれば、次のように書きます。
<img src="photo.png" alt="画像の説明">属性を書くときは、次の点に注意します。
| ルール | 説明 |
|---|---|
| 属性は開始タグの中に書く | <img> の中に src属性やalt属性を書く |
| 属性名は小文字で書く | src、alt、width、heightのようにそろえる |
| = は半角で書く | 全角の＝を使わない |
| 値は " " で囲む | ファイル名や説明文をダブルクォーテーションで囲む |
| 複数の属性は半角スペースで区切る | src属性とalt属性の間に半角スペースを入れる |
属性名や記号が全角になっていると、正しく読み込まれない原因になります。HTMLでは、タグ名、属性名、=、" " を半角で書くことを意識しましょう。
複数の属性を指定する
<img> タグには、src属性やalt属性のほかに、width属性やheight属性を指定することもできます。
width属性は画像の表示幅、height属性は画像の表示高さを指定します。数値はピクセルとして扱われます。
<img src="photo.png" alt="花壇に咲くチューリップ" width="400" height="300">複数の属性を書くときは、属性同士を半角スペースで区切ります。属性の順番は基本的に自由ですが、読みやすさを考えると、src属性、alt属性、width属性、height属性のように整理して書くと分かりやすくなります。
| 属性 | 説明 |
|---|---|
| src | 表示する画像ファイルの場所を指定する |
| alt | 画像の内容を説明する代替テキストを指定する |
| width | 画像の表示幅を指定する |
| height | 画像の表示高さを指定する |
width属性とheight属性を使うと画像の大きさを指定できますが、画像を無理に引き伸ばすと、見た目が不自然になる場合があります。画像の大きさや配置を細かく調整する方法は、CSSに関する記事以降で解説します。
図3：imgタグと属性の書き方
この図から分かること
<img> タグでは、画像ファイルの場所をsrc属性で指定し、画像の説明をalt属性で指定します。必要に応じて、width属性やheight属性で画像の表示サイズを指定することもできます。
複数の属性を書くときは、属性同士を半角スペースで区切ります。属性名、=、" " は半角で書く必要があります。小さな入力ミスでも画像が正しく読み込めないことがあるため、丁寧に確認しましょう。
画像が表示されないときに確認すること
画像が思ったように表示されないときは、<img> タグだけを見ても原因が分からないことがあります。画像ファイルの名前、拡張子、保存場所、パスの書き方を順番に確認しましょう。
| 確認項目 | 見るポイント |
|---|---|
| 画像ファイルは存在するか | 指定した画像ファイルがフォルダ内にあるか |
| ファイル名は一致しているか | HTMLに書いた名前と実際の名前が同じか |
| 拡張子は正しいか | .png と .jpg を間違えていないか |
| 大文字と小文字は一致しているか | Photo.png と photo.png の違いに注意する |
| フォルダ名は正しいか | images や img などの名前を間違えていないか |
| src属性は正しいか | 画像の保存場所に合わせてパスを書いているか |
| alt属性は書いているか | 画像が出ない場合でも内容が伝わるか |
画像表示のトラブルは、ほんの少しの違いで起こることがあります。たとえば、ファイル名が hokkaido_horse.png なのに、HTMLで hokkaido-horse.png と書くと、別のファイルとして扱われます。
困ったときは、タグの形、ファイル名、拡張子、保存場所を1つずつ確認していくと解決しやすくなります。
画像ファイルを整理して管理する
画像が少ないうちは、HTMLファイルと同じフォルダに画像を置いても問題ありません。しかし、画像が増えてくると、フォルダの中が分かりにくくなります。
そのような場合は、imagesフォルダを作って画像をまとめると管理しやすくなります。
lesson-folder
├─ Lesson5-1.html
└─ images
├─ hokkaido-lavender.png
└─ hokkaido-horse.png
このような構成にした場合、HTMLでは次のように imagesフォルダを含めて指定します。
<img src="images/hokkaido-lavender.png" alt="青空の下に広がるラベンダー畑">画像をフォルダで整理すると、HTMLファイル、画像ファイル、今後追加する別のファイルを管理しやすくなります。Webサイトを作るときは、最初からファイルの置き場所を整理しておくと、あとで修正しやすくなります。
使用したタグと属性一覧
| タグ／属性 | 説明 |
|---|---|
| <img> | 画像を読み込むための空要素 |
| src="ファイルパス" | 表示する画像ファイルのURLまたは相対パスを指定する |
| alt="代替テキスト" | 画像が表示できないときやスクリーンリーダー向けに画像の内容を説明する |
| width="数値" | 画像の表示幅をピクセルで指定する |
| height="数値" | 画像の表示高さをピクセルで指定する |