ブログなどでキーボードショートカットの解説する際、『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 他言語でキーボード入力追加設定した言語に、ショートカットキーで切り…