スナップ位置のあるシート

地図の上に重なるシートを、ハンドルのドラッグで「閉じる／半分／全画面」の 3 段階に止める。離した位置と速さで最寄りの段へ吸い付き、全画面のときだけ中身がスクロールする。

ENGLISH

Sheet with Detents

約178行画面のかたち / モバイル・タッチ操作の一覧 →

プレビュー

ドラッグ

操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。

仕様書

向く場面: 地図の上に重ねる周辺情報のシート
閉じる／半分／全画面の 3 段で見せ方を変えたい面
閉じてもピークを残し存在を消したくないパネル
避ける場面: 4 段以上の止め位置
半分の状態で中身をスクロールさせる
本文でドラッグを受ける（タップと衝突）
構成要素: 地図
シート
ハンドル
ヘッダー（見出し＋段名）
スクロールする一覧
持っている状態: 通常
フォーカス
押下中
キーボード: Tab でハンドルへ、Enter／Space で半分→全画面→閉じるを巡回、↑↓で 1 段ずつ移動。全画面のときだけ一覧をスクロールできる
支援技術: section に aria-label。ハンドルは button で aria-label に現在の段名を含め、見出し横の段名は aria-live で読む。閉じた段は一覧を inert。地図は aria-hidden。reduced-motion で停止
動き: 段への吸い付き 320ms ease-out、ドラッグ中は追従。速度 0.6 を超えるフリックは距離に関係なく 1 段送る

デザインの要点

段は 3 つまで。閉じた状態でも見出しと 1 行が見える高さ（ピーク）を残し、シートの存在を消さない
離したときは最寄りの段へ吸い付く。ただし速いフリックは距離に関係なく次の段へ送ると、指の意図に合う
中身のスクロールは全画面のときだけ許す。半分の状態でスクロールできると、シートの引き上げと取り合いになる
ドラッグはハンドルとヘッダーで受ける。本文で受けるとリンクやボタンのタップと衝突する

プロのサイトでの実例

Apple Human Interface Guidelines別サイト ↗Sheets の detents（medium / large）として、複数の高さに止まるシートが標準化されている

実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。

実装メモ

段の位置は translateY の % で持ち、シート自体は常に全高（height:100%）です。閉じた段は「ピーク 72px」を残す計算にしているので、枠の高さが変わっても見出しが隠れません。実装では地図側の操作とシートのドラッグが競合しないよう、ドラッグの受け口をハンドル＋ヘッダー（.ssp-grab）に限定しています。

コード（コピーして使えます）

<div class="ssp-phone" id="ssp-phone">
  <div class="ssp-map" aria-hidden="true">
    <span class="ssp-pin"></span>
  </div>
  <section class="ssp-sheet" id="ssp-sheet" aria-label="周辺の店舗">
    <div class="ssp-grab" id="ssp-grab">
      <button class="ssp-handle" type="button" id="ssp-handle" aria-label="シートの高さを切り替える"></button>
      <div class="ssp-head">
        <h2 class="ssp-title">周辺の店舗</h2>
        <span class="ssp-meta" id="ssp-state" aria-live="polite">半分</span>
      </div>
    </div>
    <div class="ssp-content" id="ssp-content">
      <ul class="ssp-list">
        <li class="ssp-item"><span class="ssp-name">ミナト工房 港南店</span><span class="ssp-sub">徒歩 4 分 ・ 営業中 〜19:00</span></li>
        <li class="ssp-item"><span class="ssp-name">コーヒースタンド 灯</span><span class="ssp-sub">徒歩 6 分 ・ 営業中 〜21:00</span></li>
        <li class="ssp-item"><span class="ssp-name">本と道具 ひなた</span><span class="ssp-sub">徒歩 9 分 ・ 本日休業</span></li>
        <li class="ssp-item"><span class="ssp-name">港南市民ホール</span><span class="ssp-sub">徒歩 12 分 ・ 9:00〜22:00</span></li>
        <li class="ssp-item"><span class="ssp-name">中央公園 売店</span><span class="ssp-sub">徒歩 14 分 ・ 営業中 〜17:00</span></li>
        <li class="ssp-item"><span class="ssp-name">自転車修理 ふじ</span><span class="ssp-sub">徒歩 15 分 ・ 営業中 〜18:00</span></li>
        <li class="ssp-item"><span class="ssp-name">港南駅 観光案内所</span><span class="ssp-sub">徒歩 18 分 ・ 9:00〜17:00</span></li>
      </ul>
    </div>
  </section>
</div>