Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<kbd>

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

テキスト・構造

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<kbd>
1
12
1
≤4
18
≤3.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Firefox 4 より前のバージョンでは、<kbd> 要素を作成すると、期待される `HTMLElement` ではなく `HTMLSpanElement` オブジェクトが生成されていました。

基本構文

HTML 
<p>To save, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<p>Press the <kbd>Enter</kbd> key to confirm.</p>

ライブデモ

ki-bo-dsho-tkat

Kbd element in ki-bo-dinput or sho-tkatki- display.

プレビュー全画面表示

operationid

Kbd element in aprike-tion. operationorder Description.

プレビュー全画面表示

kbd nested

Kbd nestedki-. combination representation.samp and. combination.

プレビュー全画面表示

実務での使いどころ

  • <kbd> の活用

    <kbd> は HTML の要素で、キーボード、音声入力、その他の入力端末からのユーザーによる文字入力を表す行内の文字列の区間を表します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク