HTML <kbd> キーボード入力要素

試してみましょう

<p>
  <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> を押して、MDN のページを読み込み直してください。
</p>

kbd {
  background-color: #eeeeee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow:
    0 1px 1px rgb(0 0 0 / 0.2),
    0 2px 0 0 rgb(255 255 255 / 0.7) inset;
  color: #333333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: bold;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

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

属性

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

使用上のメモ

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

• 他の <kbd> 要素の中で更に <kbd> 要素を使用すると、もっと大きい入力の中における、実際のキー入力またはその他の入力単位を表します。以下の入力時のキー操作の表現を参照してください。
• <kbd> 要素を <samp> 要素の中で使用すると、システムからユーザーにエコーバックされた入力を表します。以下の入力のエコーバックの例を参照してください。
• 一方、 <kbd> 要素の中で <samp> 要素を使用すると、メニューやメニュー項目の名前、画面上に表示されているボタンの名前など、システムによって表示された文字列に基づく入力を表します。以下の画面上に表示された入力の選択肢の表現を参照してください。

例

基本的な例

<p>
  コマンド "my-command" のドキュメントを参照するには <kbd>help my-command</kbd> コマンドを使用してください。
</p>

結果

入力時のキー操作の表現

複数のキー操作から成る入力を表現したい場合、複数の <kbd> 要素を重ねて、外側の <kbd> 要素で入力全体を表し、内側の <kbd> で入力時のそれぞれのキー操作を表すことができます。

スタイルなし

最初に、 HTML だけでどのように見えるかを見てみましょう。

HTML

<p>
  キーボードショートカットの <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> を使用して新規文書を作成することもできます。
</p>

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

結果

技術的概要

仕様書

ブラウザーの互換性

関連情報

• <code>