“kbd”要素:ユーザーによる入力

要素について

“kbd”要素はユーザーが入力する内容を表す要素です。

多くの場合キーボードによってユーザーが入力する内容を示すために使用されますが、音声入力やその他の入力デバイスによる入力を示すこともできます。

サンプルコード

<p>

“<kbd>Hey Siri</kbd>”と唱えるとこの機械が質問を聞いてくれます。

</p>

“Hey Siri”と唱えるとこの機械が質問を聞いてくれます。

一般的なブラウザでは“kbd”要素の内容は等幅フォントで表示されます。

属性と値

入れ子にした“kbd”要素

“kbd”要素を入れ子にしたり、“samp”要素と組み合わせることによってより厳密に入力の内容を表現することができます。

入れ子にした“kbd”要素

入れ子にされた“kbd”要素はキーボードのキーなど、親となる“kbd”要素が表す入力の中での一つの入力単位を表します。

<p>

キーボードの<kbd><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>N</kbd></kbd>を押すとシークレットウィンドウが開きます。

</p>

キーボードのCtrl+Shift+Nを押すとシークレットウィンドウが開きます。

“samp”要素の中に配置した“kbd”要素

“samp”要素の中に配置された“kbd”要素はプログラムやコンピュータによって出力されたユーザーの入力内容を表します。

<p>

「<samp><kbd>48</kbd></samp>」個発注しました。

</p>

「48」個発注しました。

“samp”要素を中に配置した“kbd”要素

プログラムやコンピュータによって出力された内容を入力する場合は“kbd”要素の中に“samp”要素を配置します。

<p>

次の画面では「<kbd><samp>はい</samp></kbd>」をクリックすると契約が完了します。

</p>

次の画面では「はい」をクリックすると契約が完了します。

常に厳密に要素で囲むとスタイルシートを適用する場合などに便利ですが、必ずしもそうする必要はなく、作者が必要ない場合は一つの“kbd”要素で囲むだけで十分です。

簡略化しない
<p>

好きな形で選択したい場合は<kbd><kbd><samp>ツール</samp></kbd>→<kbd><samp>選択ツール</samp></kbd>→<kbd><samp>自由選択</samp></kbd></kbd>をクリックします。

</p>

簡略化しない

好きな形で選択したい場合はツール→選択ツール→自由選択をクリックします。

簡略化する
<p>

好きな形で選択したい場合は<kbd>ツール→選択ツール→自由選択</kbd>をクリックします。

</p>

簡略化する

好きな形で選択したい場合はツール→選択ツール→自由選択をクリックします。

仕様書

“kbd”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書

<kbd>