検索と絞り込みができる表

選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。

書き換える項目

プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。

[表の内容]

見出しの行と、10行程度のデータ

[検索する列]

例：名前、メールアドレス

[絞り込みの項目]

例：ステータス（有効／停止中）、部署

[使用技術]

例：HTML/CSS + JavaScript、React + Tailwind CSS

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「検索と絞り込みができる表」を実装してください。

## 表示内容
- 表：
[表の内容]
- 検索欄（検索する列：[検索する列]）
- 絞り込みのメニュー：[絞り込みの項目]
- 件数の表示（例：24件中 8件を表示）

## レイアウト
- 表の上に、左から 検索欄 → 絞り込みのメニュー → 件数 を横に並べる。表との間隔 12px
- スマホでは、検索欄を1段目、絞り込みと件数を2段目にする

## デザイン
- 検索欄：高さ 40px、枠線 1px solid #DCE4F0、角丸 8px、文字 14px。左に虫めがねのアイコン、入力があるときは右に消去ボタン（✕）
- フォーカス時：枠線 #1463F0、外側に淡い輪（3px、#1463F0 の15%）
- 絞り込みのメニュー：高さ 40px、枠線 1px solid #DCE4F0、角丸 8px、文字 14px
- 条件を選んでいるメニュー：枠線と文字を #1463F0 にする
- 件数：13px、色 #5F6D84
- 表：外枠 1px solid #E2E8F0、角丸 10px。見出しの行は背景 #F7F9FC
- 検索の文字と一致した部分を、淡い黄色（#FFE38A）で強調する

## 動作
- 入力するたびに絞り込む（入力が止まってから 0.2秒後に実行する）
- ひらがな・カタカナ、全角・半角、大文字・小文字の違いを無視して探す
- 検索と絞り込みは、両方の条件に合う行だけを表示する
- 条件に合う行がないときは、表のなかに「条件に合うデータがありません」と「条件をクリア」のボタンを表示する
- 条件を URL のクエリに反映し、再読み込みしても保たれるようにする

## アクセシビリティ
- 検索欄は type="search"、label を付ける（見た目で隠してもよい）
- 絞り込みのメニューは select 要素、または同等の操作ができる部品にする
- 件数が変わったら、aria-live="polite" で伝える
- 消去ボタンに aria-label="検索の文字を消す"

## 出力形式
- [使用技術]のコードを1つ出力