サムネ連動ギャラリー
下段のサムネをタップ/クリックするとメイン表示が切り替わる。選択中サムネをハイライトし、切替時にフェードイン。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 商品詳細の複数写真の切替
- 作品・部屋の写真を1枚ずつ見せる
- メイン＋サムネの定番ギャラリー
- 避ける場面
- 写真が10枚以上（サムネが並びきらない）
- 写真ごとに長い説明が要る
- メインを自動で切り替える
- 構成要素
- メイン表示
- メインのラベル
- サムネ列
- 選択中サムネ
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- キーボード
Tab で各サムネ（button）に到達・Enter/Space でメイン表示を切り替える
- 支援技術
サムネは button で aria-label「写真 X を表示」＋選択中は aria-pressed=true。メインのラベルは aria-live=polite で更新を通知。reduce でフェード停止
- 動き
メイン切替時 300ms ease で opacity 0.4→1・scale 0.97→1 のフェードイン。サムネはホバー 180ms で 1.08 倍。reduce では即時切替
デザインの要点
- 切替のフェードは animation を none にしてから 2 フレーム後に付け直す。同じ値の再代入では再生されない
- 選択中は枠色＋3px の外光＋1.06 倍の3つで示す。色だけだと写真の色に紛れ、拡大だけだとホバーと区別できない
- サムネは 48px 角で 8px 間隔。指で隣を押し間違えない最小の寸法
- サムネは role=list にせず素の button のまま。button に role=listitem を付けると押せる部品だと伝わらなくなる
コード（コピーして使えます）
<div class="tg-root">
<!-- メイン表示 -->
<div class="tg-main" id="tgMain">
<span class="tg-main-label" id="tgLabel" aria-live="polite">写真 A</span>
</div>
<!-- サムネ列 -->
<div class="tg-thumbs">
<button class="tg-thumb active" type="button" data-bg="linear-gradient(135deg,#2b50c7,#5a7bff)" data-label="写真 A" aria-label="写真 A を表示" aria-pressed="true"></button>
<button class="tg-thumb" type="button" data-bg="linear-gradient(135deg,#e86c4d,#f5a623)" data-label="写真 B" aria-label="写真 B を表示" aria-pressed="false"></button>
<button class="tg-thumb" type="button" data-bg="linear-gradient(135deg,#2dc793,#2b50c7)" data-label="写真 C" aria-label="写真 C を表示" aria-pressed="false"></button>
<button class="tg-thumb" type="button" data-bg="linear-gradient(135deg,#9b59b6,#e86c4d)" data-label="写真 D" aria-label="写真 D を表示" aria-pressed="false"></button>
</div>
</div>