今回の課題

ホーム・作品さくひん・お問い合わせおといあわせの3つのリンクがあるナビバーを作つくろう！

📖 解説を見る

🔗 ナビゲーションバーってなに？

Webサイトの上うえにある「ホーム・概要がいよう・お問い合わせおといあわせ」などの横並よこならびメニューです。

✏️ 書かき方かた：

<nav>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">概要</a></li>
  </ul>
</nav>

⚠️ ポイント：
・nav はナビゲーション専用せんようの意味いみのあるタグ
・Flexboxで横よこに並ならべる
・list-style: none で●を消けす

ヒントを見る

nav ul に display: flex; list-style: none; gap: 20px; を書こう！

📄 見本

「答えを見る」を押すと、お手本のプレビューとコードが出ます。

💻 コードエディタ

あなたの出力

🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解レッスンに戻る

全問正解でクエストクリア！

未挑戦

問題 1: ナビバーのロゴ（左側ひだりがわ）とリンク（右側みぎがわ）を justify-content: space-between で並ならべよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: リンクにホバーで下線かせん（text-decoration: underline）をつけよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 3: ナビバーに position: sticky; top: 0; をつけてスクロールしても固定こていされるようにしよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

クエスト13：ナビゲーションバーを作ろう