Day 10: 総合プロジェクト
今日学ぶこと
- これまでの知識を総動員してポートフォリオサイトを構築
- 複数ページの構成と管理
- 実践的なHTMLの書き方
プロジェクト概要
10日間で学んだHTML知識を活かして、個人ポートフォリオサイトを作成します。
サイト構成
flowchart TB
subgraph Site["ポートフォリオサイト"]
Home["index.html<br>トップページ"]
About["about.html<br>自己紹介"]
Works["works.html<br>作品集"]
Contact["contact.html<br>お問い合わせ"]
end
Home --> About
Home --> Works
Home --> Contact
About --> Home
Works --> Home
Contact --> Home
style Home fill:#3b82f6,color:#fff
style About fill:#8b5cf6,color:#fff
style Works fill:#22c55e,color:#fff
style Contact fill:#f59e0b,color:#fff
ディレクトリ構造
portfolio/
├── index.html # トップページ
├── about.html # 自己紹介
├── works.html # 作品集
├── contact.html # お問い合わせ
└── images/ # 画像フォルダ
├── profile.jpg
├── work1.jpg
├── work2.jpg
└── work3.jpg
ページ1: トップページ（index.html）
<!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="田中太郎のポートフォリオサイト。Web開発の実績と技術スキルを紹介しています。">
<meta property="og:title" content="田中太郎 | Webデベロッパー">
<meta property="og:description" content="Web開発の実績と技術スキルを紹介">
<meta property="og:type" content="website">
</head>
<body>
<header>
<nav aria-label="メインナビゲーション">
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">自己紹介</a></li>
<li><a href="works.html">作品集</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<h1>田中太郎</h1>
<p>Web Developer & Designer</p>
<p>ユーザーに寄り添ったWeb体験を作ります。</p>
<a href="works.html">作品を見る →</a>
</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 / CSS</td>
<td>上級</td>
<td>3年</td>
</tr>
<tr>
<td>JavaScript</td>
<td>中級</td>
<td>2年</td>
</tr>
<tr>
<td>React</td>
<td>初級</td>
<td>1年</td>
</tr>
</tbody>
</table>
</section>
<section id="recent-works">
<h2>最近の作品</h2>
<article>
<h3>企業サイトリニューアル</h3>
<p>セマンティックHTMLとレスポンシブデザインを活用した企業サイト。</p>
<a href="works.html#work1">詳細を見る</a>
</article>
<article>
<h3>ブログプラットフォーム</h3>
<p>アクセシビリティに配慮したブログサイト。</p>
<a href="works.html#work2">詳細を見る</a>
</article>
</section>
</main>
<footer>
<p>© 2026 田中太郎. All rights reserved.</p>
<nav aria-label="フッターナビゲーション">
<a href="about.html">自己紹介</a> |
<a href="contact.html">お問い合わせ</a>
</nav>
</footer>
</body>
</html>
ページ2: 自己紹介（about.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自己紹介 | 田中太郎</title>
<meta name="description" content="田中太郎のプロフィール。経歴、スキル、資格について紹介しています。">
</head>
<body>
<header>
<nav aria-label="メインナビゲーション">
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">自己紹介</a></li>
<li><a href="works.html">作品集</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<h1>自己紹介</h1>
<section>
<h2>プロフィール</h2>
<figure>
<img src="images/profile.jpg" alt="田中太郎のプロフィール写真"
width="200" height="200" loading="lazy">
<figcaption>田中太郎</figcaption>
</figure>
<p>東京在住のWebデベロッパーです。<strong>ユーザー体験</strong>を重視した
Web開発を行っています。</p>
</section>
<section>
<h2>経歴</h2>
<dl>
<dt><time datetime="2023-04">2023年4月</time></dt>
<dd>Web開発の学習を開始</dd>
<dt><time datetime="2024-01">2024年1月</time></dt>
<dd>フリーランスとして活動開始</dd>
<dt><time datetime="2025-06">2025年6月</time></dt>
<dd>Web制作会社に入社</dd>
</dl>
</section>
<section>
<h2>資格・認定</h2>
<ul>
<li>HTML5プロフェッショナル認定 Level.1</li>
<li>基本情報技術者試験</li>
</ul>
</section>
<section>
<h2>趣味</h2>
<p>プログラミング以外では、<em>読書</em>と<em>写真撮影</em>を楽しんでいます。</p>
</section>
<details>
<summary>使用ツール一覧</summary>
<ul>
<li>エディタ: Visual Studio Code</li>
<li>デザイン: Figma</li>
<li>バージョン管理: Git / GitHub</li>
<li>ブラウザ: Google Chrome</li>
</ul>
</details>
</main>
<footer>
<p>© 2026 田中太郎. All rights reserved.</p>
</footer>
</body>
</html>
ページ3: 作品集（works.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作品集 | 田中太郎</title>
<meta name="description" content="田中太郎のWeb開発実績。企業サイト、Webアプリケーション等の制作事例を紹介。">
</head>
<body>
<header>
<nav aria-label="メインナビゲーション">
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">自己紹介</a></li>
<li><a href="works.html">作品集</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<h1>作品集</h1>
<p>これまでに制作したWebサイトやアプリケーションの一部を紹介します。</p>
<section>
<article id="work1">
<h2>企業サイトリニューアル</h2>
<figure>
<img src="images/work1.jpg" alt="企業サイトのスクリーンショット"
width="600" height="400" loading="lazy">
<figcaption>株式会社サンプルのコーポレートサイト</figcaption>
</figure>
<h3>概要</h3>
<p>既存の企業サイトをHTML5 + CSS3でフルリニューアル。
セマンティックHTMLを活用し、アクセシビリティを大幅に改善しました。</p>
<h3>使用技術</h3>
<ul>
<li>HTML5</li>
<li>CSS3（Flexbox / Grid）</li>
<li>レスポンシブデザイン</li>
</ul>
<h3>成果</h3>
<table>
<tr>
<th scope="row">Lighthouse スコア</th>
<td>95点以上（全カテゴリ）</td>
</tr>
<tr>
<th scope="row">ページ読み込み速度</th>
<td>2.1秒 → 0.8秒</td>
</tr>
</table>
</article>
<hr>
<article id="work2">
<h2>ブログプラットフォーム</h2>
<figure>
<img src="images/work2.jpg" alt="ブログサイトのスクリーンショット"
width="600" height="400" loading="lazy">
<figcaption>個人ブログサイト</figcaption>
</figure>
<h3>概要</h3>
<p>アクセシビリティに配慮したブログサイト。
WCAG 2.1 AA準拠を目指して制作しました。</p>
<h3>使用技術</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</article>
<hr>
<article id="work3">
<h2>レシピ共有サイト</h2>
<figure>
<img src="images/work3.jpg" alt="レシピサイトのスクリーンショット"
width="600" height="400" loading="lazy">
<figcaption>料理レシピ共有サイト</figcaption>
</figure>
<h3>概要</h3>
<p>構造化データ（JSON-LD）を活用したレシピ共有サイト。
Google検索でリッチスニペットが表示されます。</p>
<h3>使用技術</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>構造化データ（Schema.org）</li>
</ul>
</article>
</section>
</main>
<footer>
<p>© 2026 田中太郎. All rights reserved.</p>
</footer>
</body>
</html>
ページ4: お問い合わせ（contact.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>お問い合わせ | 田中太郎</title>
<meta name="description" content="田中太郎へのお問い合わせフォーム。お仕事のご相談やご質問はこちらから。">
</head>
<body>
<header>
<nav aria-label="メインナビゲーション">
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">自己紹介</a></li>
<li><a href="works.html">作品集</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<h1>お問い合わせ</h1>
<p>お仕事のご相談やご質問がございましたら、以下のフォームからお気軽にどうぞ。</p>
<form action="/contact" method="post">
<fieldset>
<legend>お客様情報</legend>
<p>
<label for="c-name">お名前 <strong>*</strong></label><br>
<input type="text" id="c-name" name="name"
required autocomplete="name">
</p>
<p>
<label for="c-email">メールアドレス <strong>*</strong></label><br>
<input type="email" id="c-email" name="email"
required autocomplete="email">
</p>
<p>
<label for="c-company">会社名</label><br>
<input type="text" id="c-company" name="company"
autocomplete="organization">
</p>
</fieldset>
<fieldset>
<legend>お問い合わせ内容</legend>
<p>
<label for="c-type">種別 <strong>*</strong></label><br>
<select id="c-type" name="type" required>
<option value="">選択してください</option>
<option value="work">お仕事のご相談</option>
<option value="question">技術的なご質問</option>
<option value="feedback">フィードバック</option>
<option value="other">その他</option>
</select>
</p>
<p>
<label for="c-budget">ご予算</label><br>
<input type="text" id="c-budget" name="budget"
list="budget-options">
<datalist id="budget-options">
<option value="〜10万円">
<option value="10〜30万円">
<option value="30〜50万円">
<option value="50〜100万円">
<option value="100万円〜">
</datalist>
</p>
<p>
<label for="c-deadline">希望納期</label><br>
<input type="date" id="c-deadline" name="deadline"
min="2026-02-01">
</p>
<p>
<label for="c-message">メッセージ <strong>*</strong></label><br>
<textarea id="c-message" name="message"
rows="8" cols="60"
required minlength="10" maxlength="2000"
placeholder="お問い合わせ内容を入力してください（10〜2000文字）"></textarea>
</p>
</fieldset>
<p>
<label>
<input type="checkbox" name="agree" required>
<a href="/privacy">プライバシーポリシー</a>に同意する
</label>
</p>
<p>
<button type="submit">送信する</button>
<button type="reset">リセット</button>
</p>
</form>
<hr>
<section>
<h2>その他の連絡方法</h2>
<ul>
<li>メール: <a href="mailto:tanaka@example.com">tanaka@example.com</a></li>
<li>GitHub: <a href="https://github.com/tanaka" target="_blank" rel="noopener noreferrer">@tanaka</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2026 田中太郎. All rights reserved.</p>
</footer>
</body>
</html>
振り返り: 10日間で学んだこと
flowchart TB
subgraph Journey["10日間の学習の旅"]
D1["Day 1<br>HTML入門"]
D2["Day 2<br>テキスト"]
D3["Day 3<br>リンク"]
D4["Day 4<br>メディア"]
D5["Day 5<br>リスト・テーブル"]
D6["Day 6<br>フォーム基礎"]
D7["Day 7<br>フォーム応用"]
D8["Day 8<br>セマンティクス"]
D9["Day 9<br>ベストプラクティス"]
D10["Day 10<br>総合プロジェクト"]
end
D1 --> D2 --> D3 --> D4 --> D5
D5 --> D6 --> D7 --> D8 --> D9 --> D10
style D1 fill:#3b82f6,color:#fff
style D2 fill:#3b82f6,color:#fff
style D3 fill:#8b5cf6,color:#fff
style D4 fill:#8b5cf6,color:#fff
style D5 fill:#22c55e,color:#fff
style D6 fill:#22c55e,color:#fff
style D7 fill:#f59e0b,color:#fff
style D8 fill:#f59e0b,color:#fff
style D9 fill:#ef4444,color:#fff
style D10 fill:#ef4444,color:#fff
| Day | トピック | 主要な要素 |
|---|---|---|
| 1 | HTML入門 | <!DOCTYPE>, <html>, <head>, <body> |
| 2 | テキスト | <h1>〜<h6>, <p>, <strong>, <em> |
| 3 | リンク | <a>, href, 絶対/相対パス |
| 4 | メディア | <img>, <video>, <audio>, <picture> |
| 5 | リスト・テーブル | <ul>, <ol>, <dl>, <table> |
| 6 | フォーム基礎 | <form>, <input>, <label>, <select> |
| 7 | フォーム応用 | バリデーション, <datalist>, <progress> |
| 8 | セマンティクス | <header>, <main>, <article>, <nav> |
| 9 | ベストプラクティス | SEO, OGP, パフォーマンス最適化 |
| 10 | 総合プロジェクト | ポートフォリオサイト制作 |
次のステップ
HTMLの基礎を習得した今、次に学ぶべきことは：
1. CSS（見た目のデザイン）
HTMLで作った構造にデザインを適用します。
<link rel="stylesheet" href="styles.css">
2. JavaScript（動的な機能）
ページにインタラクティブな機能を追加します。
<script src="app.js" defer></script>
3. レスポンシブデザイン
すべてのデバイスで美しく表示されるサイトを作ります。
4. Webアクセシビリティ
すべての人がアクセスできるサイトを目指します。
まとめ
重要ポイント
- HTMLは構造と意味を定義する言語
- セマンティック要素を使いこなすことが上達への鍵
- アクセシビリティを常に意識する
- バリッドなHTMLを書く習慣を身につける
- HTMLはWeb技術の基盤——CSS・JavaScriptと組み合わせて力を発揮する
練習問題
問題1: 基本
この章のポートフォリオサイトを参考に、自分自身のポートフォリオサイトを作成してください。
問題2: 応用
ポートフォリオサイトに以下を追加してください：
- ブログページ（3つ以上の
<article>） - FAQページ（
<details>を使用） - サイトマップページ
チャレンジ問題
W3C Validatorでエラーゼロのポートフォリオサイトを完成させてください。以下のチェックリストをすべてクリアしましょう：
- 全ページに適切な
<title>と<meta description> - OGPタグ設定済み
- すべての画像に
alt属性 - セマンティック要素の適切な使用
- フォームに
<label>付き -
target="_blank"にrel="noopener noreferrer"
参考リンク
- MDN Web Docs
- W3Schools HTML Tutorial
- HTML Living Standard
- Can I use... — ブラウザ対応状況の確認
おめでとうございます！ 10日間のHTML学習を完了しました。ここで学んだことは、Webデベロッパーとしてのキャリアの確かな基盤になります。次はCSSを学んで、あなたのWebページに美しいデザインを加えましょう！