CSS - ナビゲーションバー: ウェブサイトナビゲーションの玄関

こんにちは、将来のウェブ開発者たち！今日は、CSSのナビゲーションバーの世界に楽しい旅に出発します。あなたの近所の親切なコンピュータ教師として、私はこのウェブデザインの重要な部分を案内します。お気に入りの飲み物を手に取り、リラックスして、一緒に潜りましょう！

CSS - Navbar

ナビゲーションバーとは？

コードを書く前に、ナビゲーションバーとは何かを理解しましょう。巨大な図書館にいるとします。どうやって欲しい本を見つけるのでしょう？サインや案内板を使うでしょう、right？ウェブサイトのナビゲーションバーもそのようなものです。ユーザーが簡単にサイト内を移動できるようにするリンクの集合体です。

では、さまざまなナビゲーションバーの種類と、CSSを使ってどのように作成するかを見てみましょう。

CSS ヒorizontal ナビゲーションバー

水平なナビゲーションバーは、ウェブサイトで最も一般的に見られる種類です。ページの上部にボタンの一列があるように見えます。

以下は簡単な例です：

<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

そして、これをきれいに見せるCSSです：

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover {
background-color: #111;
}

これを分解すると：

リストのbulletsを list-style-type: none; で消去
リストアイテムを左にfloatして水平にする
リンクをボタンのようにスタイル化 4.ホバー効果を追加してインタラクティブにする

CSS ヴertical ナビゲーションバー

時々、ナビゲーションバーを垂直にしたい場合があります。特にモバイルデバイスやサイドバーではそうします。以下のようにやります：

<ul class="vertical-navbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

そしてCSS：

.vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

.vertical-navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

.vertical-navbar li a:hover {
background-color: #555;
color: white;
}

ここでの主な違いは、リストアイテムをfloatしない。代わりに、ナビゲーションバー全体に幅を設定し、リストアイテムを自然に積み重ねる。

CSS ドロップダウンナビゲーションバー

少し派手な要素を追加して、ドロップダウンメニューを追加しましょう！サブカテゴリーを整理するのに適しています。

<ul class="navbar">
<li><a href="#home">Home</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Products</a>
<div class="dropdown-content">
<a href="#">Laptops</a>
<a href="#">Tablets</a>
<a href="#">Smartphones</a>
</div>
</li>
<li><a href="#contact">Contact</a></li>
</ul>

そしてCSS：

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}

このCSSは、ユーザーが「Products」リンクをホバーしたときにドロップダウンコンテンツを表示するために :hover ペUDOクラスを使用します。

CSS 固定ナビゲーションバー

固定ナビゲーションバーは、スクロールしてもその場に留まります。常に必要な個人的なガイドのように感じます。

ナビゲーションバーを固定するためには、CSSに一行を追加するだけです：

.navbar {
/* ... 他のスタイル ... */
position: fixed;
top: 0;
width: 100%;
}

これにより、ナビゲーションバーは常に画面の上部に留まります。

CSS ステッキナビゲーションバー

ステッキナビゲーションバーは、固定ナビゲーションバーに似ていますが、スクロールしてから固定されます。友達があなたの後ろをついてくる感じです。

以下のようにステッキナビゲーションバーを作成します：

.navbar {
/* ... 他のスタイル ... */
position: sticky;
top: 0;
}

違いは、position: sticky を使用することです。

ナビゲーションバーの区切りの線

時々、ナビゲーションバーのアイテムを線で区切りたい場合があります。以下のような便利な技があります：

.navbar li {
border-right: 1px solid #bbb;
}

.navbar li:last-child {
border-right: none;
}

これは、各アイテムの間に線を追加し、最後のアイテムには線を追加しません。

固定垂直ナビゲーションバー

最後に、学んだことを組み合わせて固定垂直ナビゲーションバーを作成しましょう：

<ul class="fixed-vertical-navbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

そしてCSS：

.fixed-vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}

.fixed-vertical-navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

.fixed-vertical-navbar li a:hover {
background-color: #555;
color: white;
}

これにより、スクロールしても左側に固定された垂直ナビゲーションバーが作成されます。

結論

そして、みんな！さまざまなナビゲーションバーのスタイルをカバーしました。水平から垂直、ドロップダウンから固定まで。心に留めておいてください、練習は完璧に近づけます。ですから、これらのスタイルを試してみて、自分だけのユニークなナビゲーションバーを作成してみてください。

以下に、カバーしたさまざまなナビゲーションバーの種類をまとめた表があります：

ナビゲーションバーの種類	主要なCSSプロパティ	主な特徴
水平	`float: left;`	アイテムが水平に並ぶ
垂直	`width: [value];`	アイテムが垂直に積み重ねる
ドロップダウン	`:hover`	ホバー時に追加のオプションを表示
固定	`position: fixed;`	スクロールしてもその場に留まる
ステッキ	`position: sticky;`	スクロールしてから固定される

心に留めておいてください、コーディングは料理と同じで、基本のレシピから始めて、慣れてきたら自分だけの味を加えることができます。ですから、これらのスタイルを混ぜ合わせて、視覚的に魅力的なナビゲーションバーを作成してみてください！

ハッピーコーディング、そしてあなたのナビゲーションバーがいつも魅力的な目的地に導いてくれることを願っています！

Credits: Image by storyset