CSS 水平メニューバー
この記事では、CSS を使用して水平ナビゲーションメニューバーを作成する方法について説明します。
---1. 基本的なナビゲーションバー
まず、`
- ` 要素と `
- ` 要素を使用して、メニュー構造となる順序なしリストを作成します。
- リスト項目のデフォルトスタイル（`list-style: none;`）を削除します。
- リスト項目を行内ブロック要素（`display: inline-block;`）に設定して、水平に配置します。
- リンクスタイル（`text-decoration: none;`）を設定して、下線を削除します。
<nav> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">製品情報</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> <style> nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; } nav a { text-decoration: none; padding: 10px; } </style>2. 背景色と境界線の追加
メニューバーに背景色（`background-color`）を追加します。 メニューバーの内側余白（`padding`）と外側余白（`margin`）を設定して、間隔を調整します。 メニュー項目に境界線（`border`）を追加するか、アウトライン（`outline`）を使用して強調表示します。
nav { background-color: #f0f0f0; padding: 10px; margin: 20px 0; } nav li { border-right: 1px solid #ccc; } nav li:last-child { border-right: none; }3. ホバー効果の追加
`:hover` 擬似クラスを使用して、マウスがホバーしたメニュー項目にスタイルを追加します。 たとえば、背景色、テキストの色を変更したり、下線を付けたりすることができます。
nav a:hover { background-color: #ddd; color: #333; }4. レスポンシブメニューバー
CSS メディアクエリ（`@media`）を使用して、画面サイズに合わせてメニューバーのスタイルを調整します。 小さな画面のデバイスでは、水平メニューバーを垂直メニューバーに変換することができます。 要素の非表示/表示や、要素のレイアウトを変更することで、レスポンシブデザインを実現します。
@media (max-width: 768px) { nav li { display: block; border-right: none; border-bottom: 1px solid #ccc; } }5. その他のスタイル
- メニューバーのフォント、テキストの色、テキストの配置などを設定します。
- CSS3 のプロパティを使用して、影、角丸、グラデーションなどの効果を追加します。
- アイコンフォントや画像を使用して、メニューバーの視覚効果を向上させます。
参考資料
よくある質問
Q1. メニュー項目間のスペースをどのように調整しますか？
A1. リスト項目の内側余白（`padding`）または外側余白（`margin`）を調整することで、メニュー項目間のスペースを変更できます。
Q2. メニューバーをページの上部に固定するにはどうすればよいですか？
A2. メニューバーに `position: fixed;` と `top: 0;` のスタイルを設定します。ただし、他のコンテンツがメニューバーの下に隠れないように、適切な `z-index` を設定する必要がある場合があります。
Q3. ドロップダウンメニューを水平メニューバーに追加するにはどうすればよいですか？
A3. ドロップダウンメニューは、入れ子になったリストと `:hover` 擬似クラスを使用して作成できます。詳しい方法は、W3Schools のドロップダウンメニューのチュートリアルをご覧ください。