第3回：HTML応用とセマンティクス

🎯 学習目標

セマンティックHTMLの重要性を理解する
構造的で意味のあるマークアップができる
フォームとテーブルを正しく実装できる
アクセシビリティを考慮したHTMLを書ける

📚 導入（5分）

前回課題の発表とフィードバック

前回作成した自己紹介ページを確認しましょう：

適切な見出し階層になっているか
リストは正しく使い分けられているか
alt属性は適切に設定されているか

セマンティクスの概念紹介

セマンティック（semantic） = 「意味論的な」


<!-- ❌ 非セマンティック（意味が不明確） -->
<div class="header">
    <div class="nav">...</div>
</div>
 
<!-- ✅ セマンティック（意味が明確） -->
<header>
    <nav>...</nav>
</header>

💡 理論学習（30分）

セマンティックHTML（20分）

なぜセマンティクスが重要なのか

1. SEO（検索エンジン最適化）

検索エンジンがページの構造と内容を正確に理解：


<!-- 検索エンジンが記事として認識 -->
<article>
    <h1>記事タイトル</h1>
    <time datetime="2024-01-15">2024年1月15日</time>
    <p>記事の内容...</p>
</article>

2. アクセシビリティ（音声読み上げ）

スクリーンリーダーが適切にナビゲート：


<!-- スクリーンリーダーが「ナビゲーション」として認識 -->
<nav aria-label="メインメニュー">
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">私について</a></li>
    </ul>
</nav>

3. 保守性の向上

コードが自己文書化される：


<!-- 役割が一目瞭然 -->
<main>
    <section id="profile">...</section>
    <section id="skills">...</section>
    <aside>広告</aside>
</main>

主要セマンティック要素

header：ページ/セクションのヘッダー


<!-- ページ全体のヘッダー -->
<header>
    <h1>サイトタイトル</h1>
    <nav>
        <ul>
            <li><a href="/">ホーム</a></li>
            <li><a href="/about">概要</a></li>
        </ul>
    </nav>
</header>
 
<!-- 記事のヘッダー -->
<article>
    <header>
        <h2>記事タイトル</h2>
        <p>投稿日：<time>2024-01-15</time></p>
    </header>
    <p>記事本文...</p>
</article>

nav：ナビゲーション


<!-- メインナビゲーション -->
<nav aria-label="メインメニュー">
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/products">製品</a></li>
        <li><a href="/contact">お問い合わせ</a></li>
    </ul>
</nav>
 
<!-- パンくずリスト -->
<nav aria-label="パンくずリスト">
    <ol>
        <li><a href="/">ホーム</a></li>
        <li><a href="/products">製品</a></li>
        <li>製品詳細</li>
    </ol>
</nav>

main：メインコンテンツ


<body>
    <header>...</header>
    
    <!-- ページのメインコンテンツ（1ページに1つだけ） -->
    <main>
        <h1>ページのメインタイトル</h1>
        <p>メインコンテンツ...</p>
    </main>
    
    <footer>...</footer>
</body>

section：テーマ別セクション


<main>
    <!-- 関連するコンテンツのグループ -->
    <section>
        <h2>私について</h2>
        <p>自己紹介...</p>
    </section>
    
    <section>
        <h2>スキル</h2>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </section>
</main>

article：独立した記事


<!-- ブログ記事 -->
<article>
    <header>
        <h2>HTMLセマンティクスの重要性</h2>
        <p>著者：山田太郎</p>
        <time datetime="2024-01-15">2024年1月15日</time>
    </header>
    
    <p>記事の内容...</p>
    
    <footer>
        <p>カテゴリ：Web開発</p>
    </footer>
</article>

aside：補足情報


<main>
    <article>
        <h1>メイン記事</h1>
        <p>記事内容...</p>
    </article>
    
    <!-- サイドバー -->
    <aside>
        <h2>関連記事</h2>
        <ul>
            <li><a href="#">関連記事1</a></li>
            <li><a href="#">関連記事2</a></li>
        </ul>
    </aside>
</main>

footer：ページ/セクションのフッター


<!-- ページフッター -->
<footer>
    <nav>
        <ul>
            <li><a href="/privacy">プライバシーポリシー</a></li>
            <li><a href="/terms">利用規約</a></li>
        </ul>
    </nav>
    <p>&copy; 2024 会社名. All rights reserved.</p>
</footer>

フォームとテーブル（10分）

フォーム要素の基本

form：データ送信の枠組み


<form action="/submit" method="POST">
    <!-- フォーム要素 -->
</form>

input：様々な入力タイプ


<!-- テキスト入力 -->
<label for="name">名前：</label>
<input type="text" id="name" name="name" required>
 
<!-- メールアドレス -->
<label for="email">メール：</label>
<input type="email" id="email" name="email" required>
 
<!-- パスワード -->
<label for="password">パスワード：</label>
<input type="password" id="password" name="password" minlength="8">
 
<!-- 数値 -->
<label for="age">年齢：</label>
<input type="number" id="age" name="age" min="0" max="120">
 
<!-- 日付 -->
<label for="birthday">誕生日：</label>
<input type="date" id="birthday" name="birthday">
 
<!-- チェックボックス -->
<label>
    <input type="checkbox" name="agree" value="yes">
    利用規約に同意する
</label>
 
<!-- ラジオボタン -->
<fieldset>
    <legend>性別：</legend>
    <label>
        <input type="radio" name="gender" value="male">
        男性
    </label>
    <label>
        <input type="radio" name="gender" value="female">
        女性
    </label>
    <label>
        <input type="radio" name="gender" value="other">
        その他
    </label>
</fieldset>

textarea：複数行テキスト


<label for="message">メッセージ：</label>
<textarea id="message" name="message" rows="5" cols="30">
デフォルトテキスト
</textarea>

select/option：選択肢


<label for="prefecture">都道府県：</label>
<select id="prefecture" name="prefecture">
    <option value="">選択してください</option>
    <option value="tokyo">東京都</option>
    <option value="osaka">大阪府</option>
    <option value="kyoto">京都府</option>
</select>

button：送信ボタン


<!-- 送信ボタン -->
<button type="submit">送信</button>
 
<!-- リセットボタン -->
<button type="reset">リセット</button>
 
<!-- 通常のボタン（JavaScriptで使用） -->
<button type="button" onclick="alert('クリックされました')">
    クリック
</button>

テーブルの構造


<table>
    <!-- テーブルのキャプション -->
    <caption>2024年売上データ</caption>
    
    <!-- ヘッダー部 -->
    <thead>
        <tr>
            <th scope="col">月</th>
            <th scope="col">売上</th>
            <th scope="col">前年比</th>
        </tr>
    </thead>
    
    <!-- ボディ部 -->
    <tbody>
        <tr>
            <th scope="row">1月</th>
            <td>100万円</td>
            <td>+10%</td>
        </tr>
        <tr>
            <th scope="row">2月</th>
            <td>120万円</td>
            <td>+15%</td>
        </tr>
    </tbody>
    
    <!-- フッター部 -->
    <tfoot>
        <tr>
            <th scope="row">合計</th>
            <td>220万円</td>
            <td>+12.5%</td>
        </tr>
    </tfoot>
</table>

🛠️ 実習（50分）

前回の自己紹介ページのブラッシュアップ（45分）

セマンティックHTMLを使った構造化


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Web制作を学んでいる山田太郎のポートフォリオサイト">
    <title>山田太郎 - ポートフォリオ</title>
</head>
<body>
    <!-- ページヘッダー -->
    <header>
        <h1>山田太郎のポートフォリオ</h1>
        <nav aria-label="メインナビゲーション">
            <ul>
                <li><a href="#about">私について</a></li>
                <li><a href="#skills">スキル</a></li>
                <li><a href="#works">作品</a></li>
                <li><a href="#contact">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- メインコンテンツ -->
    <main>
        <!-- 自己紹介セクション -->
        <section id="about">
            <h2>私について</h2>
            <article>
                <header>
                    <h3>プロフィール</h3>
                    <img src="https://via.placeholder.com/200" alt="山田太郎のプロフィール写真">
                </header>
                
                <p>
                    はじめまして、<strong>山田太郎</strong>です。
                    Web制作の勉強を始めて3ヶ月になります。
                </p>
                
                <dl>
                    <dt>職業</dt>
                    <dd>Webデザイナー志望</dd>
                    
                    <dt>出身地</dt>
                    <dd>東京都渋谷区</dd>
                    
                    <dt>趣味</dt>
                    <dd>プログラミング、読書、映画鑑賞</dd>
                </dl>
            </article>
        </section>
        
        <!-- スキルセクション -->
        <section id="skills">
            <h2>スキル</h2>
            
            <table>
                <caption>技術スキル一覧</caption>
                <thead>
                    <tr>
                        <th scope="col">技術</th>
                        <th scope="col">レベル</th>
                        <th scope="col">経験</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">HTML</th>
                        <td>中級</td>
                        <td>3ヶ月</td>
                    </tr>
                    <tr>
                        <th scope="row">CSS</th>
                        <td>初級</td>
                        <td>2ヶ月</td>
                    </tr>
                    <tr>
                        <th scope="row">JavaScript</th>
                        <td>初級</td>
                        <td>1ヶ月</td>
                    </tr>
                </tbody>
            </table>
        </section>
        
        <!-- 作品セクション -->
        <section id="works">
            <h2>作品</h2>
            
            <article>
                <h3>自己紹介サイト</h3>
                <time datetime="2024-01-15">2024年1月15日</time>
                <p>HTML5とセマンティックマークアップを使用した自己紹介サイト</p>
                <a href="#">詳細を見る</a>
            </article>
            
            <article>
                <h3>企業サイト（模写）</h3>
                <time datetime="2024-01-10">2024年1月10日</time>
                <p>実際の企業サイトを模写して作成</p>
                <a href="#">詳細を見る</a>
            </article>
        </section>
        
        <!-- お問い合わせセクション -->
        <section id="contact">
            <h2>お問い合わせ</h2>
            
            <form action="/submit" method="POST">
                <fieldset>
                    <legend>基本情報</legend>
                    
                    <div>
                        <label for="contact-name">
                            お名前 <span aria-label="必須">*</span>
                        </label>
                        <input 
                            type="text" 
                            id="contact-name" 
                            name="name" 
                            required
                            aria-required="true"
                        >
                    </div>
                    
                    <div>
                        <label for="contact-email">
                            メールアドレス <span aria-label="必須">*</span>
                        </label>
                        <input 
                            type="email" 
                            id="contact-email" 
                            name="email" 
                            required
                            aria-required="true"
                            placeholder="example@email.com"
                        >
                    </div>
                    
                    <div>
                        <label for="contact-tel">
                            電話番号
                        </label>
                        <input 
                            type="tel" 
                            id="contact-tel" 
                            name="tel"
                            pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
                            placeholder="090-1234-5678"
                        >
                    </div>
                </fieldset>
                
                <fieldset>
                    <legend>お問い合わせ内容</legend>
                    
                    <div>
                        <label for="contact-type">
                            お問い合わせ種別
                        </label>
                        <select id="contact-type" name="type">
                            <option value="">選択してください</option>
                            <option value="work">お仕事の依頼</option>
                            <option value="question">質問</option>
                            <option value="other">その他</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="contact-message">
                            メッセージ <span aria-label="必須">*</span>
                        </label>
                        <textarea 
                            id="contact-message" 
                            name="message" 
                            rows="5" 
                            required
                            aria-required="true"
                        ></textarea>
                    </div>
                </fieldset>
                
                <div>
                    <label>
                        <input type="checkbox" name="privacy" required>
                        <a href="/privacy">プライバシーポリシー</a>に同意する
                    </label>
                </div>
                
                <div>
                    <button type="submit">送信する</button>
                    <button type="reset">リセット</button>
                </div>
            </form>
        </section>
        
        <!-- 補足情報 -->
        <aside>
            <h2>最新のお知らせ</h2>
            <ul>
                <li>
                    <time datetime="2024-01-15">2024/01/15</time>
                    ポートフォリオサイトを更新しました
                </li>
                <li>
                    <time datetime="2024-01-10">2024/01/10</time>
                    新しい作品を追加しました
                </li>
            </ul>
        </aside>
    </main>
    
    <!-- ページフッター -->
    <footer>
        <nav aria-label="フッターナビゲーション">
            <ul>
                <li><a href="/privacy">プライバシーポリシー</a></li>
                <li><a href="/sitemap">サイトマップ</a></li>
            </ul>
        </nav>
        
        <address>
            連絡先：
            <a href="mailto:taro@example.com">taro@example.com</a>
        </address>
        
        <p>
            <small>&copy; 2024 山田太郎. All rights reserved.</small>
        </p>
    </footer>
</body>
</html>

アクセシビリティの考慮点

ARIA属性の活用


<!-- ランドマークの明確化 -->
<nav aria-label="メインメニュー">
<nav aria-label="パンくずリスト">
<nav aria-label="フッターメニュー">
 
<!-- 必須項目の明示 -->
<input required aria-required="true">
<span aria-label="必須">*</span>
 
<!-- 現在のページを示す -->
<a href="/home" aria-current="page">ホーム</a>
 
<!-- 説明の関連付け -->
<input aria-describedby="password-help">
<small id="password-help">8文字以上で入力してください</small>

スキップリンク


<!-- ページの最初に配置（通常は非表示） -->
<a href="#main" class="skip-link">メインコンテンツへスキップ</a>
 
<main id="main">
    <!-- メインコンテンツ -->
</main>

📝 まとめ・質疑応答（5分）

セマンティックHTMLの利点確認

✅ チェックリスト

適切なセマンティック要素を使用している
フォームにラベルが正しく関連付けられている
テーブルに適切なヘッダーが設定されている
ARIA属性で補足情報を提供している
文書構造が論理的である

次回予告：CSSでのスタイリング

次回から本格的にCSSを学習します：

CSSの基本構文
セレクターの種類と詳細度
色、フォント、サイズの指定
ボックスモデルの理解

🏠 宿題

セマンティックHTMLで企業サイトのトップページを作成
- header, nav, main, section, article, aside, footerをすべて使用
- お問い合わせフォームを含める
- テーブルで料金表を作成
アクセシビリティチェック
- WAVE でアクセシビリティをチェック
- スクリーンリーダーで読み上げテスト（可能であれば）

構造化データの追加（発展）


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "山田太郎",
  "jobTitle": "Webデザイナー"
}
</script>

📚 参考リソース

次回もお楽しみに！ 🚀