css メニューバー 横並び

CSS 水平メニューバー

CSS 水平メニューバー

この記事では、CSS を使用して水平ナビゲーションメニューバーを作成する方法について説明します。

---

1. 基本的なナビゲーションバー

まず、`

    ` 要素と `
  • ` 要素を使用して、メニュー構造となる順序なしリストを作成します。

    • リスト項目のデフォルトスタイル（`list-style: none;`）を削除します。
    • リスト項目を行内ブロック要素（`display: inline-block;`）に設定して、水平に配置します。
    • リンクスタイル（`text-decoration: none;`）を設定して、下線を削除します。
    
<nav>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">製品情報</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

<style>
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  text-decoration: none;
  padding: 10px;
}
</style>

    2. 背景色と境界線の追加

    メニューバーに背景色（`background-color`）を追加します。 メニューバーの内側余白（`padding`）と外側余白（`margin`）を設定して、間隔を調整します。 メニュー項目に境界線（`border`）を追加するか、アウトライン（`outline`）を使用して強調表示します。 

    
nav {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 20px 0;
}

nav li {
  border-right: 1px solid #ccc;
}

nav li:last-child {
  border-right: none;
}

    3. ホバー効果の追加

    `:hover` 擬似クラスを使用して、マウスがホバーしたメニュー項目にスタイルを追加します。 たとえば、背景色、テキストの色を変更したり、下線を付けたりすることができます。 

    
nav a:hover {
  background-color: #ddd;
  color: #333;
}

    4. レスポンシブメニューバー

    CSS メディアクエリ（`@media`）を使用して、画面サイズに合わせてメニューバーのスタイルを調整します。 小さな画面のデバイスでは、水平メニューバーを垂直メニューバーに変換することができます。 要素の非表示/表示や、要素のレイアウトを変更することで、レスポンシブデザインを実現します。 

    
@media (max-width: 768px) {
  nav li {
    display: block;
    border-right: none;
    border-bottom: 1px solid #ccc;
  }
}

    5. その他のスタイル

    • メニューバーのフォント、テキストの色、テキストの配置などを設定します。
    • CSS3 のプロパティを使用して、影、角丸、グラデーションなどの効果を追加します。
    • アイコンフォントや画像を使用して、メニューバーの視覚効果を向上させます。

    参考資料

    よくある質問

    Q1. メニュー項目間のスペースをどのように調整しますか？

    A1. リスト項目の内側余白（`padding`）または外側余白（`margin`）を調整することで、メニュー項目間のスペースを変更できます。

    Q2. メニューバーをページの上部に固定するにはどうすればよいですか？

    A2. メニューバーに `position: fixed;` と `top: 0;` のスタイルを設定します。ただし、他のコンテンツがメニューバーの下に隠れないように、適切な `z-index` を設定する必要がある場合があります。

    Q3. ドロップダウンメニューを水平メニューバーに追加するにはどうすればよいですか？

    A3. ドロップダウンメニューは、入れ子になったリストと `:hover` 擬似クラスを使用して作成できます。詳しい方法は、W3Schools のドロップダウンメニューのチュートリアルをご覧ください。

    その他の参考記事:CSSナビゲーションバー