テーブル・一覧コード生成用
並び替えできる表
見出しを押すと、その列で昇順・降順に並ぶ。
用途・説明
列の見出しを押すと、その列の値で並び替えられる表を作成します。押すたびに昇順・降順が切り替わり、いまどの列で並んでいるかを矢印で示します。文字・数字・日付を正しい順に並べる指定を含めています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[表の内容]- 見出しの行と、5〜10行のデータ。列ごとの種類（文字・数字・日付）も
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「並び替えできる表」を実装してください。
## 表示内容
[表の内容]
## デザイン
- 外枠：1px solid #E2E8F0、角丸 10px
- 見出しの行：背景 #F7F9FC、文字 13px・font-weight 700・色 #5F6D84
- 並び替えできる見出しの右に、上下の矢印（⇅、色 #8A96AA）を表示する
- 並んでいる列の見出し：文字 #1463F0。矢印を、昇順は ▲、降順は ▼ に変える
- 並んでいる列のセル：背景 #F7F9FC
- データのセル：14px、色 #1B2A44、padding 12px 16px、下に 1px solid #EDF1F7
- 見出しの hover：背景 #EDF1F7
## 動作
- 見出しを押すと、その列の昇順で並べる。もう一度押すと降順、さらに押すと元の順に戻す
- 別の列を押したら、その列の昇順から始める
- 列の種類に応じて、正しく並べる
- 文字：日本語の順（Intl.Collator("ja")）。ひらがな・カタカナ・漢字が混ざっても自然な順に
- 数字：カンマや「円」「%」を取り除いてから、数として比べる
- 日付：日付として比べる
- 空の値は、昇順でも降順でも最後に置く
- 同じ値の行は、並び替える前の順を保つ
## アクセシビリティ
- 見出しのセル（th）のなかに button 要素を置き、そこを押して並び替える
- 並んでいる列の th に aria-sort="ascending" / "descending" を設定する。それ以外の列は付けない
- 並び替えたら、「登録日の昇順で並び替えました」を aria-live="polite" で伝える
- 矢印は aria-hidden="true"
- 色だけでなく、矢印の向きでも状態が分かるようにする
## 出力形式
- [使用技術]のコードを1つ出力
- 並び替えの関数を、表の見た目から切り離して書く使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。