カードスタック
Tinder風の重なったカード。最前面をドラッグで左右にスワイプするか👍/👎ボタンで送れる。Pointer Events対応でPC/スマホ両対応。デモ用に5枚のカードを無限ループさせており、最後まで送ると先頭へ戻って繰り返します。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
仕様書
- 向く場面
- 好み・興味を1枚ずつ左右で振り分ける
- マッチング・レコメンドの選別
- 候補を順番に見せる軽い選択
- 避ける場面
- 取り消せない重要な判断（誤スワイプ）
- 一覧で比較して選ばせたい内容
- カードが3枚未満のデータ
- 構成要素
- カードの山
- 最前面カード
- LIKE/NOPE スタンプ
- スキップボタン
- いいねボタン
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- キーボード
Tab で👎／👍ボタンに到達・Enter/Space で送る。カードのドラッグはポインタ専用で、ボタンが代替経路
- 支援技術
ボタンは aria-label（スキップ／いいね）付き。送った結果は aria-live=polite の非表示テキストで「いいね: 寿司」と通知。スタンプは装飾。reduce で飛ばしを即時に
- 動き
飛ばし 380ms ease-in（260px 移動＋20°回転）・戻り 350ms オーバーシュート。ドラッグ位置から連続して飛ぶ。reduce では即時
デザインの要点
- 飛ばしのキーフレームは from を書かず、ドラッグ位置のインライン transform から続けて飛ばす。中央へ戻ってから飛ぶと二度動いて見える
- スワイプ判定は 55px、スタンプは 60px で満透明。判定より先にスタンプが出切ると「離せば飛ぶ」が指で分かる
- 山は3枚だけ描き、奥→手前の順に append する。nth-child で傾きを付けるので枚数と順序を固定する
- ドラッグの結果は目に見えるだけなので、aria-live の非表示テキストで「いいね: 寿司」と読み上げに乗せる
コード（コピーして使えます）
<div class="cs-wrap">
<div class="cs-stack" id="csStack"></div>
<div class="cs-btns">
<button class="cs-btn cs-btn--no" id="csBtnNo" type="button" aria-label="スキップ">👎</button>
<button class="cs-btn cs-btn--yes" id="csBtnYes" type="button" aria-label="いいね">👍</button>
</div>
<p class="cs-hint">ドラッグまたはボタンで操作</p>
<p class="cs-live" id="csLive" aria-live="polite"></p>
</div>