SQL見るだけクエリ#290 JavaScriptでプロダウンメニューのCSS部分を解説

JavaScriptでプロダウンメニューのCSS部分を解説してみようと思います。

この記事を読むと（約5分）
JavaScriptでプロダウンメニューのCSSをイメージできます。

JavaScriptでプロダウンメニューのCSS

CSSでスタイリング:

/* styles.css */
.dropdown {
  position: relative;
  display: inline-block;
}

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

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

ドロップダウンメニューを作成するためのスタイルを定義に関して各セレクタとプロパティの役割を解説します。

1. .dropdown

position: relative;: .dropdown クラスは、相対位置を持つ要素として配置されます。この要素内で絶対位置を指定する際の基準点となります。
display: inline-block;: 要素をインラインブロックとして表示します。これにより、要素は横並びに配置されますが、幅や高さを指定することができます。

2. .dropbtn

background-color: #4CAF50;: ドロップボタンの背景色を緑色 (#4CAF50) に設定します。
color: white;: テキストの色を白に設定します。
padding: 10px;: テキストとボタンの周囲に10ピクセルの余白を設定します。
font-size: 16px;: テキストのフォントサイズを16ピクセルに設定します。
border: none;: ボーダーを設定せず、境界線を作成しません。
cursor: pointer;: マウスカーソルをポインターに変更し、クリック可能な要素であることを示します。

3. .dropdown-content

display: none;: ドロップダウンコンテンツを初めは非表示にします。
position: absolute;: 絶対位置に配置します。.dropdown 要素内での位置が基準となります。
background-color: #f9f9f9;: ドロップダウンコンテンツの背景色を淡い灰色 (#f9f9f9) に設定します。
min-width: 160px;: コンテンツの最小幅を160ピクセルに設定します。
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);: 影を追加して、コンテンツが浮き上がるように見せます。
z-index: 1;: レイヤーの重なり順序を設定します。

4. .dropdown-content a

padding: 12px 16px;: テキストとボタンの周囲に12ピクセルの上下余白と16ピクセルの左右余白を設定します。
text-decoration: none;: テキストの下線を非表示にします。
display: block;: リンクをブロック要素として表示し、横幅を親要素に合わせます。

5. .dropdown-content a:hover
ドロップダウンコンテンツ内のリンクがホバー（マウスが乗った状態）された際のスタイルを指定します。

background-color: #f1f1f1;: 背景色を薄い灰色 (#f1f1f1) に変更します。

6. .dropdown:hover .dropdown-content

.dropdown 要素がホバーされた際、その子要素である .dropdown-content を表示します。

7. .dropdown:hover .dropbtn

.dropdown 要素がホバーされた際、その子要素である .dropbtn のスタイルを変更します。背景色を濃い緑色に変更します (#3e8e41)。

このスタイルは、HTMLで.dropdownクラスを持つ要素を作成し、その中にドロップダウンボタン（.dropbtn）とそのコンテンツ（.dropdown-content）を配置することで、ドロップダウンメニューを実現します。また、ホバー時の挙動も設定されています。