キーボードショートカット表示
キーボードショートカット表示は、ヘルプ画面やコマンドパレットで「検索を開く ⌘ K」のようにキーの組み合わせを見せる UI です。各キーは kbd タグで表現し、 border-bottom-width:2px で下辺を少し厚くすることで、物理キーのへこみのような立体感を出しています。
解説
キーボードショートカット表示は、ヘルプ画面やコマンドパレットで「検索を開く ⌘ K」のようにキーの組み合わせを見せる UI です。各キーは kbd タグで表現し、border-bottom-width:2px で下辺を少し厚くすることで、物理キーのへこみのような立体感を出しています。等幅フォント SF Mono 系を使い、淡い背景と枠線でキーらしい見た目に仕上げています。1行ごとに操作名とキーを flex で左右に振り分け、操作名側を flex:1 で伸ばしています。
使う場面
- アプリのショートカット一覧やヘルプモーダルで
- コマンドパレットの各項目の右端にキーを併記したいとき
- ドキュメントで操作方法をキー表記で説明したいとき
キーは kbd 要素を増やすだけで「⌘ Shift P」のような複数キーの組み合わせも表現できます。JavaScript は不要で、見た目だけの表示部品です。Mac の ⌘ と Windows の Ctrl を出し分けたい場合は、利用者の環境を判定して表記を切り替えると親切です。キーの背景色や枠線色を変えると、ダークテーマにも馴染ませられます。
よくある質問
3つ以上のキーの組み合わせも表示できますか。
できます。1つの行に kbd 要素を必要な数だけ並べてください。⌘ Shift P のように3つでも、横に等間隔で並びます。間隔は .ks-row の gap で調整できます。
Mac と Windows でキー表記を変えたいです。
この部品自体は表記を固定で出します。出し分けたい場合は、利用者の OS を判定して ⌘ を Ctrl に置き換えるなどの処理を別途加えると、環境に合った表記になります。