CSSだけでドロップダウンする動きをつける方法（JavaScript不要）
wabサイトを制作する際に頻繁に使用するドロップダウンメニューをCSSのみで設置する方法について解説します。
ホバー可能で便利なドロップダウンです。
特に階層が多いwebサイトでは重宝する形式です。
ドロップダウンとは
ドロップダウンメニューは、webサイトの上部ヘッダー部分でよく見られます。
メニュー項目をクリックした場合や、ホバーした時に下に表示されるメニューのとこです。
デモ: ドロップダウンの例
さて、実際にホバーした際にドロップダウンされる例を見てみてください。
以下の３つの例の上にマウスを移動するとどのように動くかチェックしてみましょう。
基本ドロップダウン
ここからは実際のコードをチェックしてみましょう。
ユーザーが要素の上にマウスを移動したときに表示されるドロップダウンボックスを作成します。
例
<style>
.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);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>マウスオーバー</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
基本のドロップダウンの説明
まずは、マウスオーバーすると、ドロップダウンコンテンツが出るような形です。
HTML
任意の要素を使用してドロップダウンコンテンツを開くように設定します。
<span> または <button> の要素を使うのが良いでしょう。今回は、<span> を使いました。
HTMLの例
<div class="dropdown">
<span>マウスオーバー</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
CSS
.dropdownクラスは position:relative を使用します。これは、ドロップダウンコンテンツをドロップダウンボタンのすぐ下に配置する場合に必要です (position:absoluteを使用します）。
CSSの例（dropdown）
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-contentクラスは、実際のドロップダウンコンテンツを保持します。
デフォルトでは非表示になっており、ホバーすると表示されます (以下を参照)。min-widthが160pxに設定されていることに注意してください。
横幅は自由に変更してください。
CSSの例（dropdown-content）
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
widthを100% に設定します。
(小さい画面でのスクロールを有効にするためのoverflow:autoです)
borderを使用する代わりに、CSSのbox-shadowプロパティを使用して、ドロップダウンメニューを「カード」のように見せています。
CSSの例（box-shadow）
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
:hoverセレクターは、ユーザーがドロップダウンボタンの上にマウスを移動したときにドロップダウンメニューを表示するために使用されてます。
CSSの例（hover）
.dropdown:hover .dropdown-content {
display: block;
}
簡単！ドロップダウンで作るメニューバーの基礎
ユーザーがリストからオプションを選択できるドロップダウンメニューを作成します。
この例は、ドロップダウンボックス内にリンクを追加し、スタイルを設定したドロップダウンボタンに合わせてスタイルを設定する点を除いて、前の例と似ています。
例
<style>
/* ドロップボタンのスタイルを指定する */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* コンテナ <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;
}
/* ドロップダウンのコンテンツが表示されているときのドロップダウンボタンの背景色を変更 */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
右揃えのドロップダウン コンテンツ
ドロップダウン メニューを左から右ではなく右から左に移動させたい場合は、次のように追加します。right: 0;
その他の例
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。