ボトムシート Bottom Sheet

画面下部から出現するパネル。詳細情報や補足UIの表示に使用。ドラッグで高さ調整が可能。

使用場面: 地図アプリの施設詳細や、モバイルでの補足情報表示 採用例: Google Maps, Apple Maps

ライブデモ

東京タワー

★★★★★ 4.2 (12,345件)

東京都港区芝公園4丁目2-8

営業中 — 22:00まで

ソースコード

<div class="demo-bsheet-wrapper">
  <div class="demo-bsheet-map">
    <div class="demo-bsheet-map-pin">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="var(--ui-primary)" stroke="none"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/></svg>
    </div>
    <button class="demo-bsheet-open-btn">場所の詳細を見る</button>
  </div>
  <div class="demo-bsheet-overlay"></div>
  <div class="demo-bsheet">
    <div class="demo-bsheet-handle"></div>
    <div class="demo-bsheet-header">
      <h3 class="demo-bsheet-title">東京タワー</h3>
      <div class="demo-bsheet-rating">
        <span style="color:#f59e0b;">&#9733;&#9733;&#9733;&#9733;</span><span style="color:#d1d5db;">&#9733;</span>
        <span class="demo-bsheet-rating-text">4.2 (12,345件)</span>
      </div>
    </div>
    <div class="demo-bsheet-body">
      <div class="demo-bsheet-info-row">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
        東京都港区芝公園4丁目2-8
      </div>
      <div class="demo-bsheet-info-row">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        営業中 — 22:00まで
      </div>
    </div>
  </div>
</div>

.demo-bsheet-wrapper { position: relative; overflow: hidden; min-height: 400px; min-height: 400px; position: relative; position: relative; height: 320px; overflow: visible; border: 1px solid #e5e7eb; border-radius: 12px; }
.demo-bsheet-map {
  height: 100%; background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 50%, #c7d2fe 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.demo-bsheet-map-pin { animation: demo-bsheet-bounce 2s infinite; }
@keyframes demo-bsheet-bounce { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.demo-bsheet-open-btn {
  padding: 8px 16px; border: none; border-radius: 8px;
  background: var(--ui-primary); color: #fff; font-size: 13px;
  cursor: pointer; font-weight: 600; transition: opacity 0.2s;
}
.demo-bsheet-open-btn:hover { opacity: 0.85; }
.demo-bsheet-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 5;
  position: absolute; inset: 0; background: rgba(0,0,0,0.3);
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.demo-bsheet-overlay.active { opacity: 1; visibility: visible; }
.demo-bsheet { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; background: var(--ui-bg-alt, #fff); border-radius: 16px 16px 0 0; visibility: hidden; transform: translateY(100%); transition: transform 0.3s ease, visibility 0.3s; position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; visibility: hidden; transform: translateY(100%); transition: transform 0.3s ease, visibility 0.3s;
  position: absolute; bottom: 0; left: 0; right: 0;
  background: #fff; border-radius: 16px 16px 0 0;
  padding: 8px 16px 20px; transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.32,0.72,0,1);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}

.demo-bsheet-handle { width: 36px; height: 4px; background: #d1d5db; border-radius: 2px; margin: 0 auto 14px; cursor: grab; }
.demo-bsheet-title { margin: 0; font-size: 18px; color: #111; }
.demo-bsheet-rating { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 14px; }
.demo-bsheet-rating-text { font-size: 12px; color: #999; }
.demo-bsheet-body { margin-top: 14px; }
.demo-bsheet-info-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  font-size: 13px; color: #555; border-top: 1px solid #f3f4f6;
}
.demo-bsheet-info-row svg { color: var(--ui-primary); flex-shrink: 0; }
.demo-bsheet.open { visibility: visible !important; transform: translateY(0) !important; }
.demo-bsheet-overlay.active { opacity: 1 !important; visibility: visible !important; }

(function(){
  var btn = document.querySelector('.demo-bsheet-open-btn');
  var sheet = document.querySelector('.demo-bsheet');
  var overlay = document.querySelector('.demo-bsheet-overlay');
  var wrapper = document.querySelector('.demo-bsheet-wrapper');
  if(!btn || !sheet) return;
  function open(){
    sheet.classList.add('open');
    if(overlay) overlay.classList.add('active');
  }
  function close(){
    sheet.classList.remove('open');
    if(overlay) overlay.classList.remove('active');
  }
  btn.addEventListener('click', open);
  if(overlay) overlay.addEventListener('click', close);
  // ラッパー内のシート外クリックでも閉じる
  if(wrapper) {
    wrapper.addEventListener('click', function(e){
      if(!sheet.contains(e.target) && e.target !== btn && sheet.classList.contains('open')){
        close();
      }
    });
  }
})();

AIプロンプト

ボトムシートをHTML/CSS/JSで作ってください。ボタンを押すと画面下部からパネルがスライドインし、詳細情報を表示します。

以下の仕様でボトムシートを実装してください。
- 地図アプリ風のレイアウト
- ドラッグハンドルで高さ調整（半分・フル・閉じる）
- 施設情報（名前、評価、住所、営業時間）
- プライマリカラー: #2563eb
- オーバーレイ背景付き
- スムーズなスプリングアニメーション

マルチスナップポイント対応のボトムシートを実装してください。
- 3段階のスナップポイント（peek / half / full）
- PointerEventsでドラッグ操作
- velocity-basedのスナップ判定
- body スクロールロックとシート内スクロール共存
- バックドロップフィルター（ブラー）
- キーボード表示時の自動リサイズ
- アクセシビリティ（role="dialog", aria-modal, ESCで閉じる）

← カタログに戻る