CSS ナビゲーションバー

ナビゲーションバーデモ

縦方向

• ホーム
• ニュース
• お問い合わせ
• 会社概要

横方向

• ホーム
• ニュース
• お問い合わせ
• 会社概要

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

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

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

ナビゲーションバーは基本的にリンクのリストなので、<ul>と<li>要素を使うのが理にかなっています：

<ul>
  <li><a href="default.asp">ホーム</a></li>
  <li><a href="news.asp">ニュース</a></li>
  <li><a href="contact.asp">お問い合わせ</a></li>
  <li><a href="about.asp">会社概要</a></li>
</ul>

それでは、リストからブレット（黒丸）とリストのマージンやパディングを取り除いてみましょう：

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

例の説明：

list-style-type: none; – ブレット（黒丸）を削除します。ナビゲーションバーにはリストマーカーは不要です。

margin: 0; および padding: 0; を設定して、ブラウザのデフォルト設定を削除します。