HTML <kbd> タグ

定義と使用方法

<kbd> タグはキーボード入力を定義するために使用されます。その内容はブラウザのデフォルトの等幅フォントで表示されます。

ヒント：このタグは廃止されていませんが、CSSを使用することでより豊かな効果を実現できます（以下の例を参照してください）。

も参照してください：

タグ 説明
<code> コンピュータープログラムの例を出力を定義します。
<samp> キーボード入力を定義します。
<var> 変数を定義します。
<pre> プレフォーマットテキストを定義します。

も参照してください：

HTML 教程：HTML テキストフォーマット

HTML DOM リファレンスマニュアル：Kbd オブジェクト

例

例1

ドキュメント内にキーボード入力としてテキストを定義します：

<p>テキストをコピーするには、<kbd>Ctrl</kbd> + <kbd>C</kbd> を押してください（Windows）。</p>
<p>テキストをコピーするには、<kbd>Cmd</kbd> + <kbd>C</kbd> を押してください（Mac OS）。</p>

実際に試してみてください

例2

CSSを使って <kbd> 要素のスタイルを設定します：

<html>
<head>
<style>
kbd {
  border-radius: 2px;
  padding: 2px;
  border: 1px solid black;
}
</style>
</head>
<body>
<p>テキストをコピーするには、<kbd>Ctrl</kbd> + <kbd>C</kbd> を押してください（Windows）。</p>
<p>テキストをコピーするには、<kbd>Cmd</kbd> + <kbd>C</kbd> を押してください（Mac OS）。</p>
</body>
</html>

実際に試してみてください

グローバル属性

<kbd> タグはさらに HTMLでのグローバル属性。

イベント属性をサポートしています

<kbd> タグはさらに HTMLでのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値を使用して表示します <kbd> 要素：

kbd {
  font-family: monospace;
}

実際に試してみてください

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート