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

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

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

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

HTMLの構造

コードの HTML 部分は単純です。これは、3 つの主要コンポーネントを含む 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;
}

ナビゲーションバーを上部に固定する

ナビゲーション バーの重要な機能の 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)。

ボタン { 背景色: #2258c3; 色: 白; 境界線: なし。 パディング: 10px 20px; 境界半径: 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 { 位置: 固定; トップ: 0; 左: 0; 右: 0; z インデックス: 9999; }

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