HTML Living Standard/kbd
kbd 要素
編集<kbd>
要素は、ユーザーが入力する内容を表現するためのインライン要素です。通常、キーボード入力や音声コマンド、またはその他のユーザー入力デバイスの入力を示す際に使用されます。
定義
編集<kbd>
要素は、特にコンピュータ操作やインタラクティブな文脈において、入力内容を視覚的に明確化するために用いられます。
使用方法
編集以下は、<kbd>
要素の基本的な使用例です。
<p>次のキーを押してください: <kbd>Ctrl</kbd> + <kbd>C</kbd></p>
このコードは以下のように表示されます:
- 次のキーを押してください:
Ctrl
+C
属性
編集<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>
)と組み合わせて使用することが一般的です。
アクセシビリティ
編集- スクリーンリーダーを使用する場合、
<kbd>
要素がユーザー入力であることを認識できることがあります。 - 入力が文脈的に重要な場合、周囲に説明を付け加えると可読性が向上します。
スタイリング
編集CSSを使用して<kbd>
要素をスタイリングすることで、入力内容を視覚的に強調できます。以下は例です:
kbd { font-family: "Courier New", monospace; background-color: #f4f4f4; padding: 2px 4px; border: 1px solid #ddd; border-radius: 4px; }
このスタイルは、<kbd>
要素をボタンのように見せるデザインを提供し、入力指示としての視覚的な効果を高めます。
使用上のヒント
編集- ユーザーが入力する内容を明確に示したい場合に
<kbd>
要素を活用してください。 - 視覚的な違いを際立たせるために、スタイリングを適切に適用することを推奨します。
- 入力内容を説明するコンテキストを周囲に加えることで、アクセシビリティと可読性を向上させることができます。