We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

HTML のキーボード入力要素 (<kbd>) はキーボード、音声入力、その他の入力機器からのユーザーによる文字入力を表す行内の文字列の区間を表します。慣習的に、ユーザーエージェントは既定で <kbd> 要素の中身を等幅フォントで表示しますが、 HTML 標準で規定されているものではありません。

<kbd><samp> (サンプル出力)要素の中で様々な組み合わせの入れ子が行われ、様々な形の入力や視覚的な合図に基づいた入力を表現します。

コンテンツカテゴリー フローコンテンツ記述コンテンツ、知覚可能コンテンツ
許可されている内容 記述コンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 記述コンテンツを受け入れるすべての要素
許可されている ARIA ロール すべて
DOM インターフェイス HTMLElement

属性

この要素にはグローバル属性以外の属性はありません。

使用上のメモ

他の要素 <kbd> と組み合わせることで、もっと具体的なシナリオを表現できる場合があります。

  • 他の <kbd> 要素の中で更に <kbd> 要素を使用すると、もっと大きい入力の中における、実際のキー入力またはその他の入力単位を表します。以下の入力時のキー操作の表現を参照してください。
  • <samp> 要素の中で <kbd> 要素を使用すると、システムからユーザーにエコーバックされた入力を表します。以下の入力のエコーバックの例を参照してください。
  • 一方、 <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> 要素でキー入力操作全体を囲み、それぞれのキーの組み合わせを記述するために、それぞれのキーを囲んでいます。

結果

スタイルシートを適用しないと、出力結果は次のように見えます。

専用スタイル付き

いくらか CSS を追加して、もっと分かりやすくすることができます。

CSS

キーボードのキーを表示する際に適用できる新しいスタイル、 <kbd> 要素の "key" を定義します。

kbd.key {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
HTML

それから HTML を更新して、このクラスを出力中のキーに使用するように表現します。

<p><kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>
を押して新規文書を作成することもできます。</p>
結果

結果は私たちが求めているものです。

入力のエコーバック

<samp> 要素内で <kbd> 要素を使用すると、システムからエコーバックされた入力を表現することができます。

<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> の中に入れ、画面上の部品を選択する入力であることを示しています。

同様に、キーボードショートカットの表現もキーボードショートカット全体を <kbd> で囲むことで表現されm差うが、それぞれのキーもそれぞれ <kbd> 要素で囲みます。

常にこのように囲む必要はありません。外部の <kbd> 要素を省略して簡略化しても構いません。言い換えれば、単に <kbd>Ctrl</kbd>+<kbd>N</kbd> と表現するのも完全に有効です。

しかし、スタイルシートによっては、このように重ねて囲んだ方が便利だと感じられるかもしれません。

HTML はの出力はこのように見えます。

仕様書

仕様書 策定状況 コメント
HTML Living Standard
<kbd> の定義
現行の標準  
HTML5
<kbd> の定義
勧告 音声入力や個々のキー入力など、どのようなユーザ入力も含むように拡張
HTML 4.01 Specification
<kbd> の定義
勧告  

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり11 あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり

1. Before Firefox 4, creating a <kbd> element incorrectly resulted in an HTMLSpanElement object, instead of the expected HTMLElement.

関連情報