HTMLとCSSでドロップダウンメニューを作成する方法

この記事では、HTMLとCSSのコードを使ってウェブサイトにドロップダウンメニューを作成する方法を紹介します。ここで紹介するドロップダウンメニューは、ボタンの上にカーソルを合わせた時に表示されるものです。ドロップダウンメニューが表示されると、ユーザーはメニューの中から項目を選択し、リンクするページに移動することができます。

ステップ

1
HTMLテキストエディタを開く　NotepadやTextEditなどのシンプルなテキストエディタや、Notepad++のような特化型のテキストエディタを使いましょう。
- Notepad++を使う場合は、作業を始める前にウィンドウ上部のLanguageメニューからHTMLを選択します。
2
ヘッダーを入力する　ヘッダーは、以降の文書に記述するコードの種類を指定するものです。
```
<!DOCTYPE html>
<html>
<head>
<style>
```
3
ドロップダウンメニューのボタンを作成する　下記のコードを入力し、ドロップダウンメニューボタンのサイズと色を指定しましょう。「#」は任意の数値と置き換えます（数値が大きいほどボタンのサイズが大きくなります）。また、「background-color」と「color」の値を別の色（またはHTMLカラーコード）に置き換えることも可能です。^{[1]
X
出典文献}
```
.dropbtn {
    background-color: black;
    color: white;
    padding: #px;
    font-size: #px;
    border: none;
}
```
4
ドロップダウンメニューにリンクを設定できるようにする　あとでドロップダウンメニューの項目にリンクを追加するため、下記のコードを入力します。
```
.dropdown {
    position: relative;
    display: inline-block;
}
```
5
ドロップダウンメニューのデザインを指定する　下記のコードを入力すれば、ドロップダウンメニューのサイズ、ウェブページの別の要素に対する表示位置、色を指定できます。「min-width」の「#」を任意の数値（例：250）に置き換え、「background-color」の値を好みの色またはHTMLカラーコードに変更しましょう。
```
.dropdown-content {
    display: none;
    position: absolute;
    background-color: lightgrey;
    min-width: #px;
    z-index: 1;
}
```
6
ドロップダウンメニューの項目のデザインを設定する　下記のコードは、ドロップダウンメニューの項目の文字色、サイズを指定するものです。「#」を任意のピクセル値に置き換え、項目のサイズを調整しましょう。
```
.dropdown-content a {
    color: black;
    padding: #px #px;
    text-decoration: none;
    display: block;
}
```
7
ドロップダウンメニューのマウスオーバー時の設定をする　ドロップダウンメニューにカーソルを合わせた時、色が変わるように設定します。1つめの「background-color」はドロップダウンメニューの項目を選択した時の色を、2つ目の「background-color」はドロップダウンメニューボタンにマウスオーバーした時の色を指定する記述です。これらの色は、マウスオーバーする前の色より明るくするのがよいとされています。
```
.dropdown-content a:hover {background-color: white;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: grey;}
```
8
CSS記述を閉じる　下記のコードを入力し、文書上でCSSの記述が終了したことを示しましょう。
```
</style>
</head>
```
9
ドロップダウンメニューの名前を入力する　下記のコードを入力しましょう。「Name」はボタンにつけたい任意の名前に置き換えます（例：Menu）。
```
<div class="dropdown">
<button class="dropbtn">Name</button>
<div class="dropdown-content">
```
10
ドロップダウンメニューにリンクを追加する　ドロップダウンメニューの項目は、自身のウェブサイト内、あるいは他のウェブサイト内のページにリンクさせておきましょう。下記のコードを入力すると、ドロップダウンメニューに項目を追加できます。https://www.website.comをリンク先のURL（必ずダブルクオーテーションマークで囲う）に、「Name」をリンクの名前に置き換えましょう。
```
<a href="https://www.website.com">Name</a>
<a href="https://www.website.com">Name</a>
<a href="https://www.website.com">Name</a>
```
11
文書を閉じる　下記のタグを入力して文書を閉じ、ドロップダウンメニューを設定する記述が終了したことを示しましょう。
```
</div>
</div>
</body>
</html>
```

12

入力したコードを確認する　コードは下記のように記述されているはずです。^{[2]
X
出典文献}

<!DOCTYPE html>
<html>
<head>
<style>

.dropbtn {
    background-color: black;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: lightgrey;
    min-width: 200px;
    z-index: 1;
}

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

.dropdown-content a:hover {background-color: white;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: grey;}

</style>
</head>

<div class="dropdown">
<button class="dropbtn">Social Media</button>
<div class="dropdown-content">

<a href="https://www.google.com">Google</a>
<a href="https://www.facebook.com">Facebook</a>
<a href="https://www.youtube.com">YouTube</a>

</div>
</div>
</body>
</html>

ポイント

ウェブサイト上で公開する前に、コードが正しく反映されるかどうか必ずテストを行いましょう。
上で紹介したのは、ボタンをマウスオーバーすると表示されるドロップダウンメニューの記述方法です。ボタンをクリックした時にだけ表示されるドロップダウンメニューを作成したい場合は、JavaScriptを使用する必要があります。^{[3]
X
出典文献}