HTML のナビゲーションリンク：ウェブサイトのナビゲーションをマスターする

はじめに

HTML の<nav>タグは、ウェブサイト上のナビゲーションリンクを作成するための重要な要素です。この実験では、<nav>タグを使用してウェブサイト上にナビゲーションメニューを作成する方法を学びます。

注：index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

基本的な HTML ページの作成

まず、新しい HTML ページを作成して、その名前をindex.htmlとし、基本的な HTML 構造を追加しましょう。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>
  </head>
  <body></body>
</html>

タグを使ってナビゲーションリンクを追加する

さて、HTML の<nav>タグを使ってナビゲーションメニューを作成しましょう。<body>タグの中に<nav>要素を作成します。

<body>
  <nav></nav>
</body>

タグを使ってナビゲーションリンクを追加する

次に、HTML の<a>タグを使って<nav>タグの中にいくつかのナビゲーションリンクを追加します。

<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact Us</a>
  </nav>
</body>

ナビゲーションメニューのスタイリング

ナビゲーションメニューをより視覚的に魅力的にするために、CSS を追加しましょう。HTML に以下のスタイルを追加します。

<head>
  <meta charset="UTF-8" />
  <title>My Website</title>

  <style>
    nav {
      background-color: #333;
      overflow: hidden;
    }

    a {
      float: left;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    a:hover {
      background-color: #ddd;
      color: black;
    }
  </style>
</head>

最終ページ

あなたの完成版のindex.htmlページはこのように見えるはずです。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>

    <style>
      nav {
        background-color: #333;
        overflow: hidden;
      }

      a {
        float: left;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      a:hover {
        background-color: #ddd;
        color: black;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact Us</a>
    </nav>
  </body>
</html>

まとめ

この実験では、HTML の<nav>タグを使ってウェブサイトにナビゲーションメニューを作成する方法を学びました。<nav>タグを使ってナビゲーションメニューを作成し、CSS で装飾することで、ユーザーがウェブサイトを簡単にナビゲートできるようになり、視覚的に魅力的になります。