HTML［kbd要素］ユーザーが入力する内容を表す

<kbd></kbd>

更新日	2022/06/28
仕様	HTML Living Standard
分類	フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所	フレージング・コンテンツが置ける場所
内容	フレージング・コンテンツ

kbd要素は、ユーザーが入力する内容を表します。主にキーボードからの入力を表しますが、音声入力やメニュー選択を表す際にも使用することができます。

この要素は、操作方法を説明する場合などに使用することになります。

デフォルトスタイル（等幅フォント）


<kbd>入力する内容を表します</kbd>

kbd要素は、その使用方法により表す内容が変化します。

kbd要素を単体で使用

このkbd要素は、ユーザーが入力する内容であることを表します。このように入力してくださいということを伝えます。

次の例は、入力するテキストを表しています。

<p>入力欄に<kbd>あいうえお</kbd>と入力してください。</p>

kbd要素内でkbd要素を使用

内側のkbd要素は、キーボードのキーや入力の1つの単位を表します。例えば、このキーを操作してくださいといったことを伝える場合に使用します。

次の例は、1つのキーを表しています。

<p><kbd><kbd>Enter</kbd></kbd>キーを押してください。</p>

次の例は、複数のキーを同時に押してもらうことを表しています。

<p>スクリーンショットを撮る場合は、<kbd><kbd>Alt</kbd> + <kbd>Prt Sc</kbd></kbd>を押してください。</p>

kbd要素内でsamp要素を使用

このsamp要素は、システム出力に基づいた入力を表します。システムによって出力された何か（メニュー項目など）を操作してもらう場合に使用します。

次の例は、システムによって表示されるメニュー項目を表しています。

<p>メニュー内の<kbd><kbd><samp>ソースを表示</samp></kbd></kbd>を選択すると、ソースコードを確認することができます。</p>

次の例は、システムによって表示される複数の選択肢を表しています。

<p>質問の答えを、<kbd><kbd><samp>はい</samp></kbd>|<kbd><samp>いいえ</samp></kbd>|<kbd><samp>どちらでもない</samp></kbd></kbd>の中から選択してください。</p>

上記は、次のように省略して記述することも可能です。

<p>質問の答えを、<kbd>はい|いいえ|どちらでもない</kbd>の中から選択してください。</p>

samp要素内でkbd要素を使用

このkbd要素は、システムによって返された入力内容を表します。入力した内容が、そのまま画面上に表示されている状態を意味します。

次の例は、入力した内容（山田）が、システムによって返されている状態を表しています。

<p>名前の欄に<kbd>山田</kbd>と入力すると、<samp>こんにちは、<kbd>山田</kbd>さん。</samp>と表示されます。</p>

要素のデフォルトスタイル

一般的なブラウザでは、この要素内のテキストは等幅フォントで表示されます。

ブラウザによっては、等幅フォントのテキストが小さめの文字サイズで表示されます。

入力する内容を表します

上記の表示例には、このページのスタイル（font-size: 100%）が適用されてしまっています。そのため、本来は小さめの文字サイズで表示されるブラウザでも、通常の文字サイズで表示されてしまいます。

旧HTMLからの変更点

HTML5：入れ子にした場合の意味（キーボードのキー）と、samp要素との関係が追加されました。

使用例


<p>入力欄に<kbd>あいうえお</kbd>と入力してください。</p>

<p>スクリーンショットを撮る場合は、<kbd><kbd>Alt</kbd> + <kbd>Prt Sc</kbd></kbd>を押してください。</p>

<p>メニュー内の<kbd><kbd><samp>ソースを表示</samp></kbd></kbd>を選択すると、ソースコードを確認することができます。</p>

<p>名前の欄に<kbd>山田</kbd>と入力すると、<samp>こんにちは、<kbd>山田</kbd>さん。</samp>と表示されます。</p>

表示例

入力欄にあいうえおと入力してください。

スクリーンショットを撮る場合は、Alt + Prt Scを押してください。

メニュー内のソースを表示を選択すると、ソースコードを確認することができます。

名前の欄に山田と入力すると、こんにちは、山田さん。と表示されます。

軽めにスタイルを設定した例


<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<style>

/* kbd要素の前後に括弧を付ける */
kbd::before {
content: "「";
}
kbd::after {
content: "」";
}

/* 入れ子にされたkbd要素の括弧を外す */
kbd kbd::before,
samp kbd::before {
content: "";
}
kbd kbd::after,
samp kbd::after {
content: "";
}

/* 入れ子にされたkbd要素に下線を付ける */
kbd kbd,
samp kbd {
text-decoration: underline;
}

/* samp要素を太字にする */
samp {
font-weight: bold;
}

</style>

</head>
<body>

<p>入力欄に<kbd>あいうえお</kbd>と入力してください。</p>

<p>スクリーンショットを撮る場合は、<kbd><kbd>Alt</kbd> + <kbd>Prt Sc</kbd></kbd>を押してください。</p>

<p>メニュー内の<kbd><kbd><samp>ソースを表示</samp></kbd></kbd>を選択すると、ソースコードを確認することができます。</p>

<p>名前の欄に<kbd>山田</kbd>と入力すると、<samp>こんにちは、<kbd>山田</kbd>さん。</samp>と表示されます。</p>

</body>
</html>