HTML

In HTML, the <kbd> element is used to represent user input actions, such as keyboard inputs and shortcuts.

kbd 要素

<kbd>要素とは？

HTML における <kbd> (keyboard) 要素は、ユーザーが入力するテキストやキー操作を表すために使われる要素です。具体的には、次のような場面で使用されることが一般的です。

目的とメリット

セマンティクスの付与
どの部分がユーザー入力やキーボード操作なのかを明確にすることで、文章の意図を理解しやすくします。
可読性の向上
通常の文章と区別して表示されるため、ユーザーがマニュアルやチュートリアルを読む際に、必要な操作箇所を把握しやすくなります。
アクセシビリティ支援
スクリーンリーダーなどが <kbd> 内のテキストを特別な「入力」テキストとして解釈する場合があります（実装により異なる）。将来的にアクセシビリティ機能が強化される可能性を考えると、正しい要素を使うことは大切です。

基本的な使い方

もっとも基本的な使い方は、単に「ユーザーが押すキー」を <kbd> で囲むことです。例えば「Enterキーを押してください」という文を以下のように書くイメージです。

HTML

<p>次の画面に進むには <kbd>Enter</kbd> キーを押してください。</p>

この場合、ブラウザによっては <kbd> 内のテキストが等幅フォントで表示されたり、若干スタイルが変わる場合があります。何もスタイルが適用されないブラウザもありますが、それでも HTML 的にはセマンティクスが付与されているため、機能的には正しいマークアップです。

実際の例

ショートカットキーの表示

ウェブアプリやソフトウェアのショートカットを説明するときには、複数のキー操作をまとめて示すことがあります。その場合も <kbd> を入れ子にして使えます。

HTML

<p>
	このショートカットを使うときは、<kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd> の順番でキーを押してください。
</p>

上記のようにネストさせると、「Ctrl + S」という組み合わせを意味することが視覚的にも明示的にも分かりやすくなります。
（※ネストするかどうかは好みによりますが、複数のキーを1つの操作と示す際に活用できます。）

コマンドラインでの入力例

コマンドラインやターミナルでのコマンド入力も <kbd> で示すことができます。単純にショートコード的に表示したい場合には以下のような記述をします。

HTML

<p>
	パッケージをインストールするには、<kbd>npm install</kbd> コマンドを実行してください。
</p>

ユーザーが「これを入力すればいいんだな」ということを明確に表現できます。

<kbd>とよく比較される要素との違い

<code>要素

目的
<code> はプログラムコードを示すための要素です。
主な違い
<kbd> は「ユーザーが入力するテキスト」を示しますが、<code> は「機械（コンピューター）で実行されるコードやコードスニペット、言語構造」を示します。
具体例
<code>
プログラムの構文例、メソッド名、変数名などをマークアップする。
<kbd>
コマンドラインやキー操作を表す。

しかし、実際には多くのウェブサイトでコマンドラインの例を <code> 要素だけで表現することがあります。これは必ずしも間違いとは言えませんが、より適切なセマンティクスを求めるのであれば、ユーザーが「キーボードで入力する」部分は <kbd> を使う方が望ましいとされています。

<samp>要素

目的
<samp> はプログラムやシステムが出力したテキストを示す要素です。
主な違い
<kbd> はユーザーが入力する内容を示すのに対し、<samp> はコンピューターが返すメッセージやログ、エラーメッセージ、結果などを表すために使われます。
具体例

HTML

<p>
	ユーザーが入力したコマンド：<kbd>npm install</kbd><br>
	システムの返答：<samp>+ package@1.0.0 installed</samp>
</p>

<var>要素

目的
<var> は、変数名や数学的な変数、パラメータなどを表す要素です。
主な違い
変数やパラメータのように、式や命令の中で変化する可能性のある要素名を示したい場合に使います。
具体例

HTML

<p>円の面積は <var>r</var>（半径）を使って π<var>r</var>^2 と表されます。</p>

<kbd> は「入力」という実際の動作を示すのに適しており、変数名とは用途が大きく異なります。

セマンティクスとアクセシビリティ

HTML5 以降、要素の意味（セマンティクス）を正しく使うことは、ページの構造やコンテンツを機械的に理解しやすくするのに役立ちます。スクリーンリーダーなど支援技術が <kbd> 要素をどのように読み上げるかはブラウザやリーダーの実装次第ですが、通常のテキストとの差別化が行われる可能性があります。

さらに、今後の仕様や支援技術では、「ユーザーのインタラクションが必要な部分である」ことを明確に示すことでユーザーエクスペリエンスを向上できる可能性があります。ユーザーがショートカットキーを使う場合など、<kbd> はその鍵となる要素になり得ます。

<kbd>要素を拡張して使う方法

多層的な入力シーケンス表現

複数段階でキー操作をする場合、以下のように入れ子にして「→」などの記号でステップを明示することも考えられます。

HTML

<p>
	ファイルを保存する手順は次のとおりです:
	<kbd>Ctrl</kbd> + <kbd>S</kbd> → <kbd>Enter</kbd>
</p>

または、先述のように <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd> とネストして書いても良いでしょう。いずれにしても、適切にステップを示すことで、ユーザーが順番を間違えないようにできます。

CSS でのカスタマイズ

デフォルトのブラウザスタイルだと、<kbd> は等幅フォントになるケースが多いです。さらに視認性を高めたい場合、以下のようなカスタマイズが可能です。

CSS

kbd {
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	padding: 2px 4px;
	border-radius: 3px;
	font-family: Menlo, Consolas, monospace;
}

HTML

<kbd>Ctrl</kbd> + <kbd>S</kbd>
Ctrl + S

これにより、キーボードのキーらしさが増し、操作を示す要素だと一目で認識しやすくなります。もちろん、サイト全体のデザインやアクセシビリティも考慮した上でカスタマイズすることが重要です。

キーボードショートカットのマークアップ

複数のキーを同時押しするようなショートカットは、わかりやすくマークアップする必要があります。

組み合わせ
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd>
順番操作
<kbd>Ctrl</kbd> → <kbd>C</kbd> → <kbd>V</kbd> のように矢印で連続操作を示す場合も

また、ショートカットのプラットフォーム差異（Windows の場合は Ctrl、macOS の場合は Command）にも注意が必要です。ドキュメントとして汎用性を持たせるなら、キーの名称を注釈しておく、あるいはOSによって分岐表示するといった工夫が求められます。

よくある誤用や注意点

<code> と同様に使ってしまう
コマンドライン例をすべて <code> だけで書いてしまうケースは多いです。ただ、ユーザーが入力する部分とコンピューターが出力する部分を厳密に区別する方が、HTML のセマンティクスとしては適切です。
<samp> にすべき内容を <kbd> にしてしまう
先述のように、コンピューターが出力するメッセージなどを <kbd> で囲むと、ユーザーに「これは入力すべきもの？」という誤解を与えかねません。
キー入力以外の目的で使ってしまう
<kbd> はあくまで「ユーザーの入力」を示すための要素です。「強調したいから」というだけで滅多に使わないようにしましょう。
キーボード以外の入力デバイスの場合
<kbd> はキーボード操作だけでなく、スマホのタップ操作やゲームパッドのボタンなど、広義で「ユーザーが押すボタン」を表すときにも使える場合があります。ただし、文脈によっては適切でない場合もあり、代わりに <button> と組み合わせたり、単純にテキストで説明したりすることが推奨される場合があります。

まとめ

<kbd> 要素は、単純なキーボード入力のマークアップに限らず、ショートカットキーやコマンドの提示、連続操作を視覚的に示すなど様々な使い方ができます。正しい文脈で使いこなすことで、ドキュメントやヘルプ記事、チュートリアルなどの可読性とユーザー体験を向上させることができます。