Qiita、ブログなどの技術系記事やGitHubなどでドキュメントを書くとき、しばしばショートカットキーを書く必要に迫られます。
そんなとき、皆さんはどのようにマークアップしていますか？
直で書いたり、<pre>で囲ったり、<em>を使う人もいるかもしれません。
僕は最近まで<pre>でしたが、ある日MDNで<kbd>要素（以下<kbd>）というものを見つけました。
同記事には
キーボードインプット要素（
<kbd>）はコンピューターへのユーザーの入力コードを表します。要素名はキーボードの略字ですが、音声入力や手書き入力など他の入力方法も含みます。多くのデフォルトスタイルは、等幅フォントのインラインで表示するものとなっています。
とあります。
Qiitaでは（というより多くのMarkdown記法では）<kbd>はサポートされていませんのでHTMLで書く必要があります。
例：
<kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>を押下してください。
Ctrl+Cを押下してください。
これを見てあれ？と思った方もいるでしょう。<kbd>が無駄にネストされているように見えるのです。
一見これは奇妙ですが、
- 外側の
<kbd>でキーボード入力であることを示す - 内側の
<kbd>で押されたキー自体を示す
ということなのです。
QiitaのCSSもそれに合わせていい感じになっています。
また、GitHubでは
のように見えます。
ちなみにこの「押下」ですが、こちらの記事に面白いことが書かれているので、見てみてはいかがでしょうか？
また、<kbd>は
<kbd>cmd</kbd>を入力し、OKボタンをクリックします。
cmdを入力し、OKボタンをクリックします。
のように、単なるユーザーが入力した文字にも使えます。
メニュー項目やシステムによってエコーされる場合などにも使える<kbd>ですが、ここはショートカットキーの説明の記事なので割愛します。参考の記事にいろいろ書いてあります。
まとめ
- キーボードショートカットには
<kbd>を使おう！ - キーを表す場合は
<kbd>をネストしよう！