ブログなどでキーボードショートカットの解説する際、『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の単語登録に入れておくと良さそうです。

Ubuntu キーボードの言語切替方法(ショートカット設定)
以前に外国語でキーボード入力するために、他の言語を追加設定する方法について、取り上げてみました。Ubuntu 他言語でキーボード入力追加設定した言語に、ショートカットキーで切り…