【6日でできるHTML入門】画像の掲載
Webページに画像を掲載するには、HTMLファイルとは別に用意した画像ファイルを<img>タグで参照します。ここでは、画像形式やファイル名のルール、拡張子の確認方法から、実際の埋め込み手順、さらにタグに属性を指定する際のルールまで、一連の流れを丁寧に解説します。
１．画像ファイルの準備
1.1. 利用できる画像形式
ホームページで一般的にサポートされるのは JPEG（.jpg）／PNG（.png）／GIF（.gif） の３形式です。ブラウザ間の互換性を考えると、これらのいずれかを用いるのが無難です。
1.2. ファイル名のルール
- 半角英数字、ハイフン（-）、アンダースコア（_）のみを使用
- 日本語や空白、記号は避ける（環境によって正しく表示されない場合がある）
- 大文字・小文字はサーバーにより区別される場合があるため、一貫した命名を心がける
1.3. 画像拡張子の確認（Windows 11の場合）
- エクスプローラーを開く
- リボンの「表示」タブを選択
- 「表示」→「ファイル名拡張子」にチェックを入れる
これでファイル名に拡張子（.jpg/.png/.gif）が表示され、正しい形式か確認できます。
1.4. 保存場所とパス
- HTMLと同じフォルダに置くと、
src="ファイル名"だけで参照可能 - 別フォルダに置く場合は相対パス（例：
src="images/photo.jpg"）や絶対パスを指定
２．画像の埋め込み
2.1. <img>タグの基本構文
ファイル名： lesson05-1.html
<!-- lesson05-1.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>旅の写真ギャラリー📸</title>
</head>
<body>
<h1>北海道の風景</h1>
<p>夏の北海道で撮影した自然の一コマをご覧ください。</p>
<img src="hokkaido1.png" alt="ラベンダー畑と青空">
<img src="hokkaido2.png" alt="牧場を走る馬">
<p>これらは富良野と美瑛で撮影した写真です。</p>
</body>
</html>素材のダウンロード
以下のリンクから画像素材をダウンロードできます。
| ラベンダー畑の写真 | 牧場の馬の写真 |
|---|---|
 |  |
ブラウザの出力例
2.2. alt属性の指定
alt="説明文"は画像が表示できないときの代替テキスト- スクリーンリーダー利用者向けにも必須
<img src="hokkaido1.jpg" alt="ラベンダー畑と青空">３．属性の記述ルール
3.1. 基本構文
- 開始タグ内に
属性名="値"の形式で記述 =と"は半角- 属性名は小文字が慣例
3.2. 複数属性の指定
- 属性同士は半角スペースで区切る
- 例： <img src="photo.jpg" alt="説明" width="400" height="300">
まとめ
ここで登場したタグと属性をまとめます。
| タグ／属性 | 説明 |
|---|---|
| <img> | 画像を埋め込む空要素タグ |
| src="ファイルパス" | 表示する画像ファイルのURLまたは相対パス |
| alt="代替テキスト" | 画像表示失敗時やスクリーンリーダー用の代替テキスト |
| width="数値" | 画像の表示幅をピクセルで指定 |
| height="数値" | 画像の表示高さをピクセルで指定 |
これらを正しく組み合わせることで、閲覧環境やアクセシビリティに配慮した画像掲載が可能になります。