HTML kbd要素の使い方｜キーボード入力の表現と CSS でキー風に装飾

▶

編集

この記事の要点

kbd 要素はキーボード入力や音声コマンドなどユーザーからの入力を表す
デフォルトでは等幅フォントでインライン表示される (ブラウザの UA スタイル)
組み合わせ表記は <kbd>Ctrl</kbd> + <kbd>C</kbd> のようにネスト/連続して書く
CSS で枠線・影をつけるとキーキャップ風のリアルな見た目になる
関連: samp (プログラム出力) / code (コード片) / var (変数) と組み合わせて使う

kbd 要素とは

kbd 要素 (keyboard input) はユーザーからの入力を表すための HTML 要素です。物理キーボード入力に限らず、音声コマンドや UI 上のボタン操作なども含めて「ユーザーがコンピューターに与える指示」全般を意味します。

基本構文

<p>ファイルを保存するには <kbd>Ctrl</kbd> + <kbd>S</kbd> を押してください。</p>

<p>Mac では <kbd>Cmd</kbd> + <kbd>S</kbd>。</p>

<p>音声入力で<kbd>「明日の天気は？」</kbd>と話しかけます。</p>

デフォルトではブラウザの UA スタイルにより等幅フォント (monospace) のインライン要素として表示されます。

使うべき場面

用途	例
ショートカットキー	`<kbd>Ctrl</kbd>+<kbd>S</kbd>`
ターミナルのコマンド入力	`<kbd>ls -la</kbd>`
音声コマンド	`<kbd>OK Google</kbd>`
UI ボタン名	`<kbd>保存</kbd> ボタンをクリック`

kbd / samp / code / var の違い

要素	意味	例
`kbd`	ユーザー入力	Ctrl+S を押す
`samp`	プログラム出力 (sample output)	"Hello, World!" 等の標準出力
`code`	コード片	`const x = 1;`
`var`	変数や数学変数	x, n

これら 4 つはセマンティックに区別されており、適切に使い分けるとスクリーンリーダーや検索エンジンに意味が正しく伝わります。

ネストして使う典型例

<!-- コマンドを入力して、出力結果を見る一連の流れ -->
<p>ターミナルで <kbd>date</kbd> を実行すると、
<samp>Thu Jun 11 14:30:00 JST 2026</samp> のように表示されます。</p>

<!-- kbd の中に kbd をネスト (公式パターン) -->
<p>メニューから <kbd><kbd>ファイル</kbd> → <kbd>保存</kbd></kbd> を選ぶ。</p>

CSS でキーキャップ風スタイリング

UA デフォルトでは等幅文字になるだけで地味なので、CSS でキーキャップ風の見た目にするのが定番です。

kbd {
    display: inline-block;
    padding: 2px 6px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.9em;
    color: #1f2937;
    background: #f5f5f5;
    border: 1px solid #cbd5e1;
    border-bottom-width: 2px;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.1);
    line-height: 1;
}

<p>保存は <kbd>Ctrl</kbd> + <kbd>S</kbd>。<br>
取り消しは <kbd>Ctrl</kbd> + <kbd>Z</kbd>。</p>

アクセシビリティ

スクリーンリーダーは kbd を特別に読み上げないことが多い (環境差あり)。視覚的な手掛かりに頼らない場合は補足説明を併記
キー名は ASCII で書くと読み上げやすい。「コントロール+エス」のように補足を入れるとさらに親切
CSS で見た目をキー風にしても、コンテンツとしてはテキストのままなのでコピペや検索に問題なし

FAQ

Q: kbd の中に + を入れる？外に出す？
A: 仕様上どちらでも可だが、外に出す方が多数派: <kbd>Ctrl</kbd> + <kbd>S</kbd>。

Q: 矢印キーはどう書く？
A: <kbd>↑</kbd> や <kbd>↑</kbd>。文字参照で書けば文字化けしにくい。

Q: code と kbd どちらにすべきか迷う
A: 「ユーザーが押す/打ち込む」なら kbd。「ソースコードの一部」なら code。コマンドを示すなら入力強調で kbd の方が適切。

応用: ショートカット一覧テーブル

ヘルプページなどで操作を一覧表示する場合、kbd とテーブルの組み合わせが定番です。

<table>
  <thead>
    <tr><th>操作</th><th>Windows / Linux</th><th>Mac</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>保存</td>
      <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td>
      <td><kbd>Cmd</kbd> + <kbd>S</kbd></td>
    </tr>
    <tr>
      <td>コピー</td>
      <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td>
      <td><kbd>Cmd</kbd> + <kbd>C</kbd></td>
    </tr>
    <tr>
      <td>貼り付け</td>
      <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td>
      <td><kbd>Cmd</kbd> + <kbd>V</kbd></td>
    </tr>
    <tr>
      <td>元に戻す</td>
      <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td>
      <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td>
    </tr>
    <tr>
      <td>すべて選択</td>
      <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td>
      <td><kbd>Cmd</kbd> + <kbd>A</kbd></td>
    </tr>
  </tbody>
</table>

セマンティック HTML としての立ち位置

kbd は HTML4 時代からある古参のフレージング要素ですが、現代のセマンティック HTML 文化のなかでも立派な居場所があります。div や span だけでマークアップすると、機械が「これは入力の指示だ」と理解できないからです。

検索エンジン: コードブロック内の kbd をコード例の文脈と解釈しやすい
支援技術: スクリーンリーダーで読み上げ調整 (将来的な拡張も含む)
スタイリング: CSS で一括して見た目を制御しやすい
機械翻訳: 翻訳対象から外せる場合がある

ページ一覧

その他