SaaS・業務
コマンドパレット
ボタンまたは ⌘K／Ctrl+K でコマンド検索オーバーレイを開き、入力で絞り込み、↑↓キーまたはタップで実行できる。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
プレビューは枠内に収めるため、オーバーレイを position:absolute（ステージ基準）で実装しています。実際のページで画面全体に重ねるときは position:fixed に変え、body 直下など高い階層へ置いてください。
コード（コピーして使えます）
<div class="cp-wrap" id="cp-wrap">
<div class="cp-app">
<p class="cp-app-title">ダッシュボード</p>
<p class="cp-app-sub">⌘K でコマンドを開く</p>
<button class="cp-open-btn" id="cp-open-btn">コマンドを開く</button>
</div>
<div class="cp-overlay hidden" id="cp-overlay" role="dialog" aria-modal="true" aria-label="コマンドパレット">
<div class="cp-palette">
<div class="cp-search-row">
<span class="cp-search-icon">⌕</span>
<input class="cp-input" id="cp-input" type="text" placeholder="コマンドを検索…" autocomplete="off" />
<kbd class="cp-esc">Esc</kbd>
</div>
<ul class="cp-list" id="cp-list" role="listbox"></ul>
</div>
</div>
</div>