SaaS・業務
ショートカット一覧
「?」ボタン（または ? キー）でキーボードショートカット一覧のオーバーレイを表示。kbd 風のキー表示で見やすく整理する。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
プレビューは枠内に収めるため、オーバーレイを position:absolute（ステージ基準）で実装しています。実際のページで画面全体に重ねるときは position:fixed に変え、body 直下など高い階層へ置いてください。
コード（コピーして使えます）
<div class="sh-stage" id="sh-stage">
<div class="sh-app">
<p class="sh-app-title">エディタ</p>
<p class="sh-app-hint">? キーまたはボタンでショートカット一覧を表示</p>
<button class="sh-open-btn" id="sh-open-btn" aria-label="ショートカット一覧を開く">? ショートカット</button>
</div>
<div class="sh-overlay hidden" id="sh-overlay" role="dialog" aria-modal="true" aria-label="キーボードショートカット">
<div class="sh-panel">
<div class="sh-panel-header">
<span class="sh-panel-title">キーボードショートカット</span>
<button class="sh-close-btn" id="sh-close-btn" aria-label="閉じる">✕</button>
</div>
<div class="sh-body" id="sh-body"></div>
</div>
</div>
</div>