HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<kbd>
キーボード入力要素。ユーザーがキーボード、音声入力などの入力デバイスから入力したテキストを表します。
info
概要
<kbd> 要素（キーボード入力要素）は、ユーザーが入力した入力を表すテキストフレーズを囲むために使用されます。通常、ブラウザはこれをデフォルトでモノスペース（等幅）フォントで表示し、多くのサイトではキーボードのキーのような視覚的なスタイルを適用しています。
キーボードからの入力だけでなく、音声コマンドやその他のテキスト入力デバイスからの入力も表すことができます。
play_circle
デモ (静的表示)
HTML (Source)
保存するには <kbd>Ctrl</kbd> + <kbd>S</kbd> を押してください。
<br><br>
<p>
コマンドラインで <kbd>git commit</kbd> を実行します。
</p>
Preview (Result)
保存するには Ctrl + S を押してください。
コマンドラインで git commit を実行します。
info
視覚的な表示について
上記のプレビューでは、提供された $CSS$ を変更していないため、キーボードキーのような視覚的な装飾（枠線など）は適用されていませんが、デフォルトのフォント（等幅）で表示されます。実際のウェブサイトでは、通常 $CSS$ で装飾されます。
上記のプレビューでは、提供された $CSS$ を変更していないため、キーボードキーのような視覚的な装飾（枠線など）は適用されていませんが、デフォルトのフォント（等幅）で表示されます。実際のウェブサイトでは、通常 $CSS$ で装飾されます。
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| （グローバル属性） | この要素に固有の属性はありませんが、すべての $HTML$ 要素に共通するグローバル属性（$id, class, style$ など）を適用できます。 |
code
実用例
1. 単一のキーまたはコマンド
<p>「Tab」キーを押してフォーカスを移動してください。<kbd>Tab</kbd></p>
2. 複数のキーの組み合わせ（複合入力）
<p>ドキュメントを印刷するには、<kbd><kbd>Ctrl</kbd> + <kbd>P</kbd></kbd> を押します。</p>
lightbulb
複合入力の推奨構造
複数のキー（例: $Ctrl + C$）を表す場合は、上記のように全体を一つの $<kbd>$ で囲み、その中に個々のキーを入れ子になった $<kbd>$ 要素で囲む構造が推奨されます。これにより、スクリーンリーダーなどの補助技術に対し、それが単一の操作として構成されていることをより明確に伝えることができます。
複数のキー（例: $Ctrl + C$）を表す場合は、上記のように全体を一つの $<kbd>$ で囲み、その中に個々のキーを入れ子になった $<kbd>$ 要素で囲む構造が推奨されます。これにより、スクリーンリーダーなどの補助技術に対し、それが単一の操作として構成されていることをより明確に伝えることができます。
3. 音声コマンド
<p>音声入力で検索するには、「<kbd>OK Google、東京の天気</kbd>」と話しかけます。</p>
lightbulb
知っておくべき重要事項
accessibility_new
セマンティクス（意味）の重要性
$kbd$ 要素は、単に文字を装飾するためではなく、その内容が**ユーザーの入力**（キーボード、音声コマンドなど）であることを示すために存在します。視覚的なスタイルだけが必要な場合は、$CSS$ で $<span>$ などの要素にスタイルを適用するべきです。
$kbd$ 要素は、単に文字を装飾するためではなく、その内容が**ユーザーの入力**（キーボード、音声コマンドなど）であることを示すために存在します。視覚的なスタイルだけが必要な場合は、$CSS$ で $<span>$ などの要素にスタイルを適用するべきです。
code
関連要素
* $ <samp>$: プログラムまたはシステムの出力例を表します。 * $ <code>$: プログラムコードの一部を表します。 * $ <var>$: 変数名を表します。
* $ <samp>$: プログラムまたはシステムの出力例を表します。 * $ <code>$: プログラムコードの一部を表します。 * $ <var>$: 変数名を表します。