パーツ番号 11-04-09 ・ CSSのみ

ショートカット案内

⌘Kなどのキーを装飾キー風に表示する使い方ヒント一覧。管理画面や会員サイトの操作効率を伝えられます。

css

プレビュー

ソースコード

HTML

<div class="d11-04-09-card">
          <h4 class="d11-04-09-title">キーボードショートカット</h4>
          <ul class="d11-04-09-list">
            <li><span class="d11-04-09-desc">検索を開く</span><span class="d11-04-09-keys"><kbd>⌘</kbd><kbd>K</kbd></span></li>
            <li><span class="d11-04-09-desc">新規投稿</span><span class="d11-04-09-keys"><kbd>⌘</kbd><kbd>N</kbd></span></li>
            <li><span class="d11-04-09-desc">保存</span><span class="d11-04-09-keys"><kbd>⌘</kbd><kbd>S</kbd></span></li>
            <li><span class="d11-04-09-desc">ヘルプ</span><span class="d11-04-09-keys"><kbd>?</kbd></span></li>
          </ul>
        </div>

CSS

.d11-04-09{background:#20242e}
        .d11-04-09 .d11-04-09-card{width:100%;max-width:250px;background:#2b303c;border-radius:14px;padding:18px 20px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
        .d11-04-09 .d11-04-09-title{font-size:13px;color:#c9d0de;margin-bottom:14px;letter-spacing:.03em}
        .d11-04-09 .d11-04-09-list{list-style:none}
        .d11-04-09 .d11-04-09-list li{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
        .d11-04-09 .d11-04-09-list li:last-child{border-bottom:none}
        .d11-04-09 .d11-04-09-desc{font-size:12px;color:#9aa3b5}
        .d11-04-09 .d11-04-09-keys{display:flex;gap:4px}
        .d11-04-09 kbd{font-family:inherit;font-size:11px;color:#eef1f8;background:linear-gradient(#4a5162,#3a4050);border:1px solid #565d70;border-bottom-width:2px;border-radius:6px;padding:3px 8px;min-width:22px;text-align:center;box-shadow:0 1px 0 rgba(0,0,0,.3)}

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