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

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

ステップ

PDF形式でダウンロード

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>
```

コードは下記のように記述されているはずです。^{[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出典文献}