CSS ナビゲーションバー
デモ:ナビゲーションバー
ナビゲーションバー
使いやすいナビゲーションを持つことは、どのWebサイトでも重要です。
CSSを使用すると、退屈なHTML メニューを見栄えの良いナビゲーションバーに変えることができます。
ナビゲーションバー = リンクのリスト
ナビゲーションバーには、ベースとして標準のHTMLが必要です。
この例では、標準のHTMLリストからナビゲーションバーを作成します。
ナビゲーションバーは基本的にリンクのリストであるため、<ul>要素と<li>要素を使用することは完全に理にかなっています。
例
<ul>
<li><a href="default.asp" style="background-color: #04AA6D;
color: white;">ホーム</a></li>
<li><a href="news.asp" style="background-color: #04AA6D;
color: white;">ニュース</a></li>
<li><a href="contact.asp" style="background-color: #04AA6D;
color: white;">お問い合わせ</a></li>
<li><a href="about.asp" style="background-color: #04AA6D;
color: white;">会社概要</a></li>
</ul>
リストから箇条書きとマージンとパディングを削除しましょう。
例の説明
list-style-type: none;- 黒丸を削除します。ナビゲーションバーにリストマーカーは必要ありません。- ブラウザのデフォルト設定を削除するために
margin: 0;とpadding: 0;を設定します。
上記の例のコードは、垂直方向と水平方向の両方のナビゲーションバーで使用される標準コードです。これについては、次の章で詳しく説明します。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。