Day 4: レスポンシブポートフォリオを作ろう

セマンティックHTMLとメタタグを学び、SEOにも強い本格的なポートフォリオサイトを完成させましょう！

今日のゴール

セマンティックHTMLを理解する
メタタグの役割を知る
アクセシビリティの基本を学ぶ
ポートフォリオサイトを完成させる

セマンティックHTMLとは

セマンティック（意味的）HTMLとは、タグに「意味」を持たせた書き方です。 divやspanだけでなく、内容に適したタグを使うことで、検索エンジンや支援技術がページを理解しやすくなります。

セマンティックタグ一覧

<header>

ページやセクションのヘッダー

<nav>

ナビゲーションメニュー

<main>

メインコンテンツ（1ページに1つ）

<article>

独立したコンテンツ

<section>

テーマ別のセクション

<aside>

補足情報、サイドバー

<footer>

ページやセクションのフッター

ページ構造の例

<body>
  <header>
    <nav>...</nav>
  </header>
  
  <main>
    <section id="about">...</section>
    <section id="works">...</section>
  </main>
  
  <footer>...</footer>
</body>

なぜセマンティックが重要？

🔍 SEO向上：検索エンジンがページ構造を理解しやすくなる
♿ アクセシビリティ：スクリーンリーダーが適切に読み上げられる
👨‍💻 保守性：コードが読みやすく、メンテナンスしやすい

やってみよう！

header, main, footerを使ったページ構造を作ってみましょう。

<header>
  <h1>山田太郎のポートフォリオ</h1>
  <nav>
    <a href="#about">About</a>
    <a href="#works">Works</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<main>
  <section id="about">
    <h2>About Me</h2>
    <p>Web開発を学んでいます。</p>
  </section>
  
  <section id="works">
    <h2>Works</h2>
    <p>作品を紹介します。</p>
  </section>
</main>

<footer>
  <p>&copy; 2025 山田太郎</p>
</footer>

メタタグを設定しよう

<meta> タグは、ページの情報（メタデータ）を設定します。検索結果の表示やSNSでのシェア時の見え方に影響します。

重要なメタタグ

メタタグ	役割
`<meta charset="UTF-8">`	文字コード指定（日本語表示に必須）
`<meta name="viewport" ...>`	スマホ対応（レスポンシブに必須）
`<meta name="description" ...>`	ページの説明（検索結果に表示）
`<meta name="author" ...>`	作成者

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="山田太郎のポートフォリオサイト。Web開発の実績を紹介します。">
  <meta name="author" content="山田太郎">
  <title>山田太郎 | Portfolio</title>
</head>

viewport について

width=device-width はページの幅をデバイスの幅に合わせる設定。initial-scale=1.0 は初期ズーム倍率を100%に設定。これがないとスマホで見た時に極端に小さく表示されることがあります。

OGP（SNSシェア用）

TwitterやFacebookでシェアした時の表示を制御できます。

<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明">
<meta property="og:image" content="サムネイル画像URL">

やってみよう！

完全なhead要素を作成してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コード -->
  <meta charset="UTF-8">
  
  <!-- レスポンシブ対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- SEO用 -->
  <meta name="description" content="山田太郎のポートフォリオサイト。HTMLを学んで作った作品を紹介しています。">
  <meta name="author" content="山田太郎">
  
  <!-- ページタイトル -->
  <title>山田太郎 | Portfolio</title>
</head>
<body>
  <h1>山田太郎のポートフォリオ</h1>
  <p>メタタグを設定しました！</p>
</body>
</html>

ナビゲーションを作ろう

<nav> タグとページ内リンクを使って、スムーズに移動できるナビゲーションを作りましょう。

ページ内リンク（アンカーリンク）

href属性に #id名 を指定すると、同じページ内の指定した要素に移動できます。

<!-- ナビゲーション -->
<nav>
  <a href="#about">About</a>
  <a href="#works">Works</a>
  <a href="#contact">Contact</a>
</nav>

<!-- 移動先にはidを設定 -->
<section id="about">
  <h2>About</h2>
</section>

<section id="works">
  <h2>Works</h2>
</section>

リストを使ったナビゲーション

ナビゲーションはul + liで構造化するのが一般的です。

<nav>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#works">Works</a></li>
  </ul>
</nav>

やってみよう！

About、Works、Contactの3セクションへ移動できるナビゲーションを作りましょう。

<header>
  <h1>Portfolio</h1>
  <nav>
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#works">Works</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <section id="about">
    <h2>About Me</h2>
    <p>自己紹介文をここに書きます。</p>
  </section>
  
  <section id="works">
    <h2>Works</h2>
    <p>作品を紹介します。</p>
  </section>
  
  <section id="contact">
    <h2>Contact</h2>
    <p>お問い合わせはこちら。</p>
  </section>
</main>

アクセシビリティの基本

アクセシビリティとは、障害のある方を含む全ての人がWebサイトを利用できるようにすることです。

基本的なポイント

1 画像にはalt属性を必ず設定

<img src="photo.jpg" alt="海辺の夕日">

2 見出しの階層を守る

h1→h2→h3 の順番で使う。h1の次にh3はNG。

3 フォームにはlabelを紐づける

<label for="email">メール</label>
<input type="email" id="email">

4 lang属性で言語を明示

<html lang="ja">

よくある間違い

❌ alt="" のような空の alt（装飾画像以外はNG）
❌ 「クリックしてください」だけのリンクテキスト
❌ 色だけで情報を伝える（エラーを赤色だけで表示など）

やってみよう！

アクセシビリティを意識したコンテンツを作成しましょう。

<!-- 見出しの階層を守る -->
<h1>山田太郎のポートフォリオ</h1>

<h2>作品紹介</h2>

<article>
  <h3>作品1: 自己紹介サイト</h3>
  <!-- 画像にはalt属性 -->
  <img src="https://picsum.photos/id/1/200/150" 
       alt="自己紹介サイトのスクリーンショット">
  <p>HTMLの基本を学んで作成した最初のサイトです。</p>
  <!-- リンクテキストは具体的に -->
  <a href="#">自己紹介サイトを見る</a>
</article>

<article>
  <h3>作品2: ギャラリーサイト</h3>
  <img src="https://picsum.photos/id/2/200/150" 
       alt="ギャラリーサイトのスクリーンショット">
  <p>画像とリンクを組み合わせたギャラリーです。</p>
  <a href="#">ギャラリーサイトを見る</a>
</article>

✨

【実践】ポートフォリオサイトを完成させよう！

Day 4の総まとめ！4日間で学んだ全てを詰め込んだポートフォリオを作りましょう！

必須要素チェックリスト

完全なHTML構造（DOCTYPE、html、head、body）
メタタグ（charset、viewport、description）
セマンティックタグ（header、nav、main、section、footer）
ナビゲーション（ページ内リンク）
Aboutセクション
Worksセクション（画像付き）
Contactセクション（フォーム）
アクセシビリティ対応（alt、label等）

<!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開発の実績を紹介します。">
  <meta name="author" content="山田太郎">
  <title>山田太郎 | Portfolio</title>
</head>
<body>
  <header>
    <h1>🚀 山田太郎のポートフォリオ</h1>
    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#works">Works</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>👋 About Me</h2>
      <p>はじめまして、山田太郎です。</p>
      <p>HTML Boot Campで4日間かけてHTMLを学びました。これからもWeb開発のスキルを磨いていきます！</p>
      
      <h3>スキル</h3>
      <ul>
        <li>HTML5</li>
        <li>セマンティックHTML</li>
        <li>アクセシビリティ</li>
      </ul>
    </section>

    <section id="works">
      <h2>💼 Works</h2>
      
      <article>
        <h3>Day 1: 自己紹介ページ</h3>
        <img src="https://picsum.photos/id/1/300/200" alt="自己紹介ページのスクリーンショット">
        <p>HTMLの基本を学んで作成した最初の作品です。</p>
      </article>
      
      <article>
        <h3>Day 2: 趣味のギャラリー</h3>
        <img src="https://picsum.photos/id/10/300/200" alt="ギャラリーサイトのスクリーンショット">
        <p>画像、リンク、リストを駆使したギャラリーサイトです。</p>
      </article>
      
      <article>
        <h3>Day 3: お問い合わせフォーム</h3>
        <img src="https://picsum.photos/id/20/300/200" alt="お問い合わせフォームのスクリーンショット">
        <p>バリデーション付きの実用的なフォームです。</p>
      </article>
    </section>

    <section id="contact">
      <h2>📧 Contact</h2>
      <p>お気軽にお問い合わせください。</p>
      
      <form action="#" method="POST">
        <p>
          <label for="name">お名前（必須）：</label><br>
          <input type="text" id="name" name="name" required>
        </p>
        <p>
          <label for="email">メールアドレス（必須）：</label><br>
          <input type="email" id="email" name="email" required>
        </p>
        <p>
          <label for="message">メッセージ：</label><br>
          <textarea id="message" name="message" rows="5"></textarea>
        </p>
        <button type="submit">送信する</button>
      </form>
    </section>
  </main>

  <footer>
    <hr>
    <p>&copy; 2025 山田太郎. All rights reserved.</p>
    <p>Made with HTML Boot Camp 🎓</p>
  </footer>
</body>
</html>

Day 4 まとめ

今日学んだタグ

<header> <nav> <main> <section> <article> <footer> <meta>

ポイント

✅ セマンティックタグで構造を明確に
✅ viewport メタタグでレスポンシブ対応
✅ ページ内リンクで #id を活用
✅ アクセシビリティを常に意識

🎉 おめでとうございます！4日間のカリキュラム完了！

最終課題で、オリジナルサイトを作ってみましょう！

最終課題へ挑戦！