＜kbd要素＞ - 入力

公開日: 2017/02/09

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>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/615/"> <meta charset="utf-8"> <title>【デモ】＜kbd要素＞ - 入力</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/kbd/"> </head> <body>

<p>kbd要素は、入力を表す要素です。キーボードなどによる入力コマンドをマークアップする時に利用しましょう。</p> <p>キーボードの<kbd>return</kbd>を押すと、画面には<samp>Success!!</samp>と表示されるでしょう。</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>