HTML と CSS を使用してナビゲーション バーを作成する方法

適切に設計された機能的なナビゲーション バー (navbar) は、Web サイトの重要なコンポーネントの 1 つです。これはユーザーにとってロードマップとして機能し、さまざまなページ間を移動するのに役立ちます。ナビゲーションバーは通常、Web ページの上部に配置され、ユーザーが主要なリンクにアクセスするために常に表示されます。この記事では、HTML と CSS を使用して、視覚的に魅力的で機能的な CSS ナビゲーション バー を作成する方法を説明します。また、ナビゲーションバーをページの上部に確実に表示するためのさまざまなテクニックについても説明します。

このナビゲーション バーのライブ デモをチェックアウトし、CodePen のプレビューにアクセスしてその機能を探索することができます。

次のコード スニペットは、ロゴ、メニュー項目、CTA ボタンを備えた応答性の高いナビゲーション バーの作成を示しています。 HTML と CSS コードは次のとおりです:

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar</title>
    <style>
      body {
        background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
        height: 100vh;
        margin: 0;
        padding-top: 10px;
      }

      .navbar {
        display: flex;
        background: #fff;
        border-radius: 30px;
        padding: 10px 20px;
        margin: 0 auto;
        width: 95%;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
      }

      .logo {
        width: 12rem;
      }

      .menu {
        display: flex;
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .item {
        margin: 0 15px;
      }

      .item a {
        text-decoration: none;
        color: #333;
        font-weight: bold;
      }

      .item a:hover {
        color: #2258c3;
      }

      button {
        background-color: #2258c3;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 20px;
        cursor: pointer;
      }

      button:hover {
        background-color: #fd2df3;
      }
    </style>
  

  
    <nav class="navbar">
      <img src="https://bitlearners.com/wp-content/uploads/2024/06/BitLearners-logo-1.png" alt="HTML と CSS を使用してナビゲーション バーを作成する方法" class="logo">

      <ul class="menu">
        <li class="item"><a href="#">Home</a></li>
        <li class="item"><a href="#">About Us</a></li>
        <li class="item"><a href="#">Contact Us</a></li>
        <li class="item"><a href="#">Blog</a></li>
      </ul>

      <button type="submit">Call Now</button>
    </nav>
  

コードを分解する
HTML と CSS を使用してナビゲーションバーがどのように作成されるかを詳しく見てみましょう。

HTMLの構造

コードの HTML 部分は簡単です。これは、3 つの主要コンポーネントを含む nav 要素で構成されます:

• ロゴ (イメージ)
• クリック可能なリンクを含む**メニュー**リスト (ホーム、会社概要、お問い合わせ、ブログ)
• 行動喚起 (今すぐ電話) として機能する **ボタン **
• 構造は要素内にラップされており、ナビゲーション バーのコンテナとして機能します。

<nav class="navbar">
  <img src="logo-url" alt="HTML と CSS を使用してナビゲーション バーを作成する方法" class="logo">
  <ul class="menu">
    <li class="item"><a href="#">Home</a></li>
    <li class="item"><a href="#">About Us</a></li>
    <li class="item"><a href="#">Contact Us</a></li>
    <li class="item"><a href="#">Blog</a></li>
  </ul>
  <button type="submit">Call Now</button>
</nav>

ロゴは タグを使用して作成されます。メニューは、リスト項目 (

)

を含む順序なしリスト (

)

であり、各リスト項目にはアンカー タグ があります。 () は、別のページへのリンクを作成します。最後に、ボタンはスタイルを備えたシンプルなタグです。

CSS を使用したスタイル設定

魔法は、ナビゲーション バーのレイアウトと外観を定義する CSS セクションで起こります。重要な要素のいくつかについて説明しましょう。

背景とボディのスタイリング
ボディには、青 (#2258c3) からピンク (#fd2df3) に移行するグラデーションの背景があります。高さは 100vh (ビューポートの高さ) に設定されており、背景が画面全体に表示され、ページの周囲に不要なスペースができないようにするためのマージンがありません。

body {
  background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
  height: 100vh;
  margin: 0;
  padding-top: 10px;
}

ナビゲーションバーのスタイル設定

ナビゲーションバーの背景は白で、角が丸い(border-radius: 30px)。パディングとマージンにより、ナビゲーションバーの内側と外側にスペースが作成されます。 display: flex プロパティは、ナビゲーションバーをフレックスボックスにし、子要素の水平方向の配置を可能にします。 justify-content: space-between により、ロゴ、メニュー、ボタンが均等な間隔で配置されます。

.navbar {
  display: flex;
  background: #fff;
  border-radius: 30px;
  padding: 10px 20px;
  margin: 0 auto;
  width: 95%;
  justify-content: space-between;
  align-items: center;
}

Navbar を上部に固定する

ナビゲーション バーの重要な機能の 1 つは、スクロール中にページの上部に留まるということです。これを実現するには、position: 固定プロパティを使用します。これにより、スクロールに関係なく、ナビゲーションバーを上部 (top: 0) に固定したままにすることができます。さらに、z-index: 9999 により、ナビゲーションバーが常にページ上の他の要素の上に配置されます。

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

メニュー項目とインタラクティブ性

メニュー項目は、.menu クラスの display: flex を使用して水平方向に表示されます。項目にはマージンによるスペースが与えられ、各項目はデフォルトのリスト スタイルとパディングを削除するようにスタイル設定されます。メニュー項目内のリンクにはテキスト装飾がなく、太字のフォントと暗い色でスタイル設定されています。

リンクのホバー効果は青色の背景色 (#2258c3) に合わせて色を変更し、リンクがインタラクティブであることを視覚的に示します。

.menu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.item {
  margin: 0 15px;
}

.item a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.item a:hover {
  color: #2258c3;
}

ボタンのスタイル

ボタンは青色の背景 (#2258c3)、白いテキスト、丸い角 (border-radius: 20px) でスタイル設定されています。カーソルを置くと、背景のグラデーションに合わせて背景がピンク色 (#fd2df3) に変わります。

button {
  background-color: #2258c3;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
}

button:hover {
  background-color: #fd2df3;
}

Navバーを常に最前面に保つ方法

CSS を使用してページの上部にヘッダーを固定するには、position:fixed プロパティを top:0 とともに使用します。これにより、ユーザーがスクロールしてもナビゲーションバーが上部に留まることになります。コードでの適用方法は次のとおりです:

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

以上がHTML と CSS を使用してナビゲーション バーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。