CSS ナビゲーションバー

ナビゲーションバーは、webサイト上でページ間を移動するためのリンクを提供する重要な要素です。

HTML構造

ナビゲーションバーの基本構造は、通常、<nav>要素内に<ul>（順序なしリスト）を使用して作成します。リストの各項目は<li>で表し、<a>タグを使用してリンクを作成します。

<nav>
  <ul>
    <li><a href="home.html">ホーム</a></li>
    <li><a href="services.html">サービス</a></li>
    <li><a href="contact.html">コンタクト</a></li>
    <li><a href="about.html">アバウト</a></li>
  </ul>
</nav>

nav要素はHTML5で導入された新しい要素で、ウェブページのナビゲーション部分を定義するために使用されます。nav要素は、メインのナビゲーションバー、サイドバーのメニュー、ページ内のリンクなど、ページ間やページ内の重要なリンクを含むセクションに対して使用されることが一般的です。

nav要素の利点は、ウェブページの構造を明確にし、ウェブページの意味を理解しやすくすることです。また、スクリーンリーダーや検索エンジンが、ページのナビゲーション部分を特定しやすくなるため、アクセシビリティやSEOにも効果があります。

古いウェブページではnav要素が導入される前に作成されたため、div要素やul要素などを使ってナビゲーションを実装していることが多いです。しかし、現在ではnav要素を使用してナビゲーションを定義することが推奨されています。

基本スタイル

ナビゲーションバーに適用する基本スタイルを設定します。

まず、リストのスタイルをリセットし、ナビゲーションバーに背景色を設定します。

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

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

list-style-type: none;はリストの各項目の前に表示されるマーカー（通常は点）が非表示になります。

margin: 0;はリストの外側の余白（margin）を0に設定しています。これにより、リストが他の要素と隣接していても、余白がない状態になります。デザインがコンパクトで統一感があるため、ナビゲーションバーが他のコンテンツに影響を与えにくくなります。

padding: 0;はリストの内側の余白（padding）を0に設定しています。リスト項目間のスペースがなくなり、ナビゲーションバーがすっきりと見えます。

リンクスタイル

リンクに適用するスタイルを設定します。

リンクには、テキスト色、テキスト装飾、パディング、ディスプレイプロパティを設定します。さらに、リンクにホバーエフェクトを追加します。

nav ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #111;
}

水平レイアウト

ナビゲーションバーのリスト項目を水平に並べます。これには、li要素にdisplay: inline-block;またはfloat: left;を適用します。

nav ul li {
  display: inline-block;
}

これで、基本的なナビゲーションバーが完成しました。

必要に応じて、フォントサイズやフォントファミリー、ボーダー、アクティブページのスタイルなどをカスタマイズして、デザインをさらに改善することができます。

固定ナビゲーションバー

ナビゲーションバーをページの上部に固定して、ユーザーがスクロールしても常に表示されるようにする方法です。

これには、position: fixed; を使います。以下のコードを追加してください。

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

このコードにより、ナビゲーションバーはページの上部に固定され、横幅はページ全体に広がります。スクロールしてもナビゲーションバーが常に表示されるため、ユーザーが簡単にナビゲーションを操作できます。

ページの下部に固定したい場合はbottom: 0;に変更します。

ul {
    position: fixed;
    bottom: 0;
    width: 100%;
}