kbd 要素入力テキストを表す
kbd 要素は入力テキストを表します。キーボード入力だけでなく、音声コマンドのような他の入力を表すことも可能です。
例えば、<kbd>123</kbd> と記述すれば、それは単なる数字ではなく入力されたテキストだと表すことができます。
kbd 要素の仕様
- カテゴリ
- コンテンツモデル
- この要素を使用できる文脈
フレージング・コンテンツが期待される場所
- この要素で使用できる属性
詳細説明
kbd 要素の入れ子、および kbd 要素と samp 要素の入れ子関係は特別な意味を持ちます。
kbd 要素が samp 要素に内包された場合
kbd 要素によってマークアップされた入力テキストが、エコーバックされたことを表します。エコーバックとは入力に対して結果の出力と一緒に入力した値が返ってくることですが、例えば、キーボードから 「1」 を入力すると 「1 が選択されました」 という出力が行われる様子を表したい場合、
<kbd>1</kbd> を入力すると 「<samp><kbd>1</kbd> が選択されました</samp>」 と表示されます。
のようにマークアップすることで表すことができます。
kbd 要素が samp 要素を内包した場合
samp 要素によって出力された内容を入力することを表します。システムによって出力されたメニュー項目を選択してくださいと説明する場合などです。例えば、「保存する」 というメニューが出力され、それを選択することを表したい場合、
画面に表示される 「<kbd><samp>保存する</samp></kbd>」 メニューを選択します。
のようにマークアップすることで表すことができます。
kbd 要素で 2重にマークアップされた場合
実際のキーや入力方法を表すことができます。例えば、「保存は Ctrl + S です」 というキーボードによる入力方法を表したい場合、
保存は <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd> です。
のようにマークアップすることで表すことができます。
kbd 要素のサンプルソース
<p> <kbd>1</kbd> を入力すると 「<samp><kbd>1</kbd> が選択されました</samp>」 と表示されます。 </p>
<p> 画面に表示される 「<kbd><samp>保存する</samp></kbd>」 メニューを選択します。 </p>
<p> 保存は <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd> です。 </p>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |