<kbd>: キーボード入力要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<kbd> は HTML の要素で、キーボード、音声入力、その他の入力端末からのユーザーによる文字入力を表す行内の文字列の区間を表します。慣習的に、ユーザーエージェントは既定で <kbd> 要素の中身を等幅フォントで表示しますが、 HTML 標準で規定されているものではありません。
試してみましょう
<p> Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an MDN page. </p> kbd { background-color: #eee; border-radius: 3px; border: 1px solid #b4b4b4; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset; color: #333; display: inline-block; font-size: 0.85em; font-weight: 700; line-height: 1; padding: 2px 4px; white-space: nowrap; } <kbd> は <samp>（サンプル出力）要素の中で様々な組み合わせの入れ子が行われ、様々な形の入力や視覚的な合図に基づいた入力を表現します。
属性
この要素にはグローバル属性以外の属性はありません。
使用上のメモ
他の要素 <kbd> と組み合わせることで、もっと具体的なシナリオを表現できる場合があります。
- 他の
<kbd>要素の中で更に<kbd>要素を使用すると、もっと大きい入力の中における、実際のキー入力またはその他の入力単位を表します。以下の入力時のキー操作の表現を参照してください。 <kbd>要素を<samp>要素の中で使用すると、システムからユーザーにエコーバックされた入力を表します。以下の入力のエコーバックの例を参照してください。- 一方、
<kbd>要素の中で<samp>要素を使用すると、メニューやメニュー項目の名前、画面上に表示されているボタンの名前など、システムによって表示された文字列に基づく入力を表します。以下の画面上に表示された入力の選択肢の表現を参照してください。
メモ: 専用のスタイルを定義して、 <kbd> 要素における既定のフォントの選択を上書きすることができますが、ユーザー設定によっては CSS より優先されることがあります。
例
基本的な例
<p> コマンド "mycommand" のドキュメントを参照するには <kbd>help mycommand</kbd> コマンドを使用してください。 </p> 結果
入力時のキー操作の表現
複数のキー操作から成る入力を表現したい場合、複数の <kbd> 要素を重ねて、外側の <kbd> 要素で入力全体を表し、内側の <kbd> で入力時のそれぞれのキー操作を表すことができます。
スタイルなし
最初に、 HTML だけでどのように見えるかを見てみましょう。
HTML
<p> キーボードショートカットの <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> を使用して新規文書を作成することもできます。 </p> ここでは外側の <kbd> 要素でキー入力操作全体を囲み、それぞれのキーの組み合わせを記述するために、それぞれのキーを囲んでいます。
メモ: 常にこのように囲む必要はありません。外側の <kbd> 要素を省略して簡略化しても構いません。言い換えれば、単に <kbd>Ctrl</kbd>+<kbd>N</kbd> と表現するのも完全に有効です。
しかし、スタイルシートによっては、このように重ねて囲んだ方が便利だと感じられるかもしれません。
結果
スタイルシートを適用しないと、出力結果は次のように見えます。
専用スタイル付き
いくらか CSS を追加して、もっと分かりやすくすることができます。
CSS
キーボードキーのレンダリング時に適用できる、入れ子になっている <kbd> 要素の新しいセレクター、kbd>kbd を追加します。
kbd > kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } HTML
それから HTML を更新して、このクラスを出力中のキーに使用するように表現します。
<p> <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> を押して新規文書を作成することもできます。 </p> 結果
結果は私たちが求めているものです。
入力のエコーバック
<kbd> 要素を <samp> 要素内で使用すると、システムからエコーバックされた入力を表現することができます。
<p> 構文エラーが発生すると、このツールは確認のために あなたが入力したコマンドを出力します。 </p> <blockquote> <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp> </blockquote> 結果
画面上に表示された入力の選択肢の表現
<kbd> 要素の中で <samp> 要素を使用すると、メニューやメニュー項目の名前や、画面上に表示されているボタンの名前など、システムが表示した文字列に基づく入力を表すことができます。
例えば、「ファイル」メニューの中の「新規文書」を選択する方法を HTML で表現すると、このようになります。
<p> 新規ファイルを作成するには、メニューの <kbd><kbd><samp>ファイル</samp></kbd> ⇒<kbd><samp>新規文書</samp></kbd></kbd> を選択して下さい。 </p> <p> 新しいファイルの名前を入力したら、 <kbd><samp>OK</samp></kbd> ボタンを押して確認することを忘れないでください。 </p> これはいくらか興味深い組み合わせです。メニューの選択肢を記述するために、入力全体を <kbd> 要素で囲んでいます。それからその中で、メニューとメニュー項目の名前を <kbd> および <samp> の中に入れ、画面上の部品を選択する入力であることを示しています。
結果
技術的概要
| コンテンツカテゴリー | フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ |
|---|---|
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | HTMLElement |
仕様書
| Specification |
|---|
| HTML # the-kbd-element |
ブラウザーの互換性
Loading…