一括選択
行チェックボックスと「全選択」で複数行を選び、1件以上選択すると削除・複製の一括操作バーがスライドインする。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 一覧から複数行を選んで削除・複製する管理画面
- 全選択と部分選択を区別したいテーブル
- 選んだ後の操作を 1 か所にまとめたい業務 UI
- 避ける場面
- 行ごとの操作が主で複数選択が稀な一覧
- 取り消せない削除を確認なしで実行する場面
- 構成要素
- 全選択チェック
- 行チェック
- 状態バッジ
- 一括操作バー
- 件数表示
- 削除・複製ボタン
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab で全選択→各行チェック→（選択中のみ）バーの削除／複製へ。Space で切替、Enter／Space で実行。隠れたバーは inert で Tab から外れる
- 支援技術
チェックは 24px の当たり判定と「〜を選択」の aria-label。バーは role=toolbar＋aria-label で、閉じている間は inert＋visibility:hidden。部分選択は indeterminate。件数は aria-live=polite。reduced-motion で遷移停止
- 動き
選択が 1 件以上でバーが下から 220ms でせり上がる。行背景 120ms
目的確かめる
デザインの要点
- 操作バーは選択が 1 件以上のときだけ出す。常設すると「何を消すのか」が無い状態で削除が押せてしまう
- 隠したバーは transform／opacity だけでなく inert と visibility:hidden も付ける。見えないボタンに Tab が入る
- 全選択は checked と indeterminate の 3 状態にする。一部だけ選んだときに「全選択」が空のままだと嘘になる
- チェックは 14px の見た目のまま 24px の当たり判定を取る（appearance:none＋::before）。行の高さは変えない
コード（コピーして使えます）
<div class="bs-wrap">
<div class="bs-table-wrap">
<table class="bs-table">
<thead>
<tr>
<th class="bs-th-check">
<input type="checkbox" id="bs-all" class="bs-checkbox" aria-label="全選択" />
</th>
<th>タスク名</th>
<th>担当</th>
<th>状態</th>
</tr>
</thead>
<tbody id="bs-tbody">
<tr data-row="1">
<td><input type="checkbox" class="bs-checkbox bs-row-cb" aria-label="ワイヤーフレームを選択" /></td>
<td>ワイヤーフレーム</td>
<td>田中</td>
<td><span class="bs-badge wip">進行中</span></td>
</tr>
<tr data-row="2">
<td><input type="checkbox" class="bs-checkbox bs-row-cb" aria-label="インタビューを選択" /></td>
<td>インタビュー</td>
<td>鈴木</td>
<td><span class="bs-badge done">完了</span></td>
</tr>
<tr data-row="3">
<td><input type="checkbox" class="bs-checkbox bs-row-cb" aria-label="プロト検証を選択" /></td>
<td>プロト検証</td>
<td>佐藤</td>
<td><span class="bs-badge todo">未着手</span></td>
</tr>
<tr data-row="4">
<td><input type="checkbox" class="bs-checkbox bs-row-cb" aria-label="レビューを選択" /></td>
<td>レビュー</td>
<td>山田</td>
<td><span class="bs-badge todo">未着手</span></td>
</tr>
</tbody>
</table>
</div>
<div class="bs-bar hidden" id="bs-bar" role="toolbar" aria-label="一括操作" inert>
<span class="bs-bar-count" id="bs-bar-count" aria-live="polite">0件選択中</span>
<div class="bs-bar-actions">
<button class="bs-bar-btn danger" id="bs-delete-btn">削除</button>
<button class="bs-bar-btn" id="bs-dup-btn">複製</button>
</div>
</div>
</div>