CSSで文字をキーボード風 ：：ショートカットキー表記/説明：：
キーボード風とは：
command+Fや、⌘+F、⌥+Fなど、ショートカットキー表記/説明 する時の見え方(CSS装飾)を想定。
※ここでの例はmacのショートカットキー表記
※spanタグにclassを指定するのではなく、kbdタグを使う方法
百聞は一見に如かず：CodePen
まずは見てもらうとこう。CodePen埋め込み：
See the Pen css_keyborad_style by Reng (@Reng_code) on CodePen.
- 前提：Google fonts の "Fira Code"、太さ(weight)はレギュラーの"400"使用。
- 前提：アルファベットは、キーボードに表示のものを表示しているものとする (例:｢a｣とあっても大文字の｢A｣の shift+aという意味ではない)
③と④は微妙・よくわからない
→ fontを変えると判りやすく影響出るのかも？ =詳細未確認=
→ 直前の親要素の関係する設定値によっては判りやすく影響出るのかも？ =詳細未確認=
CSS部 -抜粋-
・以下がkbdタグに関連するところ(body部や親要素のdiv分は除外)
・コメントアウトが多いのは解説を兼ねてるから、コピペの際不要なら削除で
cssコピペ用サンプル
/* Googel fontsの "Fira Code" と "Noto Sans Japanease" */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400&family=Noto+Sans+JP&display=swap');
/*=== kbdタグ---キーボード指示など ====*/
kbd{
/*display:inline-block; __⭐️これ要るかな？*/
}
kbd > kbd{
font-family:
'Fira Code', /*<--'googleフォント等幅_Fira Code'、 DLにレギュラー400指定*/
/*'Courier', <--これ使うとまた違った感じになる*/
/*'menlo', <--これ使うとまた違った感じになる*/
monospace;
background: #f2f2f2;/*灰薄め*/
border:1px solid #d9d9d9;/*灰やや濃いめ*/ border-radius:0.2em;
padding:0.2em 0.4em 0.1em; /*<--④padding --*/
/*--影的なもの--*/
font-size: 0.88em; /*<--②サイズ感の調整：他の文章と文字サイズ --*/
line-height: 1; /*__タテ領域の調整：親要素の行間に影響されない --*/
margin:0 0.2em; /*<--③marginの調整：前後の文字と近すぎないように --*/
transform:translateY(-0.1em); /*<--①タテ位置感の調整：
文章中の縦位置を微調整(少しだけ上に) --*/
}
.sdw kbd > kbd{
box-shadow: 0.15em 0.15em 0 rgba(0, 0, 0, 0.3) ;
/*--影的なもの:ボカシなし--*/
}
/*===== 調整無し版 各種 ======*/
.non_y kbd > kbd{
/*__①(設定しなかった場合と同等)タテ位置感の調整無しの場合：
文章中、上下余白などの分、位置が下気味になる__*/
transform:translateY(0);
}
.non_lh kbd > kbd{
/*__前提条件：⭐️kbdにinline-block設定時 __*/
/*__(設定しなかった場合と同等)タテ領域の調整：親要素の行間値を継承__*/
line-height:inherit ;
}
.non_sz kbd > kbd{
/*__②(設定しなかった場合と同等)サイズ感の調整：親要素の値を継承__*/
font-size: inherit;
}
.non_mg kbd > kbd{
/*__③(設定しなかった場合と同等)左右余白の調整ナシ：
前後の文字と近すぎな場合が起こるかも？__*/
margin:0 0;
}
.non_pd kbd > kbd{
/*__④padding(設定しなかった場合と同等)padding調整ナシ：
1文字の場合の幅が狭すぎ__*/
padding:auto auto;
}
備考：paddingやmarginの...
3つ続くときはこう(カンマ無し、半角スペースで列挙)
padding:(上) (左右) (下); margin:(上) (左右) (下);
2つ続くときはこう(カンマ無し、半角スペースで列挙)
padding:(上下) (左右); margin:(上下) (左右);
以上。
kbdタグの書き方は下記のページを参考にしています