CSS ナビゲーションバー

デモ：ナビゲーションバー

垂直ナビゲーションバー

水平ナビゲーションバー


ナビゲーションバー

使いやすいナビゲーションはどのウェブサイトでも重要です。

CSSを使用することで、退屈なHTMLメニューを美しいナビゲーションバーに変えることができます。

ナビゲーションバー = リンクリスト

ナビゲーションバーには標準のHTMLが必要です。

この例では、標準のHTMLリストでナビゲーションバーを構築します。

ナビゲーションバーは基本的にリンクリストであり、そのためには<ul>と<li>要素を使用することが非常に意味があります：

例

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

自分で試してみましょう

現在、リストからアイテムを削除し、マージンおよびパディング（余白）を外します：

例

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

自分で試してみましょう

例解：

  • list-style-type: none; - リストアイテムを削除します。ナビゲーションバーにはリストアイテムのマークが必要ありません。
  • 設定 margin: 0; および padding: 0; ブラウザのデフォルト設定を削除します。

上の例のコードは、垂直および水平ナビゲーションバーで使用される標準コードであり、次の章でさらに詳しく学ぶことができます。