CSSナビゲーションバー
デモ：ナビゲーションバー
ナビゲーションバー
使いやすいナビゲーションを持つことは、どのWebサイトにとっても重要です。
CSSを使用すると、退屈なHTMLメニューを見栄えの良いナビゲーションバーに変換できます。
ナビゲーションバー=リンクのリスト
ナビゲーションバーには、ベースとして標準のHTMLが必要です。
この例では、標準のHTMLリストからナビゲーションバーを作成します。
ナビゲーションバーは基本的にリンクのリストであるため、<ul>要素と<li>要素を使用することは完全に理にかなっています。
例
<ul>
<li><a href="default.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;削除する
上記の例のコードは、垂直ナビゲーションバーと水平ナビゲーションバーの両方で使用される標準コードです。これについては、次の章で詳しく説明します。