kbdタグ -キーボードのキーやコマンドを表す｜HTML辞典
<kbd>タグとは？
<kbd> タグは、ユーザーが入力するキーボードのキーやコマンドを表すためのタグです。
一般的に、ショートカットキーやコマンドラインの入力を示す際に使用されます。
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。
閉じタグの有無
<kbd> は 開始タグ（<kbd>）と閉じタグ（</kbd>）の両方が必要 です。
基本的な記述方法
<p>コピーするには <kbd>Ctrl</kbd> + <kbd>C</kbd> を押してください。</p>
使用できる主な属性
<kbd> タグには特別な属性はありません。
CSSを使ったデザイン変更
<kbd> タグのデフォルトのスタイルは 等幅フォント（monospace） ですが、独自のスタイルを適用できます。
kbd {
font-family: monospace;
background-color: #f4f4f4;
border: 1px solid #ccc;
padding: 2px 4px;
border-radius: 3px;
}
適切な使用例
✅ キーボードショートカットの表記
<p>保存するには <kbd>Ctrl</kbd> + <kbd>S</kbd> を押してください。</p>
✅ コマンドラインの入力を示す
<p>ターミナルで以下のコマンドを入力してください：</p>
<pre><code><kbd>git clone https://github.com/example/repo.git</kbd></code></pre>
✅ Webアプリのキー操作を説明
<p>フォームの送信をキャンセルするには <kbd>Esc</kbd> キーを押します。</p>
適切でない使用例（誤った使い方）
❌ <kbd> を単なる強調目的で使用する
<!-- NG: キーボード入力とは関係ない部分に使用 -->
<p>重要なキーワードは <kbd>SEO</kbd> です。</p>
✅ 正しい書き方（<kbd> はキーボード入力にのみ使用）
<p>検索するには <kbd>Ctrl</kbd> + <kbd>F</kbd> を押してください。</p>
❌ <kbd> を通常の文章の一部として使用する
<!-- NG: キーボード入力ではなく通常の文 -->
<p><kbd>こんにちは</kbd> みなさん！</p>
✅ 正しい書き方（<kbd> はユーザー入力を示す場合に使用）
<p>名前を入力してください: <kbd>山田 太郎</kbd></p>
<kbd>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<kbd> | キーボード入力を示す | 等幅フォントで表示 | ショートカットキー、コマンド入力 |
<code> | コードを示す | 等幅フォントで表示 | プログラムのソースコード |
<samp> | コンピューター出力を示す | システムの応答を表す | コマンドの結果など |
使用上の注意点
✅ <kbd> はキーボード入力に限定して使用する
- キーボード操作の説明やショートカットキーの記述に適している。
✅ コードと組み合わせる場合は <code> や <pre> を適切に使う
<pre><code><kbd>コマンド</kbd></code></pre>のように組み合わせると見やすくなる。
関連タグ
まとめ
<kbd> タグは、HTML文書内で キーボード入力やショートカットキーを示すためのタグ です。
適切に使用すると、Webページ上でユーザーに対する操作説明がより分かりやすくなります。
