Chapter 4: コンポーネントとフォーム

実際の Web サイトには，ナビゲーションやボタン，フォームなどの UI コンポーネントが欠かせません。
この章では，基本的なコンポーネントを作成し，アクセシビリティにも配慮したマークアップを学びます。

ナビゲーションバーを作る

<header class="site-header">
  <div class="container">
    <a class="logo" href="/">Chibafes System</a>
    <nav aria-label="メインナビゲーション">
      <ul class="menu">
        <li><a href="#about">概要</a></li>
        <li><a href="#events">企画</a></li>
        <li><a href="#contact">問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>

.site-header {
  background: #111827;
  color: #fff;
}

.site-header .container {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  color: inherit;
  font-weight: 600;
}

nav に aria-label を付けて目的を明示しています。スクリーンリーダーでの利用を想定し，意味のあるリンクテキストを用意しましょう。

ボタンとリンクの使い分け

ページ内や別ページへ移動する場合は リンク (<a>)
クリックで操作を実行する場合（例：フォーム送信）は ボタン (<button>)

<a class="button secondary" href="#events">企画一覧を見る</a>
<button class="button primary" type="submit">申し込む</button>

.button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button.primary {
  background: #2563eb;
  color: #fff;
}

.button.secondary {
  background: #fff;
  color: #2563eb;
  border: 2px solid #2563eb;
}

.button:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.2);
}

フォームを組み立てる

イベント参加申し込みを想定したフォームを作ってみましょう。

<section id="contact">
  <h2>ボランティア参加申し込み</h2>
  <form class="entry-form">
    <label for="name">名前</label>
    <input id="name" name="name" type="text" placeholder="例：山田 花子" required />

    <label for="email">メールアドレス</label>
    <input id="email" name="email" type="email" placeholder="example@example.com" required />

    <label for="team">希望チーム</label>
    <select id="team" name="team" required>
      <option value="">選択してください</option>
      <option value="system">システム</option>
      <option value="design">デザイン</option>
      <option value="stage">ステージ</option>
    </select>

    <label for="message">意気込み</label>
    <textarea id="message" name="message" rows="4" placeholder="応募した理由や経験など"></textarea>

    <button class="button primary" type="submit">送信する</button>
  </form>
</section>

.entry-form {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.entry-form label {
  font-weight: 600;
}

.entry-form input,
.entry-form select,
.entry-form textarea {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #cbd5f5;
  font-size: 1rem;
}

.entry-form input:focus,
.entry-form select:focus,
.entry-form textarea:focus {
  border-color: #2563eb;
  outline: 3px solid rgba(37, 99, 235, 0.25);
  outline-offset: 2px;
}

label と input に対応する id / for を設定すると，クリックした際に入力欄へフォーカスが移り，アクセシビリティが向上します。

フィードバックメッセージ

フォーム送信後のメッセージには role="status" を指定すると読み上げ対応がしやすくなります。JavaScript を使う際の布石として覚えておきましょう。

<p class="form-message" role="status" aria-live="polite">※ 送信はまだ実装していません</p>

練習課題

スマホ表示でナビゲーションが折り返さないように，ボタンに変えるなど工夫してみましょう。
フォームに「活動できる曜日」（チェックボックス）と「注意事項への同意」（スイッチ風チェックボックス）を追加してみましょう。
section のそれぞれに id を付け，ナビゲーションのリンクでスムーズに移動できるか確認しましょう。

次へ進む

基本的なコンポーネントがそろったら，Chapter 5: ミニプロジェクトを仕上げるで全体をまとめ，上から下まで一貫したページを完成させましょう。