ブログなどで、キーボードショートカットの解説表示を見栄え良くする

ブログなどでキーボードショートカットの解説する際、『command』や『shift』などが頻繁に出てきます。

これらの表示にCSSを適用して、見栄え良く、なおかつわかりやすくします。

⌘ command+shift+3
↑こんなやつ。

タグとCSS

文中に出てくるので基本的にはインライン要素が良さそうです。
<span>要素でも良いですが、今回は<kbd>を利用。

<kbd>要素は、keyboardの略で、マークアップされた部分が、キーボードなどにより入力される文字である、的な意味合いで利用します。
デフォルトスタイルとしては、等幅フォントで表示。

CSSの記述

kbd {
	color: #333;
	border: solid 1px #999;
	border-width: 1px 2px 2px 1px;
	margin: 0 3px;
	padding: 1px 5px;
}

HTMLの記述

<p>Macでスクリーンショットの撮り方は、<kbd>⌘ command</kbd>+<kbd>shift</kbd>+<kbd>3</kbd>です。</p>

表示結果

Macでスクリーンショットの撮り方は、⌘ command+shift+3です。

おまけ、⌘ コマンドキー（ command ）の記号の出し方

コマンドキー（ command ）の記号はFinderの『編集』メニューから『特殊文字…』を選択。

その後、記号の中から該当のマークを選びます。頻繁に使う場合、IMEの単語登録に入れておくと良さそうです。