画像・リンク・テーブル・フォーム入門
Webページの「テキスト以外」を全部覚える

画像を表示する — img タグ

Webページに画像を表示するには<img>タグを使います。imgは「image（画像）」の略です。閉じタグが不要な特殊なタグです。

<img src="cat.jpg" alt="窓辺で寝ている茶色い猫">

src属性 — 画像ファイルの場所

srcは「source（ソース）」の略で、画像ファイルのパス（場所）を指定します。

<!-- 同じフォルダにある画像 -->
<img src="photo.jpg" alt="写真">

<!-- imagesフォルダの中にある画像 -->
<img src="images/photo.jpg" alt="写真">

<!-- 外部サイトの画像（URL） -->
<img src="https://example.com/images/photo.jpg" alt="写真">

alt属性 — 「もし画像が見えなかったら」

altは「alternative（代替テキスト）」の略で、画像が表示できなかった場合に代わりに表示されるテキストです。

altの重要性は3つあります:

1. アクセシビリティ: スクリーンリーダーがaltの内容を読み上げることで、視覚障害者に画像の内容を伝える
2. SEO: Googleはaltの内容から画像の内容を理解する。画像検索にも影響する
3. 通信エラー時: 画像が読み込めなかった場合に代替テキストが表示される

良いaltと悪いaltの例

<!-- ❌ 悪い: 情報がない -->
<img src="team.jpg" alt="画像">
<img src="team.jpg" alt="">
<img src="team.jpg" alt="team.jpg">

<!-- ✅ 良い: 画像の内容が伝わる -->
<img src="team.jpg" alt="2026年新年会でのチームメンバー集合写真">

<!-- ✅ 装飾目的の画像はaltを空にする -->
<img src="divider.png" alt="">

width と height — サイズ指定

<img src="photo.jpg" alt="風景写真" width="800" height="600">

widthとheightを書いておくと、画像の読み込み中に「枠」が確保されるので、ページがガタガタしなくなります（これを Cumulative Layout Shift: CLS の改善と言います。来週以降のSEOの話で詳しく触れます）。

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

画像やリンクで「ファイルの場所」を指定するとき、2種類の書き方があります。この違いを理解しないと「画像が表示されない」トラブルに何度もハマります。

絶対パス — URLを丸ごと書く

<!-- 絶対パス: 完全なURLを指定 -->
<img src="https://example.com/images/cat.jpg" alt="猫">
<a href="https://example.com/about/">Aboutページ</a>

世界中どこからでもアクセスできる「住所」。外部サイトの画像やリンクには絶対パスを使う。

相対パス — 今いる場所から見た道順

my-website/
├── index.html      ← 今ここ
├── about.html
├── images/
│   ├── cat.jpg
│   └── logo.png
└── pages/
    └── contact.html

<!-- index.html から見て -->
<img src="images/cat.jpg" alt="猫">            <!-- images フォルダの中 -->
<a href="about.html">About</a>                <!-- 同じ階層 -->
<a href="pages/contact.html">Contact</a>       <!-- pages フォルダの中 -->

<!-- pages/contact.html から index.html に戻るとき -->
<a href="../index.html">ホームに戻る</a>       <!-- ../ = 1つ上の階層 -->
<img src="../images/logo.png" alt="ロゴ">       <!-- 1つ上→imagesフォルダ -->

リンクを張る — a タグ

Webの「Web」はクモの巣の意味。ページとページをリンクで繋いでいくのがWebの本質です。リンクには<a>タグ（anchor: アンカー）を使います。

<!-- 基本のリンク -->
<a href="https://webatives.com/">ToolShare Lab</a>

<!-- 新しいタブで開く -->
<a href="https://webatives.com/" target="_blank" rel="noopener">ToolShare Lab（新しいタブ）</a>

<!-- 同じサイト内のリンク（相対パス） -->
<a href="about.html">自己紹介</a>

<!-- ページ内リンク（id指定） -->
<a href="#contact">お問い合わせまでジャンプ</a>

<!-- メールリンク -->
<a href="mailto:info@example.com">メールを送る</a>

target="_blank" と rel="noopener"

外部サイトへのリンクにtarget="_blank"を付けると新しいタブで開きます。このとき必ずrel="noopener"を一緒に書いてください。セキュリティ対策です（リンク先のページがあなたのページを操作できてしまう脆弱性を防ぎます）。

リンクテキストの書き方

<!-- ❌ 悪い: 何のリンクかわからない -->
<a href="about.html">こちら</a>をクリック

<!-- ✅ 良い: リンクテキストだけで意味がわかる -->
<a href="about.html">自己紹介ページ</a>を見る

スクリーンリーダーは「リンク一覧」を読み上げることができます。そのとき「こちら」「こちら」「こちら」と並んだら何もわかりません。リンクテキストだけで遷移先がわかるように書くのがプロの書き方です。

テーブルでデータを整理する

表形式のデータを表示するには<table>を使います。料金表、比較表、スケジュール表など、「行×列」のデータに使います。

<table>
    <thead>
        <tr>
            <th>料理名</th>
            <th>カロリー</th>
            <th>調理時間</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>スパイスカレー</td>
            <td>550kcal</td>
            <td>45分</td>
        </tr>
        <tr>
            <td>ペペロンチーノ</td>
            <td>480kcal</td>
            <td>15分</td>
        </tr>
        <tr>
            <td>味噌汁</td>
            <td>60kcal</td>
            <td>10分</td>
        </tr>
    </tbody>
</table>

テーブルの構造

フォームで入力欄を作る

お問い合わせページ、検索窓、ログイン画面——ユーザーに何かを入力してもらう場面では<form>を使います。

<form action="/submit" method="post">
    <label for="name">お名前</label>
    <input type="text" id="name" name="name" placeholder="山田太郎" required>

    <label for="email">メールアドレス</label>
    <input type="email" id="email" name="email" placeholder="example@mail.com" required>

    <label for="message">メッセージ</label>
    <textarea id="message" name="message" rows="5" placeholder="お問い合わせ内容"></textarea>

    <button type="submit">送信</button>
</form>

主な入力要素

label と for — 入力欄にラベルをつける

<!-- ✅ labelのfor属性とinputのid属性を一致させる -->
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">

<label>をクリックすると、対応する入力欄にフォーカスが移ります。これはアクセシビリティの基本。labelなしのフォームはプロの現場では絶対にNGです。

実践: 個人プロフィールページを作ろう

今週学んだ全要素を使って、「個人プロフィールページ」を作ります。これは、この先あなたが作るポートフォリオサイトの原型になります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>山田太郎 | Webエンジニア志望のプロフィール</title>
</head>
<body>
    <h1>山田太郎のプロフィール</h1>

    <img src="images/profile.jpg" alt="山田太郎のプロフィール写真" width="200" height="200">

    <h2>自己紹介</h2>
    <p>1995年生まれ。現在AIと一緒にWeb制作を学習中です。</p>
    <p>好きな食べ物はカレー。先週<a href="recipe.html">スパイスカレーのレシピ</a>も作りました。</p>

    <h2>スキル</h2>
    <table>
        <thead>
            <tr>
                <th>スキル</th>
                <th>レベル</th>
                <th>学習期間</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>HTML</td>
                <td>基礎習得中</td>
                <td>3週間</td>
            </tr>
            <tr>
                <td>CSS</td>
                <td>来週から</td>
                <td>0週間</td>
            </tr>
            <tr>
                <td>JavaScript</td>
                <td>まだ</td>
                <td>0週間</td>
            </tr>
        </tbody>
    </table>

    <h2>趣味</h2>
    <ul>
        <li>映画鑑賞（特にヒューマンドラマ）</li>
        <li>料理（スパイスカレーにハマり中）</li>
        <li>プログラミング学習</li>
    </ul>

    <h2>リンク集</h2>
    <ul>
        <li><a href="https://github.com/" target="_blank" rel="noopener">GitHub</a></li>
        <li><a href="https://x.com/" target="_blank" rel="noopener">X (Twitter)</a></li>
        <li><a href="recipe.html">先週作ったレシピページ</a></li>
    </ul>

    <hr>

    <h2>お問い合わせ</h2>
    <form action="#" method="post">
        <p>
            <label for="contact-name">お名前</label><br>
            <input type="text" id="contact-name" name="name" placeholder="山田太郎" required>
        </p>
        <p>
            <label for="contact-email">メールアドレス</label><br>
            <input type="email" id="contact-email" name="email" placeholder="example@mail.com" required>
        </p>
        <p>
            <label for="contact-subject">件名</label><br>
            <select id="contact-subject" name="subject">
                <option value="question">質問</option>
                <option value="work">お仕事の依頼</option>
                <option value="other">その他</option>
            </select>
        </p>
        <p>
            <label for="contact-message">メッセージ</label><br>
            <textarea id="contact-message" name="message" rows="5" placeholder="お気軽にどうぞ"></textarea>
        </p>
        <p>
            <button type="submit">送信</button>
        </p>
    </form>

    <hr>
    <p><small>&copy; 2026 山田太郎. All rights reserved.</small></p>
</body>
</html>

今週のよくある間違い

ミス1: alt属性を書かない/空にする

<!-- ❌ -->
<img src="hero.jpg">

<!-- ✅ -->
<img src="hero.jpg" alt="東京タワーの夜景">

ミス2: 相対パスが間違っている

「画像が表示されない！」の原因の80%はパスの間違いです。ブラウザの開発者ツール（F12）→ コンソールタブで404 (Not Found)エラーが出ていないか確認しましょう。

ミス3: labelとinputを紐付けていない

<!-- ❌ labelのfor と inputのid が一致していない -->
<label for="name">名前</label>
<input type="text" id="username">

<!-- ✅ 一致している -->
<label for="name">名前</label>
<input type="text" id="name">

今週の課題

必須要件

1. <img>でプロフィール画像（自分の写真でもアイコンでもOK）。alt属性必須
2. <a>でリンクを3つ以上（外部リンク1つ + 内部リンク1つ + ページ内リンク1つ）
3. <table>で何かのデータ表（スキル表、学習計画表など）
4. <form>でお問い合わせフォーム（名前、メール、メッセージ、送信ボタン）
5. 全ての<input>に<label>を紐付ける
6. Week 02で作ったレシピページへの相対パスリンク
7. 外部リンクにはtarget="_blank" rel="noopener"

ボーナス課題

• <select>でプルダウンメニューを入れてみる
• <input type="date">で日付入力を試す
• <input type="checkbox">で複数選択を作る
• 画像フォルダimages/を作ってファイルを整理する

AIに全部任せきりにしないでください。使うならまずAIに叩き台を作らせて、alt属性が入っているか、外部リンクにrel="noopener"が付いているか出力を読んで確認し、自分の手で直してください。間違いに気づいて直せることが、この土台を身につけたという証拠です。

提出前に、AIが作ったコードでよくある間違いも確認しておきましょう。上で見た「今週のよくある間違い」に加えて、AI特有のクセもあります。

自己診断テスト

1. imgタグのalt属性は何のためにありますか？3つの理由を挙げてください
2. 相対パスで「1つ上のフォルダ」を表す記号は何ですか？
3. aタグで外部リンクを新しいタブで開くには、何を書きますか？
4. thとtdの違いは何ですか？
5. labelのfor属性とinputのid属性はなぜ一致させる必要がありますか？
6. テーブルをレイアウト目的で使ってはいけない理由を説明できますか？

来週の予告 — Week 04: セマンティック・メタタグ・アクセシビリティ

来週はPhase 1（HTML）の最終週。<header> <nav> <main> <article> <section> <footer> といった「セマンティック要素」を使って、ページの構造を明確にします。

メタタグ（<meta>）でSEOの土台を固め、アクセシビリティの基礎（aria属性、キーボード操作対応）にも触れます。Phase 1 を完了したあなたは、「HTMLだけで作れるページ」のほぼ全てを書けるようになっています。