このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

kbd要素:ユーザーによる入力

記事Apr. 17th,2015
July 7th,2020
ユーザーによる入力を表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

kbd”要素はユーザーが入力する内容を表す要素です。

多くの場合キーボードによってユーザーが入力する内容を示すために使用されますが、音声入力やその他の入力デバイスによる入力を示すこともできます。

サンプルコード

<p>
<kbd>Hey Siri</kbd>”と唱えるとこの機械が質問を聞いてくれます。
</p>

Hey Siri”と唱えるとこの機械が質問を聞いてくれます。

一般的なブラウザでは“kbd”要素の内容は等幅フォントで表示されます。

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性

入れ子にした“kbd”要素

kbd”要素を入れ子にしたり、samp”要素と組み合わせることによってより厳密に入力の内容を表現することができます。

入れ子にした“kbd”要素

入れ子にされた“kbd”要素はキーボードのキーなど、親となる“kbd”要素が表す入力の中での一つの入力単位を表します。

<p>
キーボードの<kbd><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>N</kbd></kbd>を押すとシークレットウィンドウが開きます。
</p>

キーボードのCtrl+Shift+Nを押すとシークレットウィンドウが開きます。

samp”要素の中に配置した“kbd”要素

samp”要素の中に配置された“kbd”要素はプログラムやコンピュータによって出力されたユーザーの入力内容を表します。

<p>
発注する個数の欄に「<kbd>48</kbd>」と入力すると次の画面で発注数が「<samp><kbd>48</kbd></samp>」と表示されます。
</p>

発注する個数の欄に「48」と入力すると次の画面で発注数が「48」と表示されます。

samp”要素を中に配置した“kbd”要素

<p>
次の画面では「<kbd><samp>はい</samp></kbd>」をクリックすると契約が完了します。
</p>

次の画面では「はい」をクリックすると契約が完了します。

常に厳密に要素で囲むとスタイルシートを適用する場合などに便利ですが、必ずしもそうする必要はなく、作者が必要ない場合は一つの“kbd”要素で囲むだけで十分です。

簡略化しない
<p>
好きな形で選択したい場合は<kbd><kbd><samp>ツール</samp></kbd><kbd><samp>選択ツール</samp></kbd><kbd><samp>自由選択</samp></kbd></kbd>をクリックします。
</p>
簡略化しない

好きな形で選択したい場合はツール選択ツール自由選択をクリックします。

簡略化する
<p>
好きな形で選択したい場合は<kbd>ツール→選択ツール→自由選択</kbd>をクリックします。
</p>
簡略化する

好きな形で選択したい場合はツール→選択ツール→自由選択をクリックします。

仕様書

kbd”要素はHTML1.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<kbd>
定義あり

定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク