画像と代替テキストを表示しよう

作成ファイル・保存場所

作成した html-basic フォルダの中に html04.html というファイル名で保存してください。
また、ローカル画像用に images/cafe.jpg を同じディレクトリ内に配置してください。

目的

画像を表示する <img> タグの基本と、アクセシビリティやSEOの観点でも重要な alt 属性の意味と使い方を学ぶ。
また、スクリーンリーダー対応を意識し、必要に応じて aria-label を使って説明を補足する方法も理解する。

指示

以下の条件に従って、画像を2種類表示するHTMLページを作成してください。

HTMLの基本構造は前回と同様に記述すること
タイトルは「HTML課題04」とすること
<h1> タグで「お気に入りのカフェ紹介」と表示すること
画像は以下の 2種類とも 表示してください：
1. Kobeya Labのダミー画像生成ツールを使って、画像URLを <img> の src に指定する
  - 画像ジェネレーター：https://kobeya.com/no-image-generator/
  - 例：https://dummy.kobeya.com/?width=500&height=400&text=CafeImage
2. ローカルに配置した画像を表示する
  - フォルダ構成：images/cafe.jpg
  - HTMLでは src="images/cafe.jpg" と記述する
両方の <img> に alt 属性を設定し、画像の内容や目的を伝える説明文を記述すること
※補足：画像がリンクとして使われる場合は、<a> タグと組み合わせて aria-label を使うこともあります（例：カフェメニューに移動する画像リンクなど）

aria-labelを調べてみよう！

チェックポイント

2つの <img> タグがそれぞれ正しく表示されているか
alt 属性が画像の意味を適切に伝えているか
外部画像とローカル画像のパス指定の違いが理解できているか
画像をリンクとして使用する際に aria-label を活用する場面を理解しているか
インデントや閉じタグのミスがないか

HTMLの解答例

画像の相対アドレス・絶対アドレスをしっかりと理解しましょう。

画像絶対アドレス：https://dummy.kobeya.com/?width=500&height=400&text=CafeImage

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTML課題04</title>
</head>

<body>
    <h1>お気に入りのカフェ紹介</h1>
    <p>まずはダミー画像を表示します：</p>
    <img src="https://dummy.kobeya.com/?width=500&height=400&text=CafeImage" alt="カフェの外観を表すダミー画像">
    <p>次にローカル画像を表示します：</p>
    <img src="images/cafe.jpg" alt="店舗で提供しているコーヒーの写真">
    <p>画像をクリックしてメニューに移動する例（aria-labelの使用）：</p>
    <a href="menu.html" aria-label="カフェメニューのページへ移動">
        <img src="images/cafe.jpg" alt="コーヒーカップの写真">
    </a>
</body>

</html>

VS Codeの状態

エディタでは、imagesフォルダにcafe.jpgが配置されていないとコーヒーの写真は表示されません。