CSS - ドロップダウン：入門ガイド

こんにちは、未来のウェブデザイナーさんたち！今日は、CSSのドロップダウンについて楽しく学びましょう。近所の親切なコンピュータ先生として、この旅を案内するのが楽しみです。コードを書いたことがない方也不用担心——基礎から少しずつ進めていきます。コーヒー（またはお好みでティー）を飲みながら、始めましょう！

CSSドロップダウンとは？

コードに飛び込む前に、まずドロップダウンとは何かを理解しましょう。高級レストランで、ウェイターがメニューを渡してくれるとします。でも、これは普通のメニューよりも特別です。マジックメニューです！「前菜」にタップすると、美味しいスターターのリストが現れます。ウェブサイトでのドロップダウンも同じです。インタラクションすると、更多信息が表示されます。

では、CSSでこの魔法をどうやって作るのか見てみましょう！

CSSドロップダウン - 基本例

まずは簡単なドロップダウンメニューを作ってみましょう。以下はHTMLとCSSのコードです：

<div class="dropdown">
<button class="dropbtn">ドロップダウン</button>
<div class="dropdown-content">
<a href="#">リンク1</a>
<a href="#">リンク2</a>
<a href="#">リンク3</a>
</div>
</div>

.dropdown {
position: relative;
display: inline-block;
}

.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;
}

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

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

これを分解すると：

1. ドロップダウンの全体を収納するコンテナ（<div class="dropdown">）を作成します。
2. 中には、ドロップダウンを引き起こすボタン（<button class="dropbtn">）があります。
3. 実際のドロップダウンコンテンツは別のdiv（<div class="dropdown-content">）にあります。
4. CSSでドロップダウンコンテンツをデフォルトで非表示（display: none;）にします。
5. ドロップダウンコンテナをホバーするとコンテンツを表示（display: block;）します。

CSSドロップダウン - ホバー効果

基本のドロップダウンができたので、ホバー効果を追加して少し豪華にしてみましょう：

.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown:hover .dropbtn {
background-color: #3e8e41;
}

このCSSは、ボタンをホバーすると色が変わるようにします。まるでボタンが「更多のオプションを表示する準備ができています！」と言っているようです！

CSSドロップダウン - クリック時の表示

時々、ドロップダウンがホバーではなくクリックで表示されるようにしたいことがあります。それには少しのJavaScriptを使います：

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">ドロップダウン</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">リンク1</a>
<a href="#">リンク2</a>
<a href="#">リンク3</a>
</div>
</div>

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

.show {display:block;}

このスクリプトは、ボタンをクリックすると「show」クラスをオンオフするし、ページの他のところをクリックするとドロップダウンを閉じます。

CSSドロップダウン - 右寄せメニュー

ドロップダウンを左ではなく右に寄せるにはどうしたらいいでしょうか？簡単です！

.dropdown-content {
right: 0;
}

このCSSを既存のCSSに追加するだけで、「右に寄せてください」とドロップダウンに言っています！

CSSドロップダウン - 左寄せメニュー

完全性を期すために、左寄せする方法も紹介します（これは通常デフォルトですが）：

.dropdown-content {
left: 0;
}

CSSドロップダウン - 画像を追加

ドロップダウンをさらに魅力的にするために、画像を追加してみましょう：

<div class="dropdown">
<button class="dropbtn">ドロップダウン</button>
<div class="dropdown-content">
<a href="#"><img src="img_5terre.jpg" alt="Cinque Terre" width="100"></a>
<a href="#">リンク1</a>
<a href="#">リンク2</a>
</div>
</div>

.dropdown-content img {
margin: 10px 0;
}

今ではドロップダウンに美しい画像が追加されました。まるでCSSのアイスクリームにチェリーをのせたようなものです！

CSSドロップダウン - ナビゲーションバーと組み合わせる

最後に、ドロップダウンをナビゲーションバーに組み込む方法を見てみましょう：

<ul class="navbar">
<li><a href="#">ホーム</a></li>
<li><a href="#">ニュース</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">ドロップダウン</a>
<div class="dropdown-content">
<a href="#">リンク1</a>
<a href="#">リンク2</a>
<a href="#">リンク3</a>
</div>
</li>
</ul>

.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;
}

.navbar .dropdown {
display: inline-block;
}

これで、完全に機能するナビゲーションバーにドロップダウンメニューが追加されました！

結論

おめでとうございます！さまざまなタイプのCSSドロップダウンを作成することを学びました。練習が成功の鍵ですので、これらの例を試してみてください。色を変えたり、アニメーションを追加したり、さまざまなドロップダウンを一ページに組み合わせたりしてみてください。

以下は、私たちがカバーした方法の簡単な参照表です：

方法	説明
基本ドロップダウン	ホバーで表示されるシンプルなドロップダウン
ホバーエフェクト	ホバーで色が変わるドロップダウン
クリック時の表示	クリックで表示されるドロップダウン
右寄せメニュー	右に寄せるドロップダウン
左寄せメニュー	左に寄せるドロップダウン（デフォルト）
画像を追加	画像を含むドロップダウン
ナビゲーションバーと組み合わせる	ナビゲーションバーにドロップダウンを組み込む

ウェブデザインの世界では、創造性があなたの最高の友です。それでは、素晴らしいドロップダウンを作成し、もしかしたらウェブナビゲーションの次の大きな発明を发明するかもしれません。お楽しみに！

Credits: Image by storyset