こんにちは！ あますた(@amaguristar)です。

• 「Controlボタンなどをキーボードっぽく表示したい！」

そんな時ありませんか？ 専用のタグを使うと楽ですよ。

　

<kbd>タグを使う

<kbd>タグは、基本的にユーザーが入力する内容を示す際に使用します。

通常は、等幅フォントで表示されますが、cssを設定して見た目もよりキーボードらしく設定します。

kbd {
    margin: 0 0.5em; /* 左右にだけマージンを設定 */
    padding: 0.25em 0.625em; /* 上下に1/4文字分,左右に1/2より少し大きいパディングを設定 */
    border: 1px solid #d1d1d1; /* 周りを囲んで */
    border-radius: 5px; /* 角を丸める */
    background-color: #dbe4e7; /* 塗り潰し */
}

上記cssを適用すると下記の様に表示可能です。

文字のコピーは、Control+Cです。

マークを使ってより一層キーボードっぽくすると、⌘+Cとなります。

あとは好みでカスタムして下さい。