記入日:2023-10-23 編集日:2023-10-23
JavaScriptでプロダウンメニューを作る基本形の解説をしてみようと思います。
この記事を読むと(約5分)
JavaScriptでプロダウンメニューを作る基本形をイメージできます。
プルダウンメニュー(またはドロップダウンメニュー)を作成するためには、 HTML、CSS、そしてJavaScriptを組み合わせます。以下に基礎からの手順を説明します。
1. HTMLの作成:
まず、HTMLで基本的な構造を作成します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>プルダウンメニューの作成</title> <link rel="stylesheet" href="styles.css"> <!-- スタイルシートのリンク --> </head> <body> <div class="dropdown"> <button class="dropbtn">選択してください</button> <div class="dropdown-content"> <a href="#">オプション1</a> <a href="#">オプション2</a> <a href="#">オプション3</a> </div> </div> <script src="script.js"></script> <!-- JavaScriptファイルのリンク --> </body> </html>
2. 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;}
3. JavaScriptで動作を追加:
JavaScriptを使って、メニューの動作を追加します。
// script.js document.addEventListener("DOMContentLoaded", function() { let dropdowns = document.getElementsByClassName("dropdown"); let i; for (i = 0; i < dropdowns.length; i++) { let openDropdown = dropdowns[i]; openDropdown.addEventListener("click", function() { this.classList.toggle("active"); let dropdownContent = this.getElementsByClassName("dropdown-content")[0]; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } });
以上で、基本的なプルダウンメニューが作成されました。これはクリックするとオプションが表示され、再度クリックすると非表示になります。
SQLの使いどころ
サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。
SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。
また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。
KK
機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。