<kbd要素> - 入力
公開日:
kbd要素は、入力を表す要素です。名前のkbdはkeyboardから来ています。主にキーボードで入力するコマンドをマークアップするのに利用します。
概要
- 名前
- kbd (Keyboard)
- カテゴリー
- Flow content
- Phrasing content
- Palpable content
- 配置できる場所
- Phrasing contentが期待される場所。
- コンテンツモデル
- Phrasing content。
- タグの省略
- 開始タグも終了タグも省略できません。
- DOM Interface
- HTMLElement
- デフォルトのスタイル
kbd { font-family: monospace; }
- 仕様書
- https://html.spec.whatwg.org/multipage/semantics.html#the-kbd-element
属性
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
下記は、「Enterボタンを押す」という説明をマークアップした例です。
HTML
<p>キーボードの<kbd>Enter</kbd>を押すと、文字入力を確定したり、改行することができます。</p>
kbd要素は入れ子で使うこともできます。例えば、ボタンを同時に押して入力する場合、個々のボタンと全体をそれぞれkbd要素でマークアップします。
HTML
<p>Macでは、<kbd><kbd>Command</kbd> + <kbd>C</kbd></kbd>で、選択範囲をコピーできます。</p>
kbd要素の中に、出力を示すsamp要素を配置するケースがあり得ます。例えば、下記は、ゲームにおいて、「画面に出力された選択肢の中からメニューを選択する」という説明をマークアップした例です。
HTML
<p>画面に表示された選択肢の中から、どちらに進むかを選択して下さい。<kbd><samp>右に進む</samp></kbd>を選択するとゲームオーバーになってしまうので注意しよう!</p>
kbd要素はキーボードだけでなく、例えば、音声による入力をマークアップしても問題ありません。
HTML
<p>iPhoneなら<kbd>Hey, Siri!</kbd>、Androidなら<kbd>OK, Google!</kbd>と音声入力すると、アシスタントが立ち上がります。</p>
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】<kbd要素> - 入力</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/kbd/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>kbd要素は、入力を表す要素です。キーボードなどによる入力コマンドをマークアップする時に利用しましょう。</p>
<p>キーボードの<kbd>return</kbd>を押すと、画面には<samp>Success!!</samp>と表示されるでしょう。</p>
</body>
</html>