このWikiHowでは、HTMLとCSSコーディングを使ってドロップダウンメニューを作成する方法を説明します。ドロップダウンメニューが表示されると、ユーザーはその中のオプションをクリックして、そのオプションのウェブページにアクセスすることができます。
1
HTMLテキストエディタを開きます。メモ帳やテキストエディットのようなシンプルなテキストエディタを使うこともできますし、.NETのような高度なテキストエディタを使うこともできます。
- メモ帳++を使う場合は、ウィンドウ上部の言語メニューの「H」セクションからHTMLを選択してから進めてください。
2
ドキュメントヘッダーを入力します。これは、ドキュメントの残りの部分で使用されるコードタイプを決定するコードです：
<!DOCTYPE html> <html> <head> <style
3
ドロップダウンメニューを作成します。ドロップダウンメニューのサイズと色を決定するために、次のコードを入力します。「#」を使用したい数字に置き換えてください（数字が大きいほど、ドロップダウンメニューは大きくなります）。background-color "と "color "の値は、好きな色（またはHTMLのカラーコード）に置き換えることもできます：
.dropbtn { background-color: black; color: white; padding：#font-size：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：{ display: none; position: absolute; background-color: lightgrey; min-width: #px; z-index：1; }
6
ドロップダウンメニューの内容に詳細を追加します。次のコードでは、ドロップダウンメニューのテキストの色とドロップダウンメニューのボタンの大きさを指定しています。ボタンのサイズは、"#"をお好みのピクセル数に置き換えてください：
.dropdown-content a { color: black; padding：padding: #px #px; text-decoration: none; display: block; }.
7
ドロップダウンメニューのホバー動作を編集します。ドロップダウンメニューのボタンにマウスを合わせたとき、いくつかの色を変更する必要があります。最初の "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 > <button >名前</button> <div > <button >名前</button
10
ドロップダウンメニューのリンクを追加します。ドロップダウンメニューの各項目は、あなたのウェブサイトのページであれ、外部のウェブサイトであれ、何かにリンクする必要があります。以下のコードを入力することで、ドロップダウンメニューに項目を追加することができます。https://www.website.com をリンクのアドレス（引用符はそのまま）に、"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
ドロップダウンボックスのコードを確認してください。コードは次のようになるはずです：
<!DOCTYPE html> <html> <head> <style> .dropbtn { background-color: black; color: white; padding：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: gray;} </style> </head> <div > <button >ソーシャルメディア</button> <div > <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>
コメント
最新を表示する
NG表示方式
NGID一覧