ToolShare Lab

Week 04 / Phase 1: HTML(最終週) バイブコーディングの土台 — フロントエンドレッスン

セマンティック・メタタグ・アクセシビリティ
HTMLを「正しく」書く技術

Week 01〜03で、HTMLの基本構造・テキスト要素・画像・リンク・テーブル・フォームを学びました。今週はPhase 1の最終週。<div>で何でも囲むHTMLから卒業し、<header> <nav> <main> <footer>で「意味のある構造」を書けるようになります。メタタグでSEOの土台を固め、アクセシビリティの基礎を身につけます。

読了時間: 約30分 公開日: 2026年4月9日 前提知識: Week 01〜03 完了

今週のゴール

セマンティック要素(header, nav, main, article, section, footer)でページ構造を正しくマークアップできる。<head>内のメタタグとOGPを理解する。アクセシビリティの基本(aria属性、キーボード操作対応)を知る。最終課題としてPhase 1の集大成「完全なHTMLポートフォリオページ」を完成させる。

なぜ「意味」が大事なのか — div地獄からの脱出

まず、次の2つのコードを見てください。どちらも見た目はまったく同じページになります。 

<!-- パターンA: div で全部囲む -->
<div class="header">
    <div class="logo">My Site</div>
    <div class="nav">
        <div class="nav-item"><a href="/">ホーム</a></div>
        <div class="nav-item"><a href="/about">概要</a></div>
    </div>
</div>
<div class="main">
    <div class="content">...</div>
</div>
<div class="footer">...</div>
<!-- パターンB: セマンティック要素を使う -->
<header>
    <h1>My Site</h1>
    <nav>
        <ul>
            <li><a href="/">ホーム</a></li>
            <li><a href="/about">概要</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>...</article>
</main>
<footer>...</footer>

見た目は同じ。でも「パターンB」の方が圧倒的に良いコードです。なぜか？3つの理由があります。

理由1: 検索エンジン(Google)が理解できる

Googleのクローラー(ロボット)は、ページを巡回してHTMLを読んでいます。<div class="nav">と書かれても、それがナビゲーションだとは分かりません。<nav>と書いてあれば、「ここはナビゲーションだ」と一発で理解できます。

理由2: スクリーンリーダーがページを読み上げられる

視覚障害のある方はスクリーンリーダー(画面読み上げソフト)でWebを利用します。セマンティック要素を使えば、「ヘッダー」「ナビゲーション」「メインコンテンツ」「フッター」と読み上げられ、ページ構造を把握できます。<div>だけだと、全部「グループ」としか読まれません。

理由3: コードの可読性が上がる

チーム開発では他人のコードを読む機会がたくさんあります。<header>と書いてあれば「ヘッダーだな」と3秒で分かります。<div class="top-area-wrapper">だと、「え、何これ？」と5分悩みます。

覚え方: <div>は「他に適切な要素がない時の最終手段」。まずセマンティック要素を検討して、どれにも当てはまらない時だけ<div>を使う。

セマンティック要素一覧 — ページの地図を作る

HTMLには「このかたまりはページのどういう部分か」を伝えるための要素が用意されています。主要なものを全て覚えましょう。

header — ページやセクションの導入部

サイトのロゴ、サイト名、ナビゲーションなどが入る「ヘッダー」です。ページ全体のヘッダーだけでなく、<article>の中のヘッダーとしても使えます。 

<header>
    <h1>ToolShare Lab</h1>
    <p>フリーランス向け無料ツール集</p>
</header>

nav — ナビゲーション

サイト内を移動するためのリンク群です。グローバルナビ(サイト全体のメニュー)やパンくずリストに使います。ページ内の全てのリンク集に使うわけではありません。主要なナビゲーションにだけ使ってください。 

<nav aria-label="メインメニュー">
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/tools/">ツール</a></li>
        <li><a href="/guides/">ガイド</a></li>
        <li><a href="/contact/">お問い合わせ</a></li>
    </ul>
</nav>

main — メインコンテンツ

そのページの「主要なコンテンツ」です。1ページに1つだけ使います。ヘッダー・フッター・サイドバーは含めません。 

<main>
    <h1>今日のニュース</h1>
    <article>...</article>
    <article>...</article>
</main>

article — 独立したコンテンツ

「それだけで意味が通じる、独立した1つのコンテンツ」を囲みます。ブログ記事、ニュース記事、商品カード、コメントなどが該当します。そのarticleをコピーして別のサイトに貼り付けても意味が通じるかどうかが判断基準です。 

<article>
    <header>
        <h2>CSSグリッドの使い方</h2>
        <time datetime="2026-04-09">2026年4月9日</time>
    </header>
    <p>CSS Gridは2次元レイアウトを実現する...</p>
</article>

section — テーマでまとめたグループ

関連するコンテンツをテーマごとにまとめるセクションです。必ず見出し(h2〜h6)を含めてください。見出しが不要なただのスタイリング目的なら、<div>を使います。 

<section>
    <h2>サービス紹介</h2>
    <p>当社は3つのサービスを提供しています。</p>
    ...
</section>
<section>
    <h2>料金プラン</h2>
    ...
</section>

aside — 補足情報・サイドバー

メインコンテンツに関連はあるが、なくてもメインの内容が成立する補足情報です。サイドバー、関連リンク、広告エリア、用語説明のコラムなどに使います。 

<aside>
    <h3>関連記事</h3>
    <ul>
        <li><a href="/html-basics/">HTML入門</a></li>
        <li><a href="/css-basics/">CSS入門</a></li>
    </ul>
</aside>

footer — ページやセクションの末尾

著作権表示、連絡先、サイトマップリンクなどが入る「フッター」です。<header>と同様、ページ全体のフッターだけでなく<article>のフッターとしても使えます。 

<footer>
    <p>&copy; 2026 山田太郎. All rights reserved.</p>
    <nav aria-label="フッターナビ">
        <a href="/privacy/">プライバシーポリシー</a>
        <a href="/terms/">利用規約</a>
    </nav>
</footer>

まとめ: ページ構造の全体像

典型的なWebページのセマンティック構造は、こうなります。

<body>
    <header>
        <h1>サイト名</h1>
        <nav aria-label="メインメニュー">...</nav>
    </header>

    <main>
        <article>
            <header>
                <h2>記事タイトル</h2>
                <time datetime="2026-04-09">2026年4月9日</time>
            </header>
            <section>
                <h3>セクション1</h3>
                <p>本文...</p>
            </section>
            <section>
                <h3>セクション2</h3>
                <p>本文...</p>
            </section>
            <footer>
                <p>著者: 山田太郎</p>
            </footer>
        </article>

        <aside>
            <h2>関連記事</h2>
            ...
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 My Site</p>
    </footer>
</body>

使い分けに迷ったら: 「このかたまりだけ切り出して他のサイトに貼れるか？」→ YES なら<article>。「テーマの見出しがあるか？」→ YES なら<section>。どちらでもなければ<div>。

実践: プロフィールページをセマンティック化する

Week 03 で作った個人プロフィールページを覚えていますか？あのページをセマンティック要素で書き直してみましょう。

Before: div で囲んだ版

<body>
    <div class="header">
        <h1>山田太郎のポートフォリオ</h1>
    </div>
    <div class="nav">
        <a href="#profile">プロフィール</a>
        <a href="#skills">スキル</a>
        <a href="#contact">お問い合わせ</a>
    </div>
    <div class="main">
        <div class="profile">
            <h2>自己紹介</h2>
            <img src="photo.jpg" alt="山田太郎">
            <p>Web制作を学んでいます。</p>
        </div>
        <div class="skills">
            <h2>スキル一覧</h2>
            <table>...</table>
        </div>
        <div class="contact">
            <h2>お問い合わせ</h2>
            <form>...</form>
        </div>
    </div>
    <div class="footer">
        <p>&copy; 2026 山田太郎</p>
    </div>
</body>

After: セマンティック版

<body>
    <header>
        <h1>山田太郎のポートフォリオ</h1>
        <nav aria-label="ページ内ナビゲーション">
            <ul>
                <li><a href="#profile">プロフィール</a></li>
                <li><a href="#skills">スキル</a></li>
                <li><a href="#contact">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="profile">
            <h2>自己紹介</h2>
            <img src="photo.jpg" alt="山田太郎のプロフィール写真">
            <p>Web制作を学んでいます。</p>
        </section>

        <section id="skills">
            <h2>スキル一覧</h2>
            <table>...</table>
        </section>

        <section id="contact">
            <h2>お問い合わせ</h2>
            <form action="#" method="post">...</form>
        </section>
    </main>

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

変更点をまとめると:

大事なポイント: セマンティック化は「見た目を変える作業」ではなく、「意味を正しく伝える作業」です。CSSを何も書かなければ、beforeとafterの見た目はほぼ同じです。

メタタグ入門 — head の中身を理解する

Week 01 で<head>タグの中に<title>と<meta charset="utf-8">を書いたのを覚えていますか？実は<head>にはもっと多くの情報を書くことができます。これらは画面には表示されませんが、ブラウザ・検索エンジン・SNSがページを正しく理解するために必要です。

必須のメタタグ

<head>
    <!-- 文字コード（必ず先頭） -->
    <meta charset="utf-8">

    <!-- レスポンシブ対応（スマホ表示に必須） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- ページタイトル（ブラウザのタブと検索結果に表示される） -->
    <title>山田太郎 - Webエンジニアポートフォリオ</title>

    <!-- ページの説明（検索結果のタイトルの下に表示される） -->
    <meta name="description" content="Web制作を学んでいる山田太郎のポートフォリオサイト。HTML/CSS/JavaScriptの学習成果を掲載しています。">
</head>

それぞれの役割を詳しく見ていきましょう。

charset — 文字化けを防ぐ

<meta charset="utf-8">は「このページはUTF-8という文字コードで書かれています」とブラウザに伝えます。これがないと日本語が文字化けする可能性があります。必ず<head>の最初に書いてください。

viewport — スマホ対応の第一歩

<meta name="viewport">がないと、スマホでページを開いた時にPC版のレイアウトが縮小表示されてしまいます。width=device-widthで「画面幅に合わせる」、initial-scale=1.0で「初期拡大率を100%にする」という意味です。

実験してみよう: Week 01で作ったHTMLファイルからviewportの行を削除して、ブラウザの開発者ツール(F12) → デバイスツールバー(スマホアイコン) でスマホ表示にしてみてください。文字が豆粒みたいに小さくなるはずです。

description — 検索結果での「紹介文」

<meta name="description">は、Googleの検索結果でタイトルの下に表示される説明文です。120文字以内が推奨です。ここが魅力的だとクリックされやすくなります。

書かなくてもGoogleが本文から自動で抜き出してくれますが、意図した文章を表示させたいなら自分で書くべきです。

その他よく使うメタタグ

<!-- 検索エンジンへの指示（通常は不要。特殊な場合のみ） -->
<meta name="robots" content="index, follow">

<!-- テーマカラー（スマホブラウザのアドレスバーの色） -->
<meta name="theme-color" content="#1a1a2e">

<!-- 作者名 -->
<meta name="author" content="山田太郎">

<!-- CSSの読み込み -->
<link rel="stylesheet" href="style.css">

<!-- ファビコン（ブラウザタブのアイコン） -->
<link rel="icon" href="favicon.ico">

OGP・ファビコン — SNSでの見え方を制御する

URLをX(Twitter)やLINEで共有した時に、タイトルと画像とサイト名が表示されるカードを見たことがありますか？あれはHTMLのOGP(Open Graph Protocol)タグが作っています。

OGPの基本

<head>
    <!-- 基本のOGPタグ -->
    <meta property="og:title" content="山田太郎 - Webエンジニアポートフォリオ">
    <meta property="og:description" content="HTML/CSS/JavaScriptの学習成果を掲載しています。">
    <meta property="og:image" content="https://example.com/ogp.jpg">
    <meta property="og:url" content="https://example.com/">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="山田太郎のサイト">

    <!-- X(Twitter)用 -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@yamada_taro">
</head>

各プロパティの意味:

今はまだ設定しなくて大丈夫: OGPは「インターネット上に公開した後」に効果を発揮します。ローカルで練習している段階では、「こういうものがある」と知っておくだけで十分。Phase 3(LP完成)の時に実際に設定します。

ファビコン — ブラウザタブのアイコン

ブラウザのタブに表示される小さなアイコンがファビコン(favicon)です。設定しないとブラウザのデフォルトアイコンが表示されます。 

<!-- 基本（.ico形式） -->
<link rel="icon" href="/favicon.ico">

<!-- SVG形式（モダンブラウザ推奨） -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Apple端末用 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

SEOの基礎 — 検索エンジンにページを正しく伝える

SEO(Search Engine Optimization)は「検索エンジン最適化」の略です。Googleで検索した時に上位に表示されるための施策を指します。HTMLの書き方だけでもSEOの基礎は固められます。

HTMLでできるSEO — 5つのポイント

1. title タグを適切に書く

検索結果に一番大きく表示されるのが<title>です。ページの内容を正確に表す30文字以内のタイトルを書きましょう。 

<!-- ❌ 曖昧 -->
<title>山田のページ</title>

<!-- ✅ 具体的 -->
<title>山田太郎 - Web制作学習ポートフォリオ</title>

2. 見出し(h1〜h6)を正しい順序で使う

Week 02で学んだ通り、見出しは文書のアウトラインを作ります。<h1>は1ページに1つ、<h2>→<h3>の順に階層化。<h1>の次にいきなり<h4>が来るのはNGです。

3. description メタタグを書く

先ほど説明した通り、120文字以内でページの内容を要約します。各ページごとにユニーク(一意)な内容にしてください。全ページ同じdescriptionは逆効果です。

4. 画像にalt属性を書く

Week 03で学んだalt属性。Googleの画像検索はalt属性を参考にしています。「何が写っているか」を正確に記述しましょう。

5. セマンティック要素を使う

今週学んだ内容そのものです。<header> <nav> <main> <article> <footer>を使うことで、Googleはページの構造を正確に理解できます。

SEOの本質: 「検索エンジンのためにコードを書く」のではなく、「ユーザーにとって良いページを、検索エンジンにも正確に伝わるコードで書く」のがSEOです。小手先のテクニックより、良いコンテンツ + 正しいHTML が最強です。

アクセシビリティ入門 — 全ての人がWebを使えるように

アクセシビリティ(a11y)とは、障害がある方、高齢の方、一時的にマウスが使えない方など、全ての人がWebサイトを利用できるようにすることです。

「自分には関係ない」と思うかもしれません。でも考えてみてください:

これらは全て「アクセシビリティ」の問題です。特別な人のための特別な対応ではなく、全ての人のための基本設計です。

HTMLでできるアクセシビリティ — 5つの基本

1. セマンティック要素を使う(既に学習済み!)

<nav> <main> <header> <footer>を使うだけで、スクリーンリーダーのユーザーはページ構造を把握できます。これが最も効果的なアクセシビリティ対応です。

2. alt属性を必ず書く(既に学習済み!)

画像の内容を文字で伝える。装飾的な画像(意味を持たない飾り画像)の場合はalt=""(空)にします。 

<!-- 意味のある画像 -->
<img src="chart.png" alt="2026年の月別売上グラフ。3月が最高で120万円">

<!-- 装飾的な画像（情報を持たない） -->
<img src="decoration-line.png" alt="">

3. labelとinputを紐付ける(既に学習済み!)

Week 03で学んだ<label for="...">。これがあることで、スクリーンリーダーが「名前の入力欄です」と読み上げてくれます。

4. キーボードで操作できるようにする

マウスが使えないユーザーは、Tabキーでフォーカスを移動し、Enterキーで操作します。HTMLの標準要素(<a> <button> <input>)は最初からキーボード操作に対応しています。 

<!-- ✅ ボタンはbuttonタグで。キーボード操作可能 -->
<button type="button">メニューを開く</button>

<!-- ❌ divにclickイベントを付ける。キーボードで操作できない -->
<div onclick="openMenu()">メニューを開く</div>

試してみよう: 今見ているこのページで、マウスを使わずにTabキーだけで操作してみてください。リンクやボタンに順番にフォーカスが当たるのが分かるはずです。

5. 十分な色コントラストを確保する

薄いグレーの文字は目が良い人でも読みにくいですよね。WCAG(Webコンテンツアクセシビリティガイドライン)では、文字と背景のコントラスト比が4.5:1以上であることを推奨しています。これはCSSの話ですが、今のうちに知っておいてください。

ARIA属性 — スクリーンリーダーへの情報提供

ARIA(Accessible Rich Internet Applications)は、HTMLの標準要素だけでは伝えきれない情報をスクリーンリーダーに伝えるための属性です。

大事な原則: セマンティックHTMLで伝えられるならARIAは不要です。ARIAは「HTMLの標準機能で足りない時の補助」です。

よく使うARIA属性

aria-label — 目に見えないラベルを付ける

<!-- ナビゲーションが複数ある場合、区別するために使う -->
<nav aria-label="メインメニュー">...</nav>
<nav aria-label="フッターナビ">...</nav>

<!-- アイコンだけのボタンに説明を付ける -->
<button aria-label="メニューを開く">
    ☰
</button>

aria-labelは画面には表示されませんが、スクリーンリーダーが「メインメニュー、ナビゲーション」のように読み上げてくれます。

aria-hidden — スクリーンリーダーから隠す

<!-- 装飾的なアイコンを読み上げさせない -->
<span aria-hidden="true">🔍</span>
<span>検索</span>

装飾目的の絵文字やアイコンをスクリーンリーダーに読み上げさせたくない場合に使います。上の例だと、「検索」とだけ読み上げられます。

aria-describedby — 補足説明を紐付ける

<label for="password">パスワード</label>
<input type="password" id="password" aria-describedby="password-hint">
<p id="password-hint">8文字以上、英数字を含めてください</p>

スクリーンリーダーがパスワード入力欄にフォーカスした時、「パスワード。8文字以上、英数字を含めてください」と読み上げてくれます。

role — 要素に役割を明示する

<!-- 検索フォームであることを明示 -->
<form role="search">
    <input type="search" placeholder="サイト内検索...">
    <button type="submit">検索</button>
</form>

<!-- パンくずリスト -->
<nav aria-label="パンくずリスト">
    <ol role="list">
        <li><a href="/">ホーム</a></li>
        <li><a href="/blog/">ブログ</a></li>
        <li aria-current="page">この記事</li>
    </ol>
</nav>

ARIA使い過ぎ注意: ARIAは「HTMLだけでは足りない時」に使うもの。<button>にrole="button"を書くのは無駄です(もう<button>自体がボタンの役割を持っているから)。これを「ARIAファーストルール」のNo ARIA is better than bad ARIAと言います。

Phase 1 総まとめ — 完全なHTMLページを書く

4週間で学んだ全てを使って、「プロが書くHTMLの基本形」を見てみましょう。これがPhase 1 の到達点です。 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山田太郎 - Webエンジニアポートフォリオ</title>
    <meta name="description" content="AIと一緒にWeb制作を学ぶ山田太郎のポートフォリオ。HTML/CSS/JavaScriptの学習成果をまとめています。">
    <meta name="author" content="山田太郎">
    <meta name="theme-color" content="#2563eb">
    <link rel="icon" href="favicon.ico">

    <!-- OGP -->
    <meta property="og:title" content="山田太郎 - Webエンジニアポートフォリオ">
    <meta property="og:description" content="HTML/CSS/JavaScriptの学習成果をまとめています。">
    <meta property="og:image" content="https://example.com/ogp.jpg">
    <meta property="og:url" content="https://example.com/">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
</head>
<body>
    <header>
        <h1>山田太郎</h1>
        <p>AIと一緒にWeb制作を学習中</p>
        <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>
            <img src="images/profile.jpg"
                 alt="山田太郎のプロフィール写真。笑顔でノートPCに向かっている"
                 width="200" height="200">
            <p>
                2026年からAIと一緒にWeb制作の学習を始めました。
                将来は副業や受託でWeb制作の仕事を
                受けられるようになることが目標です。
            </p>
        </section>

        <section id="skills">
            <h2>スキル一覧</h2>
            <table>
                <thead>
                    <tr>
                        <th scope="col">スキル</th>
                        <th scope="col">レベル</th>
                        <th scope="col">学習期間</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>HTML</td>
                        <td>基礎習得</td>
                        <td>4週間</td>
                    </tr>
                    <tr>
                        <td>CSS</td>
                        <td>学習中</td>
                        <td>-</td>
                    </tr>
                    <tr>
                        <td>JavaScript</td>
                        <td>未着手</td>
                        <td>-</td>
                    </tr>
                </tbody>
            </table>
        </section>

        <section id="works">
            <h2>制作物</h2>

            <article>
                <h3>
                    <a href="recipe.html">レシピページ (Week 02)</a>
                </h3>
                <p>HTMLのテキスト要素だけで作った料理レシピページ。</p>
            </article>

            <article>
                <h3>
                    <a href="profile-v1.html">プロフィールページ v1 (Week 03)</a>
                </h3>
                <p>画像・リンク・テーブル・フォームを使った個人ページ。</p>
            </article>
        </section>

        <section id="contact">
            <h2>お問い合わせ</h2>
            <form action="#" method="post">
                <p>
                    <label for="name">お名前 <span aria-hidden="true">*</span></label>
                    <input type="text" id="name" name="name" required
                           aria-required="true">
                </p>
                <p>
                    <label for="email">メールアドレス <span aria-hidden="true">*</span></label>
                    <input type="email" id="email" name="email" required
                           aria-required="true">
                </p>
                <p>
                    <label for="message">メッセージ</label>
                    <textarea id="message" name="message" rows="5"></textarea>
                </p>
                <p>
                    <button type="submit">送信する</button>
                </p>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 山田太郎. All rights reserved.</p>
        <nav aria-label="フッターナビゲーション">
            <ul>
                <li><a href="https://github.com/yamada-taro" target="_blank" rel="noopener">GitHub</a></li>
                <li><a href="https://x.com/yamada_taro" target="_blank" rel="noopener">X (Twitter)</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

このコードを見て、「全部読める。全部理解できる」と感じたなら、Phase 1 の学習は成功です。4週間前にはHTMLが何かすら知らなかったあなたが、ここまで書けるようになりました。

注目ポイント:

  • <head>: charset, viewport, title, description, OGP, favicon — 全部入り
  • <header> + <nav>: サイトの顔 + ナビゲーション
  • <main>: メインコンテンツを1つに
  • <section>: テーマごとにまとまり
  • <article>: 独立した制作物カード
  • <footer>: 著作権 + 外部リンク
  • aria-label: ナビゲーションの区別
  • aria-hidden: 装飾的な「*」記号を読み上げさせない
  • aria-required: 必須入力であることをスクリーンリーダーに伝達
  • scope="col": テーブルの見出しが「列方向」であることを明示

今週のよくある間違い

ミス1: sectionに見出しがない

<!-- ❌ sectionなのに見出しがない → divで良い -->
<section>
    <p>何かのテキスト...</p>
</section>

<!-- ✅ sectionには見出しを入れる -->
<section>
    <h2>セクションのタイトル</h2>
    <p>何かのテキスト...</p>
</section>

ミス2: mainが複数ある

<!-- ❌ mainは1ページに1つだけ -->
<main>ひとつめ</main>
<main>ふたつめ</main>

<!-- ✅ mainは1つ。中でsectionに分ける -->
<main>
    <section>ひとつめ</section>
    <section>ふたつめ</section>
</main>

ミス3: navの中にリストを使わない

<!-- ❌ リンクを羅列しただけ -->
<nav>
    <a href="/">ホーム</a>
    <a href="/about">概要</a>
</nav>

<!-- ✅ ul + li で構造化 -->
<nav>
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">概要</a></li>
    </ul>
</nav>

ミス4: divにclickイベントを付けてボタンにする

<!-- ❌ キーボード操作不可、スクリーンリーダーがボタンと認識しない -->
<div class="btn" onclick="doSomething()">押す</div>

<!-- ✅ button要素を使う -->
<button type="button" onclick="doSomething()">押す</button>

ミス5: viewportメタタグを忘れる

<meta name="viewport">がないと、スマホでの表示が崩壊します。全てのHTMLファイルに入れてください。テンプレとして覚えましょう。

今週の課題(Phase 1 卒業制作)

Phase 1 卒業課題

「自分だけの完全なポートフォリオページ」を1ページ作成してください。Week 01〜04で学んだ全てを詰め込んだ集大成です。

必須要件

  1. セマンティック要素(<header> <nav> <main> <section> <footer>)で構造化されている
  2. <head>に charset, viewport, title, description メタタグが全て入っている
  3. 自己紹介セクション: プロフィール画像(alt属性付き) + 自己紹介文
  4. スキル表: <table>で作成。<thead> <tbody> <th scope> を正しく使う
  5. 制作物セクション: Week 02のレシピページ・Week 03のプロフィールページへのリンク(<article>でマークアップ)
  6. お問い合わせフォーム: <label>と<input>が正しく紐付いている
  7. ページ内ナビゲーション: <nav>で各セクションへのリンク
  8. 外部リンク: target="_blank" rel="noopener"付き
  9. <nav>にaria-labelを付ける(複数navがある場合は区別する)
  10. lang="ja"が<html>タグに入っている

ボーナス課題

自己チェック項目(提出前に確認)

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

自己診断テスト

  1. <section>と<article>の違いを説明できますか？
  2. <main>はなぜ1ページに1つだけなのですか？
  3. <meta name="viewport">がないとスマホでどうなりますか？
  4. <meta name="description">はどこに表示されますか？
  5. OGPタグは何のために使いますか？
  6. aria-labelはどんな時に使いますか？
  7. 「divにonclickを付けてボタンにする」のがなぜダメなのか、2つの理由を挙げてください
  8. 「No ARIA is better than bad ARIA」とはどういう意味ですか？

Phase 2 予告 — CSSで「見た目」を作る

Phase 1(HTML) 完了おめでとうございます!

4週間で、あなたは以下を身につけました:

次のPhase 2は「CSSで見た目を作る」4週間です。今まで「白い背景に黒い文字」だった地味なHTMLに、色・レイアウト・余白・フォントを加えて「本物のWebサイト」にしていきます。

Week 05 ではCSSの世界 — セレクタとプロパティを学びます。「HTMLを操る魔法の言語」CSSの基本中の基本。なぜセレクタが重要なのか、詳細度(優先順位)の仕組み、色とフォントの指定方法を学びます。

Phase 1 完了。 あなたはもう「HTMLが書ける人」です。構造・テキスト・メディア・フォーム・セマンティクス・メタタグ・アクセシビリティ —— プロが使うHTMLの基本要素を全て学びました。次はいよいよ「見た目」です。CSSを加えた瞬間、あなたのHTMLが一気にWebサイトに変わる感動を楽しみにしてください。

← Week 03: 画像・リンク・テーブル・フォーム | カリキュラム全体に戻る | Week 05: CSSの世界 — セレクタとプロパティ →