横スクロールギャラリー
横並びカードを横スワイプで閲覧。scroll-snap-type: x で各カードにピタッと止まる。タッチ対応。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- 写真・カードを横に並べるギャラリー
- スマホで指送りさせたい一覧
- マウスでも掴んで横に送りたい場面
- 避ける場面
- 重要情報を横に隠す（見切れないと続きが分からない）
- カード内にリンク・ボタンが多い一覧（ドラッグと誤爆）
- 構成要素
- 前後の矢印ボタン
- ギャラリー
- カード
- 持っている状態
- 通常
- 押下中
- フォーカス
- キーボード
Tab で ←→ ボタンとギャラリー（tabindex=0）へ。ボタンの Enter／Space で 1 枚送り、ギャラリーにフォーカスして ←→ でも送れる
- 支援技術
カードは div で番号の文字のみ。矢印は aria-label 付きの button で「スワイプ」の文字を併記。ギャラリーは role=group。reduced-motion で矢印の揺れと初回のぞき見を止め、ボタン送りも即時
- 動き
矢印の揺れ 1.4s ease-in-out 無限、初回に 36px のぞき見て戻る。スナップはネイティブ、ドラッグ中は snap を切って追従
デザインの要点
- カード幅は 100% − 48px。次のカードの端が 24px ずつ見えることが「まだ続く」の手がかりになる（スクロールバーは隠す）
- 初回だけ 36px のぞき見て 650ms 後に戻す。mandatory スナップは瞬間移動だと最寄りへ戻されるので smooth で行って戻る
- マウスのドラッグ中は scroll-snap-type: none にする。付けたままだと指先が吸着に負けて追従しない
- ドラッグ直後の click は capture で止める。3px 以上動いたらクリックでないと判定し、カード内リンクの誤爆を防ぐ
コード（コピーして使えます）
<p class="hint"><button class="hint-arrow" id="hsPrev" type="button" aria-label="前のカード">←</button> スワイプ <button class="hint-arrow" id="hsNext" type="button" aria-label="次のカード">→</button></p>
<div class="gallery" tabindex="0" role="group" aria-label="カードのギャラリー">
<div class="card" style="background:#2b50c7">01</div>
<div class="card" style="background:#1e3fa0">02</div>
<div class="card" style="background:#3b63d8">03</div>
<div class="card" style="background:#2b50c7">04</div>
<div class="card" style="background:#1e3fa0">05</div>
</div>