HTML Living Standard/kbd

kbd 要素

<kbd>要素は、ユーザーが入力する内容を表現するためのインライン要素です。通常、キーボード入力や音声コマンド、またはその他のユーザー入力デバイスの入力を示す際に使用されます。

<kbd>要素は、特にコンピュータ操作やインタラクティブな文脈において、入力内容を視覚的に明確化するために用いられます。

以下は、<kbd>要素の基本的な使用例です。

<p>次のキーを押してください: <kbd>Ctrl</kbd> + <kbd>C</kbd></p>

このコードは以下のように表示されます：

<kbd>要素自体には特定の属性はありませんが、グローバル属性を使用することが可能です。

以下は、キーボードショートカットを示す例です：

<p>コピーするには <kbd>Ctrl</kbd> + <kbd>C</kbd> を押します。</p>
<p>ペーストするには <kbd>Ctrl</kbd> + <kbd>V</kbd> を押します。</p>

ターミナルでのコマンド入力例にも使用できます：

<p>以下のコマンドを入力してください:</p>
<pre>
<kbd>ls -l</kbd>
</pre>

ユーザーがフォームに入力すべき値を強調する際にも利用できます：

<p>ユーザー名フィールドに <kbd>your_username</kbd> を入力してください。</p>

音声コマンドやその他のインタラクション方法を示す際にも使用できます：

<p>音声コマンド例: <kbd>Open settings</kbd></p>

<kbd>要素は、入力テキストに意味論的な意味を付加しますが、スタイリングは付与されていません。そのため、視覚的に明確化するにはCSSを用いる必要があります。
ほかの要素（例：<code>や<samp>）と組み合わせて使用することが一般的です。

CSSを使用して<kbd>要素をスタイリングすることで、入力内容を視覚的に強調できます。以下は例です：

kbd {
  font-family: "Courier New", monospace;
  background-color: #f4f4f4;
  padding: 2px 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

このスタイルは、<kbd>要素をボタンのように見せるデザインを提供し、入力指示としての視覚的な効果を高めます。