<kbd>タグの解説
<kbd>は、キーボードや音声装置などの入力端末で扱う文字を表します。「kbd」は「keyboard」の略語です。ユーザーがキーボードを操作した時に得られる効果を説明する祭などに役立ちます。
このタグで指定した文字列は、多くの場合ユーザーエージェント側で等幅フォントが適用されます。入力された文字であることが分かるように、CSS（スタイルシート）で見栄えを調整しましょう。
<kbd>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果として等幅フォントが適用されます。これはユーザーエージェントの既定スタイルによるものです。
- 同一のページ内に複数使うことができます。この要素自体を入れ子にすることも可能です。
<kbd>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<kbd>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。文章の中でキーボードなどの入力装置の操作を表す箇所に適用します。
text <kbd>key</kbd> text
例えば、パソコンの基本的な操作を解説するテキストなどで役立ちます。
<p>文字のコピーは、Windowsの場合<kbd>Ctrl</kbd> + <kbd>C</kbd>、macOSの場合<kbd>Command</kbd> + <kbd>C</kbd>で行います。</p>
このままでは、地の文に溶け込んで読者に正確な意図が伝わらないかもしれません。スタイルシートを使って<kbd>の範囲にボタン風のスタイルを適用してみましょう。
p kbd {
padding-block: 2px;
padding-inline: 4px;
margin-inline: 0.25em;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #eee;
box-shadow: 0 1px 1px rgb(0 0 0 / 20%);
box-shadow: 0 2px 0 0 rgb(255 255 255 / 70%) inset;
color: #444;
font-weight: bold;
}
<kbd>を入れ子にすると、キー入力の操作の意図をより正確に伝えることができます。例えば、キー入力の同時押しを強調したい場合は以下のように記述します。
Windowsの場合：<kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd>
macOSの場合：<kbd><kbd>Command</kbd> + <kbd>C</kbd></kbd>
このような記述を採用する場合は、スタイルの重複を防ぐための調整が必要となります。先程のスタイルシートに以下の内容を加えると、入れ子になった<kbd>は親要素のプロパティを全てリセットします。
p kbd:has(kbd) {
all: unset;
}