HTML の kbd 要素 - polamjaggy

キーボードインプット要素（<kbd>）はコンピューターへのユーザーの入力コードを表します。要素名はキーボードの略語ですが、音声入力や手書き入力などの他の入力方法も含みます。多くのデフォルトスタイルは、等幅フォントのインラインで表示するものとなっています。

kbd 要素 - HTML | MDN

とのこと。技術ブログみたいなやつだと、エントリ中でキーボードの操作とかショートカットキーを説明しがちなので、そういうときに使えて便利。

このような CSS を書くことで、

kbd {
  display: inline-block;
  padding: .2em .3em;
  margin: 0 .1em;
  line-height: 1em;
  background: rgba(233,233,233,.7);
  box-shadow: 0px 2px 0 #999;
  border-radius: 3px;
}

このような Markdown (というか HTML) が

- Windows で全選択するには <kbd>Ctrl+A</kbd> を押す
- macOS でアプリを終了するには <kbd>⌘Q</kbd> を打鍵
- Emacs を終了するには <kbd><kbd>C-x</kbd><kbd>C-c</kbd></kbd> を入力

こうなる *1。

Windows で全選択するには Ctrl+A を押す
macOS でアプリを終了するには ⌘Q を打鍵
Emacs を終了するには C-xC-c を入力

入れ子にしたときにどうするかというのは考慮の余地がありそうだけど、まあわからなくはないのでとりあえずこうしてある。

ちなみに、GitHub の Markdown とか、Qiita とかでも kbd 要素にそれっぽい CSS があたってるので便利。あと、Bootstrap 3 にも入ってる。

*1:はてなブログのカスタム CSS にこういうのを書いておくと便利