アクションシート Action Sheet
画面下部からスライドインするメニュー。モバイルで選択肢を提示する際に使用。
ライブデモ
操作を選択
ソースコード
<div class="demo-action-sheet-wrapper">
<button class="demo-action-sheet-trigger">アクションを表示</button>
<div class="demo-action-sheet-overlay"></div>
<div class="demo-action-sheet">
<div class="demo-action-sheet-handle"></div>
<div class="demo-action-sheet-title">操作を選択</div>
<button class="demo-action-sheet-item">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
共有する
</button>
<button class="demo-action-sheet-item">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
コピー
</button>
<button class="demo-action-sheet-item">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/></svg>
保存する
</button>
<button class="demo-action-sheet-item demo-action-sheet-danger">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-2 14H7L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>
削除する
</button>
<button class="demo-action-sheet-cancel">キャンセル</button>
</div>
</div>.demo-action-sheet-wrapper { position: relative; height: 360px; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 12px; background: #f9fafb; display: flex; align-items: flex-start; justify-content: center; padding-top: 24px; }
.demo-action-sheet-trigger {
padding: 10px 24px; border: none; border-radius: 8px;
background: var(--ui-primary); color: #fff; font-size: 14px;
cursor: pointer; font-weight: 600; transition: opacity 0.2s;
}
.demo-action-sheet-trigger:hover { opacity: 0.85; }
.demo-action-sheet-overlay {
position: absolute; inset: 0; background: rgba(0,0,0,0.4);
opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.demo-action-sheet-overlay.active { opacity: 1; pointer-events: auto; }
.demo-action-sheet { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; padding: 8px 16px 16px; transform: translateY(100%); visibility: hidden; transition: transform 0.35s cubic-bezier(0.32,0.72,0,1), visibility 0.35s; z-index: 10; }
.demo-action-sheet.open { transform: translateY(0); visibility: visible; }
.demo-action-sheet-handle {
width: 36px; height: 4px; background: #d1d5db; border-radius: 2px;
margin: 0 auto 12px;
}
.demo-action-sheet-title { font-size: 13px; color: #999; text-align: center; margin-bottom: 12px; }
.demo-action-sheet-item {
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 12px; border: none; background: none; font-size: 15px;
color: var(--ui-primary); cursor: pointer; border-radius: 8px;
transition: background 0.2s;
}
.demo-action-sheet-item:hover { background: color-mix(in srgb, var(--ui-primary) 8%, transparent); }
.demo-action-sheet-danger { color: #ef4444; }
.demo-action-sheet-danger:hover { background: rgba(239,68,68,0.08); }
.demo-action-sheet-cancel {
display: block; width: 100%; margin-top: 8px; padding: 12px;
border: none; background: #f3f4f6; border-radius: 10px;
font-size: 15px; font-weight: 600; color: #666; cursor: pointer;
transition: background 0.2s;
}
.demo-action-sheet-cancel:hover { background: #e5e7eb; }(function(){
var trigger = document.querySelector('.demo-action-sheet-trigger');
var sheet = document.querySelector('.demo-action-sheet');
var overlay = document.querySelector('.demo-action-sheet-overlay');
var cancel = document.querySelector('.demo-action-sheet-cancel');
function open() { sheet.classList.add('open'); overlay.classList.add('active'); }
function close() { sheet.classList.remove('open'); overlay.classList.remove('active'); }
trigger.addEventListener('click', open);
overlay.addEventListener('click', close);
cancel.addEventListener('click', close);
sheet.querySelectorAll('.demo-action-sheet-item').forEach(function(item){
item.addEventListener('click', close);
});
})();AIプロンプト
Basic
アクションシートをHTML/CSS/JSで作ってください。ボタンを押すと画面下部からメニューがスライドインし、共有・コピー・削除などの操作を選べます。
Custom
以下の仕様でアクションシートを実装してください。 - 画面下部からスライドインするアニメーション - 半透明オーバーレイ背景 - アイコン付きの操作項目（共有、コピー、保存、削除） - 削除は赤色で表示（危険な操作として区別） - キャンセルボタン付き - プライマリカラー: #2563eb - ドラッグで閉じるハンドル付き
Advanced
アクセシビリティ対応のアクションシートを実装してください。 - role="dialog" と aria-modal="true" を設定 - フォーカストラップ（シート内でTabキーが循環） - ESCキーでシートを閉じる - prefers-reduced-motion対応（アニメーション無効化） - タッチジェスチャー対応（下スワイプで閉じる） - body スクロールロック - 戻るボタンでシートを閉じる（History API）