CSS ナビゲーションバー
垂直
水平
ナビゲーションバー
ナビゲーションバーを熟知することは、どのウェブサイトにとっても非常に重要です。
CSSを使用すると、退屈なHTMLメニューではなく、見栄えの良いナビゲーションバーに変換できます。
ナビゲーションバー = リンクリスト
標準的なHTMLの基礎として、ナビゲーションバーは必須です。
この例では、標準的なHTMLリストのナビゲーションバーを構築します。
ナビゲーションバーは基本的にリンクリストなので、<ul> と <li> 要素を使用するのが非常に理にかなっています。
例
試してみる »
では、リストからマージンとパディングを削除しましょう。
例の解説：
- list-style-type: none - リスト前の小さなマーカーを削除します。ナビゲーションバーにはリストマーカーは必要ありません。
- ブラウザのデフォルト設定を削除し、マージンとパディングを0に設定します。
上記の例のコードは、垂直および水平ナビゲーションバーで使用される標準コードです。
垂直ナビゲーションバー
上記のコードに、<a> 要素のスタイルを追加するだけで、垂直ナビゲーションバーを構築できます。
サンプルの説明：
- display:block - リンクをブロック要素として表示し、全体をクリック可能なリンク領域にします（テキストだけでなく）。幅を指定することもできます。
- width:60px - ブロック要素はデフォルトで最大幅になります。60ピクセルの幅を指定します。
ヒント：参照完全なスタイルの垂直ナビゲーションバーの例。
注意：垂直ナビゲーションバーでは <a> 要素の幅を必ず指定してください。幅を省略すると、IE6では予期しない結果になる可能性があります。
垂直ナビゲーションバーの例
マウスがオプションに移動したときに背景色を変更する、シンプルな垂直ナビゲーションバーの例を作成します。
例
試してみる »
アクティブ/現在のナビゲーションバーの例
オプションをクリックした後、"active" クラスを追加して、どのオプションが選択されているかを示すことができます。
リンクを作成して枠線を追加する
<li> または <a> に追加できますtext-align:centerスタイルを追加してリンクを中央揃えにします。
追加できますborder<ul> に追加しますborder属性を追加してナビゲーションバーに枠線を持たせます。各オプションに枠線を追加する場合は、各 <li> 要素に追加できます。border-bottom :
例
試してみる »
全画面の高さの固定ナビゲーションバー
次に、左側に全画面の高さの固定ナビゲーションバー、右側にスクロール可能なコンテンツを持つ例を作成します。
例
試してみる »
注意：この例はモバイルデバイスで使用できます。
水平ナビゲーションバー
水平ナビゲーションバーを作成するには2つの方法があります。使用するのはインライン或フロートのリスト項目です。
どちらの方法も優れていますが、リンクを同じサイズにしたい場合は、フロート方法を使用する必要があります。
インラインリスト項目
水平ナビゲーションバーを構築する方法の1つは、要素を指定することです。次のコードは標準のインラインです。
例の解説：
- display:inline; - デフォルトでは、<li>要素はブロック要素です。ここでは、各リスト項目の前後の改行を削除して、1行で表示します。
ヒント：参照完全なスタイルの水平ナビゲーションバーの例。
フロートリスト項目
上記の例では、リンクの幅が異なります。
すべてのリンクの幅を等しくするには、<li> 要素をフロートさせ、<a> 要素の幅を指定します。
例の解説：
- float:left - フロートしたブロック要素を使用して互いに隣り合わせにスライドさせます
- display:block - リンクをブロック要素として表示し、全体をクリック可能なリンク領域にします（テキストだけでなく）。幅を指定することもできます。
- width:60px - ブロック要素はデフォルトで最大幅になります。60ピクセルの幅を指定します。
ヒント：参照完全なスタイルの水平ナビゲーションバーの例。
水平ナビゲーションバーの例
マウスがオプションに移動した後に背景色を変更する水平ナビゲーションバーを作成します。
例
試してみる »
アクティブ/現在のナビゲーションバーの例
オプションをクリックした後、"active" クラスを追加して、どのオプションが選択されているかを示すことができます。
リンクを右揃えにする
ナビゲーションバーの一番右のオプションを右揃えに設定します (float:right;)。
例
試してみる »
区切り線を追加する
<li> を使用してborder-rightスタイルで区切り線を追加します:
例
試してみる »
固定ナビゲーションバー
ページのナビゲーションバーを上部または下部に固定するように設定できます。
注意：この例はモバイルデバイスで使用できます。
グレーの水平ナビゲーションバー
グレーの水平ナビゲーションバー
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color: #666;
}
試してみる »
その他の例
レスポンシブ上部ナビゲーション - CSS3 メディアクエリを使用してレスポンシブナビゲーションを作成する方法。
レスポンシブサイドバーナビゲーション - CSS3 メディアクエリを使用してサイドバーナビゲーションを作成する方法。
ナビゲーションドロップダウンメニュー - ナビゲーションバー内にドロップダウンメニューを設定します
その他の拡張
グレーの水平ナビゲーションバー
試してみる »
レスポンシブ上部ナビゲーション - CSS3 メディアクエリを使用してレスポンシブナビゲーションを作成する方法。
レスポンシブサイドバーナビゲーション - CSS3 メディアクエリを使用してサイドバーナビゲーションを作成する方法。
ナビゲーションドロップダウンメニュー - ナビゲーションバー内にドロップダウンメニューを設定します