まず、Tailwind CSSをプロジェクトに追加する必要があります。Tailwind CSSは、HTML要素にクラスを追加することでスタイルを適用することができます。以下の手順に従って、ドロップダウンボタンを作成しましょう。
- HTMLファイルを作成し、必要なスクリプトやスタイルシートを読み込みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<title>ドロップダウンボタン</title>
</head>
<body>
<!-- ドロップダウンボタンのコンテナ -->
<div class="relative inline-block text-left">
<!-- ドロップダウンボタン -->
<button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="dropdown-button" aria-haspopup="true" aria-expanded="false">
ドロップダウン
<!-- ドロップダウンアイコン -->
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm0 14a1 1 0 01-.707-.293l-3-3a1 1 0 011.414-1.414L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3A1 1 0 0110 17z" clip-rule="evenodd" />
</svg>
</button>
<!-- ドロップダウンメニュー -->
<div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden" id="dropdown-menu" aria-orientation="vertical" aria-labelledby="dropdown-button" role="menu">
<div class="py-1" role="none">
<!-- ドロップダウンメニューアイテム -->
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">アイテム1</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">アイテム2</a>
<!-- 追加のメニューアイテムをここに追加 -->
</div>
</div>
</div>
<script>
// ドロップダウンボタンのクリックイベント
document.getElementById('dropdown-button').addEventListener('click',function() {
// ドロップダウンメニューの表示/非表示を切り替える
var dropdownMenu = document.getElementById('dropdown-menu');
dropdownMenu.classList.toggle('hidden');
});
</script>
</body>
</html>上記のコードでは、Tailwind CSSのクラスを使用してドロップダウンボタンとメニューをスタイル化しています。ドロップダウンボタンをクリックすると、JavaScriptのイベントリスナーがメニューの表示/非表示を切り替えます。
このコード例を使用すると、シンプルで簡単な方法でTailwind CSSを使用したドロップダウンボタンを作成できます。必要に応じて、ドロップダウンメニューにさらなるアイテムを追加することもできます。
以上が、Tailwind CSSを使用したドロップダウンボタンの作成方法です。ぜひお試しください！