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>

ライブデモ

キーボードショートカット

kbd 要素でキーボード入力やショートカットキーを表示。

プレビュー全画面表示

操作ガイド

kbd 要素でアプリケーションの操作手順を説明。

プレビュー全画面表示

kbd のネスト

kbd をネストしてキーの組み合わせを表現。samp との組み合わせ。

プレビュー全画面表示

実務での使いどころ

  • <kbd> の活用

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

注意点

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

アクセシビリティ

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

参考リンク