パーツ番号 11-07-05 ・ CSSのみ

ショートカットキー案内一覧(静止)

主要なキー操作をまとめた一覧パネル。管理画面のヘルプメニューやオンボーディング資料に利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-07-05-box">
          <p class="d11-07-05-h">ショートカット</p>
          <div class="d11-07-05-row"><span class="d11-07-05-k">Ctrl</span><span class="d11-07-05-p">+</span><span class="d11-07-05-k">S</span><span class="d11-07-05-desc">保存</span></div>
          <div class="d11-07-05-row"><span class="d11-07-05-k">Ctrl</span><span class="d11-07-05-p">+</span><span class="d11-07-05-k">K</span><span class="d11-07-05-desc">検索を開く</span></div>
          <div class="d11-07-05-row"><span class="d11-07-05-k">Esc</span><span class="d11-07-05-desc">閉じる</span></div>
        </div>

CSS

.d11-07-05-box{ width:100%; max-width:220px; background:#0f172a; border-radius:12px; padding:14px 16px; }
        .d11-07-05-h{ margin:0 0 10px; font-size:11px; letter-spacing:.06em; color:#94a3b8; text-transform:uppercase; }
        .d11-07-05-row{ display:flex; align-items:center; gap:6px; padding:5px 0; }
        .d11-07-05-k{ font-family:monospace; font-size:11px; background:#1e293b; color:#e2e8f0; border:1px solid #334155; border-radius:5px; padding:2px 7px; }
        .d11-07-05-p{ color:#64748b; font-size:11px; }
        .d11-07-05-desc{ margin-left:auto; font-size:11.5px; color:#cbd5e1; }

クラス名 .d11-07-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。