画像を表示してみよう
更新日：2026-08-02
前のページでは、div を使って「箱」のようなレイアウトを作りました。
今回は、Webページに画像を表示してみます。
Webサイトでは、
- 商品画像
- バナー
- アイコン
- 写真
など、多くの場面で画像が使われています。
今回使用するファイル構成
この回では、次のファイルを使用します。
html-practice/
├── index.html
└── image.jpg
img タグを使う
画像を表示するときは、img タグを使います。
index.html と同じ場所に、画像ファイルを置いてください。
画像ファイル名は、
image.jpg
にしておきます。
HTMLを書いてみよう
以下のように変更してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像表示の練習</title>
<style>
body {
background-color: #f3f4f6;
text-align: center;
padding-top: 40px;
}
.image {
width: 300px;
border-radius: 12px;
}
</style>
</head>
<body>
<h1>
画像表示の練習
</h1>
<img
src="image.jpg"
alt="サンプル画像"
class="image"
>
</body>
</html>
保存したあと、ブラウザを更新してください。
画像が表示される
正しく設定できていれば、画像が表示されるはずです。
もし表示されない場合は、
- ファイル名
- 拡張子
- 保存場所
を確認してみてください。
src の意味
src="image.jpg"
の src は、
どの画像を表示するか
を指定しています。
現在は、
index.html と同じ場所にある image.jpg
を表示しています。
alt の意味
alt="サンプル画像"
の alt は、画像説明のテキストです。
これは、
- 画像が表示できない場合
- 音声読み上げ
- 検索エンジン
などで利用されます。
width を指定している
.image {
width: 300px;
}
により、画像サイズを調整しています。
もし指定しない場合、画像が非常に大きく表示されることがあります。
class を使って画像にCSSを適用している
今回も、
class="image"
を使っています。
そのため、
.image
のCSSが画像へ適用されます。
パスとは？
src="image.jpg"
のような指定を「パス」と呼びます。
パスとは、
ファイルの場所
を表すものです。
今回は、
同じフォルダ
なのでシンプルですが、実際のWeb制作ではフォルダが増えていきます。
わざと間違えてみよう
例えば、
src="aaa.jpg"
に変更するとどうなるでしょうか？
画像が表示されなくなるはずです。
これは、
そのファイルが存在しない
ためです。
ブラウザでよく見る現象
実際のWeb制作でも、
- 画像が表示されない
- CSSが反映されない
- ファイルが読み込まれない
ということは頻繁に起こります。
その多くは、
- ファイル名
- パス
- 拡張子
などのミスです。
初心者だけでなく、経験者でもよく発生します。
HTMLとCSSが少しずつつながってくる
現在は、
- HTML → 内容を書く
- CSS → 見た目を変える
- class → グループに名前を付ける
- img → 画像を表示する
という役割が少しずつ見えてきました。
最初は断片的でも問題ありません。
少しずつ、
「Webページはこうやって作られているんだな」
という感覚をつかんでいきましょう。
次のページでは
次のページでは、
- リンク
- a タグ
- ページ移動
を学んでいきます。
Webサイトらしい動きがさらに増えていきます。