kbd要素

kbd要素は、キーボード入力や音声入力で、ユーザーが入力する内容を示す要素。

カテゴリー フロー・コンテンツ、フレージング・コンテンツ、パルパブル・コンテンツ。
コンテキスト フレージング・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル フレージング・コンテンツを内包できる。
属性 グローバル属性。
ブラウザ対応

構文

<kbd>入力する内容</kbd>

要点

  • kbd要素は、キーボード入力や音声入力で、ユーザーが入力する内容を示す要素である。
  • kbd要素を入れ子にすると、キーボードの１つのキーや、入力メカニズムに応じた１単位の入力を示す。
  • samp要素内にkbd要素を配置すると、ユーザーが入力した入力内容であることを示す。
  • kbd要素内にsamp要素を配置すると、コンピュータのシステムやプログラムから出力した入力内容であることを示す。
  • ほとんどのブラウザは、kbd要素内のテキストを、等幅フォントで表示する。

サンプルコード

入力する内容

ユーザーが入力すべき内容を、kbd要素で括る。

<p>入力欄に、<kbd>サンプル</kbd>と入力して下さい。</p>

キーボードのキー

kbd要素を入れ子にする。

<p>ユーザー名とパスワードを入力し、<kbd><kbd>Enter</kbd></kbd>キーを押して下さい。</p>

入力した内容を表示

samp要素の中にkbd要素を配置する。

<p>ユーザー名は、<samp><kbd>サンプル太郎</kbd></samp>でよろしいですね。</p>

コンピューターが出力した選択肢を表現

kbd要素の中にsamp要素を配置する。

<p>規約を読み、<kbd><kbd><samp>同意する</samp></kbd>｜<kbd><samp>同意しない</samp></kbd></kbd>のどちらかを選択します。</p>

サンプル

単体と入れ子

HTMLソースコード
<p>入力欄に、<kbd>サンプル</kbd>と入力し、<kbd><kbd>Enter</kbd></kbd>キーを押して下さい。</p>
実際の表示

入力欄に、サンプルと入力し、Enterキーを押して下さい。

samp要素と併用

HTMLソースコード
<pre>
<p>
	<samp>ユーザー名は、<kbd>サンプル太郎</kbd>で正しいですか？</samp>と表示するので、
	「<kbd><kbd><samp>はい</samp></kbd>｜<kbd><samp>いいえ</samp></kbd></kbd>」のどちらかを選択して下さい。
</p>
</pre>
実際の表示

ユーザー名は、サンプル太郎で正しいですか？と表示するので、 「はい｜いいえ」のどちらかを選択して下さい。