Chapter 5: ミニプロジェクトを仕上げる

これまで学んだ HTML・CSS の知識を使って，大学祭の企画紹介ページを完成させましょう。
ここでは完成までの流れをステップごとに確認します。

完成イメージ

ヒーローセクション（タイトル・リード文・ボタン）
企画紹介（カードレイアウト）
タイムテーブル
参加申し込みフォーム
フッター（SNS や問い合わせ先）

Note

ここで作るページは静的なものです。将来的に Next.js へ移行するときにも土台として使えます。

Step 1. ページの構造を決める

まずは HTML の骨組みから書き始めましょう。コンテンツの位置や種類をコメントで残しておくと整理しやすくなります。

<body>
  <header class="site-header">...</header>
  <main>
    <section id="hero">...</section>
    <section id="events">...</section>
    <section id="schedule">...</section>
    <section id="contact">...</section>
  </main>
  <footer>...</footer>
</body>

Step 2. ヒーローセクションを作る

<section id="hero" class="hero">
  <div class="hero__content">
    <p class="hero__label">千葉大学祭 2024</p>
    <h1>未来をつなぐキャンパスへ</h1>
    <p class="hero__lead">
      システム部門を中心に，今年もオンラインとオフラインをつなぐ企画をお届けします。
    </p>
    <div class="hero__actions">
      <a class="button primary" href="#events">企画を見る</a>
      <a class="button secondary" href="#contact">参加申し込み</a>
    </div>
  </div>
  <img class="hero__image" src="images/hero.png" alt="夜のキャンパスと花火" />
</section>

.hero {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
  padding: 64px 0;
}

.hero__label {
  display: inline-flex;
  align-items: center;
  background: #e0e7ff;
  color: #1d4ed8;
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.hero__image {
  width: 100%;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(37, 99, 235, 0.15);
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

Step 3. 企画紹介セクション

前章で作成したカードレイアウトを流用できます。背景色やアイコンを加えてアレンジしてみましょう。

#events {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
  padding: 56px 0;
}

#events .card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#events .card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #2563eb;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
}

Step 4. タイムテーブルを作る

テーブルの代わりにリストを使い，モバイルで読みやすいデザインにする例です。

<section id="schedule">
  <h2>タイムテーブル</h2>
  <ul class="timeline">
    <li>
      <span class="time">10:00</span>
      <div>
        <h3>オープニングセレモニー</h3>
        <p>実行委員会からの挨拶と1日の見どころ紹介。</p>
      </div>
    </li>
    <li>
      <span class="time">13:00</span>
      <div>
        <h3>開発体験ワークショップ</h3>
        <p>システム部門による React ハンズオン。</p>
      </div>
    </li>
  </ul>
</section>

.timeline {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 24px;
}

.timeline li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: start;
}

.timeline .time {
  font-weight: 700;
  color: #2563eb;
  font-size: 1.25rem;
}

@media (max-width: 640px) {
  .timeline li {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

Step 5. フォームとフッターを配置

第 4 章で作ったフォームを配置し，その下にフッターを追加しましょう。

<footer class="site-footer">
  <div class="container">
    <small>&copy; 2024 Chibafes System Team</small>
    <div class="footer-links">
      <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">X</a>
      <a href="https://instagram.com/" target="_blank" rel="noopener noreferrer">Instagram</a>
      <a href="mailto:system@example.com">system@example.com</a>
    </div>
  </div>
</footer>

.site-footer {
  background: #0f172a;
  color: #e2e8f0;
  padding: 24px 0;
}

.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 16px;
}

.footer-links a {
  color: inherit;
  text-decoration: none;
}

仕上げのチェックリスト

スマホ幅（375px など）で見たときに文字や余白が読みやすいか。
主要な色とフォントが統一されているか。
コンテンツに適切な見出し構造（h1→h2→h3）があるか。
リンクやボタンがキーボード操作で選択できるか。
画像に代替テキスト（alt 属性）が設定されているか。

振り返り

章の冒頭で決めた構造に沿ってコンテンツを配置できましたか？
レスポンシブ対応で困った点は何でしたか？
コードを整理するためにクラス名やフォルダ構成をどう工夫しましたか？

気づいた点や改善案はメモに残しておくと，次の React / Next.js 学習で生かせます。

次のステップ

完成したページを GitHub にアップロードし，仲間と共有してみましょう。
準備が整ったら JavaScript / TypeScript の章へ進み，インタラクションを追加する力を身につけていきます。