トップページ  > HTML Living Standard  > <kbd>

★HTML Living Standard リファレンス

<kbd> …… ユーザー入力を表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<kbd>タグは、ユーザー入力を表す際に使用します。

kbd要素は、ユーザーによる入力内容を表します。 通常はキーボード入力ですが、音声コマンドなどの他の入力を表す際にも使用できます。

kbd要素とsamp要素の併用

samp要素の子孫要素としてkbd要素が配置される場合、 ユーザーが入力した内容をシステムが確認表示していることを表します。

kbd要素の子孫要素としてsamp要素が配置される場合、 システム出力に基づくユーザー入力であることを表します。 例えば、ユーザーがメニュー項目を呼び出して入力する内容などです。

■使用例

以下のサンプルは、ユーザーが押すべきキーをkbd要素でマークアップしています。 kbd要素とkbd要素が入れ子になっているのは、ShiftキーとF3キーを同時に押すことを示しています。

HTMLソース

<p>
 ジョージにリンゴを食べさせるには、
 <kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd>
 を押します。
</p>
↓↓↓

ブラウザ上の表示

ジョージにリンゴを食べさせるには、 Shift + F3 を押します。

■使用例

以下のサンプルでは、ユーザーはメニュー項目を選択することで入力を行います。 kbd要素のなかにsamp要素が配置されているのは、 (この場合はメニュー操作を通じた)システム出力に基づくユーザー入力であることを表します。

kbd要素とkbd要素が入れ子になっていますが、 外側のkbd要素は入力ブロック全体を表し、内側のkbd要素は入力の個々のステップを表します。

HTMLソース

<p>
 ジョージにリンゴを食べさせるには、
 <kbd><kbd><samp>ファイル</samp></kbd>|<kbd><samp>リンゴを食べる...</samp></kbd></kbd>
 を選択します。
</p>
↓↓↓

ブラウザ上の表示

ジョージにリンゴを食べさせるには、 ファイル|リンゴを食べる... を選択します。

■使用例

実際には、上記サンプルのような精度はあまり必要ありません。 以下のような、より簡単なマークアップでも問題ありません。

HTMLソース

<p>
 ジョージにリンゴを食べさせるには、
 <kbd>ファイル | リンゴを食べる...</kbd>
 を選択します。
</p>
↓↓↓

ブラウザ上の表示

ジョージにリンゴを食べさせるには、 ファイル | リンゴを食べる... を選択します。

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ