<kbd>: KBD 要素
最終更新：2026-10-13
<kbd>KBD 要素
ユーザーがキーボードから入力するテキストを表します。ドキュメントやショートカットのヒントでよく使われます。
| カテゴリ | 書式 |
|---|---|
| コンテンツモデル | フレージングコンテンツ |
| 許可される親要素 | フレージングコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </kbd> タグ |
| ステータス | 標準 |
📝 構文
<kbd>キーボード入力</kbd>▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <kbd> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： キーの組み合わせは、各キーを個別の <kbd> で囲み、+ で区切ると分かりやすくなります。
❓ よくある質問
Qkbd タグは何に使いますか？
A
<kbd> はユーザーのキーボード（または音声）入力をマークします。<kbd>Ctrl</kbd> + <kbd>C</kbd> のようにコピーのショートカットを示すのに使われ、ブラウザはデフォルトで等幅フォントで表示します。ソフトウェアドキュメントや技術チュートリアルの定番要素です。Qkbd は入れ子にできますか？
Aできます。入れ子の
<kbd> はキーの階層を区別できます。外側がショートカット全体、内側が個々のキーを表し、<kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd> のように書きます。CSS と組み合わせれば、組み合わせ全体に枠を付けることもできます。Qkbd と code の違いは何ですか？
A
<code> は「表示するプログラムコード」、<kbd> は「ユーザーが打ち込む入力」をマークします。チュートリアルでユーザーにコマンドを入力させる場面では <kbd>npm run dev</kbd>、コード断片を見せる場面では <code> を使います。🏷️ 関連タグ
💡 関連ケース
📚 関連チュートリアル
