使い易いナビゲーションは、どのような web サイトでも重要なことです。
CSS を使用することで、冴えない HTML メニューを美しいナビゲーションバーに変えることができます。
ナビゲーションバーには、ベースとして標準の HTML が必要です。
この例では、標準の HTML リストからナビゲーションバーを作成します。
ナビゲーションバーは、基本的にリンクのリストであるため、 <ul< と <li< 要素を使うことは完全に理にかなったものです:
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
Try it Yourself ❯
ここで、リストから中点とマージンとパディングを削除します:
例の説明：
list-style-type: none; - 中点を削除します。ナビゲーションバーにリストマーカは必要ありませんmargin: 0; と padding: 0; を設定します上記例のコードは、縦方向と横方向双方のナビゲーションバーで使用される標準のコードです。
縦向のナビゲーションバーを作るためは、上記コードに加えて、<a> 要素のスタイルを設定する必要があります:
例の説明：
display: block; - ブロック要素としてリンクを表示することで、(テキストだけではなく)
リンク・エリア全体がクリック可能になると共に、幅を指定することができるようになります（必要に応じ、パディング、マージン、高さなども）。width: 60px; - ブロック要素は、デフォルトで可能な幅の全体を占有しますので、幅を 60px に指定します。ブロック要素として表示したときに、利用できる全ての幅に広がるよう、<ul> の幅を設定し、<a> の幅を削除することができます。 これは、前の例と同じ結果になります：
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
}
Try it Yourself ❯
灰色の背景色を持ち、マウスを上に移動したときにリンクの背景色が変る、基本的な縦向ナビゲーションバーを作成します：
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px
0 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
Try it Yourself ❯
ユーザがどのページにいるのかを分かるようにするため、現在のリンクに "active" クラスを追加します：
リンクを中央揃えにするため、<li> または <a> に text-align:center を追加します。
ナビゲーションバーの周りにボーダーを追加するには、<ul> に border プロパティを追加します。
ナビゲーションバーの内側にもボーダーが必要な場合は、最後の一つを除いて、すべての <li> 要素に border-bottom を追加します：
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Try it Yourself ❯
"sticky" サイド・ナビゲーションは、高さ全体に固定された縦向ナビゲーションバーを作成します：
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
Try it Yourself ❯
注: この例は、モバイル・デバイスでは適切に動作しないかもしれません。
横向のナビゲーションバーを作成するためには、2つの方法があります。 リスト項目を、インラインかフロートで使用する方法です。
横向のナビゲーションバーを作るための 1 つの方法は、上記の"標準"コードに加え、 <li> 要素をインラインとして指定することです:
例の説明：
横向のナビゲーションバーを作るためのもう 1 つの方法は、<li> 要素をフロートし、ナビゲーションリンクのレイアウトを指定することです：
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
Try it Yourself ❯
例の説明：
float: left; - 互いの隣にスライドさせるためのブロック要素にするのにフロートを使用しますdisplay: block; - ブロック要素としてリンクを表示することで、(テキストだけではなく)
リンク・エリア全体がクリック可能になると共に、パディングを（必要なら、高さ、幅、マージンなども）指定することができるようになります。padding: 8px; - ブロック要素は、可能な幅の全体を占有するため、お互いの横にフロートできません。
そのために、外観が良く見えるようにするためにいくつかのパディングを指定しますbackground-color: #dddddd; - 各要素に灰色の背景色を追加しますチップ: 幅全体に背景色を設定したい場合は、各 <a> の代わりに <ul> に背景色を追加します：
暗い背景色を持ち、マウスを上に移動したときにリンクの背景色が変る、基本的な横向きナビゲーションバーを作成します：
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
}
Try it Yourself ❯
ユーザがどのページにいるのかを分かるようにするため、現在のリンクに "active" クラスを追加します：
右にリスト項目をフロートすることによる右揃えのリンク (float:right;):
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul>
Try it Yourself ❯
リンクの仕切りを作成するため、<li> に border-right プロパティを追加します：
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Try it Yourself ❯
ユーザがページをスクロールしたときも、ナビゲーション・バーをページの上部または下部に留まるようにします：
注: これらの例は、モバイル・デバイスでは正しく動作しないかもしれません。
薄い灰色ののボーダーを持つ灰色の横向きナビゲーション・バーの例：
レスポンシブ・トップ・ナビゲーション
レスポンシブなトップ・ナビゲーションを作るための CSS3 メディアクエリの使用方法。
レスポンシブ・サイド・ナビゲーション
レスポンシブなサイド・ナビゲーションを作るための CSS3 メディアクエリの使用方法。
ドロップダウン・ナビゲーション・バー
ナビゲーション・バーの中にドロップダウン・メニューの追加方法。