<kbd></kbd>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 フレージング・コンテンツ

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

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


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

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

kbd要素を単体で使用

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

<kbd>あいうえお</kbd>
kbd要素内でkbd要素を使用

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

<kbd><kbd>Alt</kbd></kbd>
kbd要素内でsamp要素を使用

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

<kbd><samp>メニュー項目</samp></kbd>
samp要素内でkbd要素を使用

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

<samp><kbd>入力内容を表示</kbd></samp>

kbd要素を単体で使用

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

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

kbd要素内でkbd要素を使用

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

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

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

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

kbd要素内で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要素を使用

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

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

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

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

  • ブラウザによっては、等幅フォントのテキストが小さめの文字サイズで表示されます。
入力する内容を表します
  • 上記の表示例には、このページのスタイル(font-size: 100%)が適用されてしまっています。そのため、本来は小さめの文字サイズで表示されるブラウザでも、通常の文字サイズで表示されてしまいます。
HTML5における変更点
  • 入れ子にした場合の意味(キーボードのキー、等)が追加されました。
  • samp要素との関係が追加されました。

使用例


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

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

表示例

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

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

  • 上記のkbd要素内のテキストには、このページのスタイルが適用されてしまっています。そのため、本来は小さめの文字サイズで表示されるブラウザでも、通常の文字サイズで表示されてしまいます。
スタイルを設定した例

<!DOCTYPE html>
<html>
<head>

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

<style>

kbd, samp {
font-size: 100%;
}

/* 入力テキストと出力サンプルに鉤括弧を付ける */
kbd.input:before,
samp:before {
content: "「";
}
kbd.input:after,
samp:after {
content: "」";
}

/* kbd要素内のsamp要素は鉤括弧を外す */
kbd samp:before {
content: "";
}
kbd samp:after {
content: "";
}

/* 選択肢に角括弧を付ける */
kbd.select:before {
content: "[";
}
kbd.select:after {
content: "]";
}

/* キー部分のデザイン */
kbd.key kbd {
margin: 0 0.3em;
padding: 0 0.3em;
background-color: #f1f1b8;
border: 1px solid;
border-color: #fcfced #b1b123 #b1b123 #fcfced;
}

/* メニュー部分のデザイン */
kbd.menu kbd {
margin: 0 0.3em;
padding: 0 0.3em;
background-color: #dfdfdf;
border: 1px solid;
border-color: #f9f9f9 #9f9f9f #9f9f9f #f9f9f9;
}

/* 返される入力内容を太字にする */
samp kbd {
font-weight: bold;
}

</style>

</head>
<body>

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

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

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

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

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

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

</body>
</html>

表示例

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

Enterキーを押してください。

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

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

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

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