<kbd></kbd>
| ブラウザ |
|
|---|---|
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | フレージング・コンテンツ |
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を押してください。
メニュー内のソースを表示を選択すると、ソースコードを確認することができます。
質問の答えを、はい|いいえ|どちらでもないの中から選択してください。
名前の欄に山田と入力すると、こんにちは、山田さん。と表示されます。