テーブル・一覧コード生成用
まとめて選択できる表
チェックした行に、一括で操作できる。
用途・説明
各行のチェックボックスで複数の行を選び、まとめて削除や書き出しができる表を作成します。選ぶと、表の上に操作のバーが現れます。見出しのチェックボックスで、すべての行を一度に選べます。ファイルやメールの一覧に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[表の内容]- 見出しの行と、5〜8行のデータ
[一括でできる操作]- 例：書き出す、移動、削除
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「まとめて選択できる表」を実装してください。 ## 表示内容 - 表： [表の内容] - 各行の左端にチェックボックス。見出しの行にも、全選択のチェックボックス - 一括操作のバー：選んだ件数、[一括でできる操作]、「選択を解除」 ## レイアウト - チェックボックスの列は幅 48px、中央揃え - 一括操作のバーは、1件以上選んだときだけ、表のすぐ上に表示する - バーが出ても、表の位置が動かないようにする（あらかじめ高さを確保するか、見出しの行に重ねる） ## デザイン - チェックボックス：18px、角丸 4px、枠線 1.5px solid #CBD5E1。チェック時は背景 #1463F0・白いチェックマーク - 選んだ行：背景は #1463F0 の9%の淡い色 - 一括操作のバー：背景 #1463F0、角丸 8px、padding 8px 16px、文字 #FFFFFF・14px - バーのなかのボタン：背景 rgba(255,255,255,0.2)、角丸 999px、padding 4px 14px、文字 #FFFFFF・13px・font-weight 700 - 表：外枠 1px solid #E2E8F0、角丸 10px。見出しの行は背景 #F7F9FC ## 動作 - 見出しのチェックボックス：すべて選ぶ／すべて外す。一部だけ選ばれているときは、横線（−）の状態にする - Shift キーを押しながらクリックすると、あいだの行をまとめて選べる - 行のどこを押しても選べるようにする場合は、リンクやボタンを押したときに選択が切り替わらないようにする - 削除など取り消せない操作は、実行の前に件数つきで確認する - 操作が終わったら、選択を解除する ## アクセシビリティ - チェックボックスは input type="checkbox"。それぞれに aria-label（例：「提案書.pdf を選択」）を付ける - 一部だけ選ばれている状態は、indeterminate プロパティで表す - 選んだ件数を aria-live="polite" で伝える - 一括操作のバーは role="toolbar" と aria-label を付ける - タップ領域は 44px 以上 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。