<kbd> - キーボードなどによる入力

kbdは、ユーザーがキーボードなどにより入力した内容をマークアップするためのタグです。音声入力の内容をマークアップすることもできますが、基本的には、キーボードをタイプしての入力が想定されています。kbdというタグ名は、keyboardから来ています。組み合わせるタグで意味が変わってしまう点にご注意下さい。

説明

下記は、Enterの説明をマークアップした例です。

HTML

<p>キーボードの<kbd>Enter</kbd>を押すと、文字入力を確定したり、改行することができます。</p>

キーボードのEnterを押すと、文字入力を確定したり、改行することができます。

[kbd]の中に[kbd]

kbdタグの中にkbdタグを用いたネストは、外側のkbdタグが全体としての入力、内側のkbdタグが個々の入力を示します。例えば下記は、同時押しの入力を説明する例です。

HTML

<p>Macでは、<kbd><kbd>Command</kbd> + <kbd>C</kbd></kbd>で、選択範囲をコピーできます。</p>

Macでは、Command + Cで、選択範囲をコピーできます。

[samp]の中に[kbd]

出力を示すsampタグの中にkbdタグを用いるケースがあります。出力の中に入力があるのは一見奇妙に感じますが、例えば、Macのターミナルや、Windowsのコマンドプロンプトを思い浮かべて下さい。入力した内容が、そのまま出力されますよね。「出力された入力内容」をマークアップする際に、sampの中にkbdが用いられます。下記は、sudo -sと入力した結果の出力をマークアップした例です。

HTML

<pre><samp>[ec2-user@ip-999-99-9-999 ~]$ <kbd>sudo -s</kbd>
[root@ip-999-99-9-999 ec2-user]# </samp></pre>
[ec2-user@ip-999-99-9-999 ~]$ sudo -s
[root@ip-999-99-9-999 ec2-user]# 

[kbd]の中に[samp]

kbdの中に、出力を示すsampタグを用いるケースがあります。前述と逆のケースです。これは、「出力された内容を選択する」というマークアップになります。例えば下記は、ロールプレイングゲームにおいて、「出力された中からメニューを選択して下さい」というメッセージをマークアップする例です。

HTML

<p>この後、出てきた選択肢の中から、どちらに進むかを選択して下さい。<kbd><samp>右に進む</samp></kbd>を選択するとゲームオーバーになってしまうので注意しよう!</p>

この後、出てきた選択肢の中から、どちらに進むかを選択して下さい。右に進むを選択するとゲームオーバーになってしまうので注意しよう!

概要

カテゴリー
  • Flow content (フロー・コンテンツ)
  • Phrasing content (フレージング・コンテンツ)
  • Palpable content (パルパブル・コンテンツ)
コンテンツモデル
フレージングコンテンツ
利用できる場所
フレージングコンテンツが期待される場所で使用できます。
利用できる属性
グローバル属性
許可されている、全てのグローバル属性を指定できます。
タグの省略
kbdタグは、開始タグ、終了タグ、共に省略することはできません。
標準のスタイル
kbd {
	font-family: monospace ;
}

参考情報

kbd要素に関する情報は、下記サイトで確認できます。

  • W3C … W3CによるHTML5勧告。kbdの項目。
  • HTML language reference … W3Cによるkbdのリファレンス。
  • WHATWG … WHATWGによる仕様書、HTML Living Standard。kbd要素の仕様。