<kbd> …… ユーザー入力を表す

<kbd>タグは、ユーザー入力を表す際に使用します。

kbd要素は、通常はユーザーによるキーボード入力を表しますが、 音声コマンド入力などのキーボード以外の入力を表す際にも使用できます。

kbd要素とsamp要素の併用

samp要素の子孫要素としてkbd要素が配置される場合、 ユーザーが入力した内容をシステムが確認表示していることを表します。

kbd要素の子孫要素としてsamp要素が配置される場合、 システム出力に基づくユーザー入力であることを表します。 例えば、ユーザーがメニュー項目を呼び出して入力する内容などです。

■使用例

以下のサンプルは、ユーザーが押すべきキーをkbd要素でマークアップしています。 kbd要素とkbd要素が入れ子になっているのは、ShiftキーとF3キーを同時に押すことを示しています。

<p>
 ジョージにリンゴを食べさせるには、
 <kbd>
  <kbd>Shift</kbd> + <kbd>F3</kbd>
 </kbd>
 を押します。
</p>

■使用例

以下のサンプルでは、ユーザーはメニュー項目を選択することで入力を行います。 kbd要素のなかにsamp要素が配置されているのは、 （この場合はメニュー操作を通じた）システム出力に基づくユーザー入力であることを表します。

kbd要素とkbd要素が入れ子になっていますが、 外側のkbd要素は入力ブロック全体を表し、内側のkbd要素は入力の個々のステップを表します。

<p>
 ジョージにリンゴを食べさせるには、
 <kbd>
  <kbd><samp>ファイル</samp></kbd>|<kbd><samp>リンゴを食べる...</samp></kbd>
 </kbd>
 を選択します。
</p>

■使用例

実際には、上記の使用例のような精度の高いマークアップは、あまり必要ありません。 以下の使用例のような簡単なマークアップでも問題ありません。

<p>
 ジョージにリンゴを食べさせるには、
 <kbd>ファイル | リンゴを食べる...</kbd>
 を選択します。
</p>

■関連項目

Sponsors