HTML : kbd (キーボード) の解説 | 独学 Webプログラミング!

kbd 要素はキーボード入力や音声入力、その他の入力端末からユーザーにより入力できるものを表します。

この要素には、開始タグと終了タグが必要です。
<kbd> </kbd>

これは、ユーザーに [ admin ] と入力させたい場合のサンプルです。

サンプルコード: HTML

<body>
	あなたが人であることを確認する為に手動で [ <kbd> admin </kbd> ] と入力してください。<br>
	<input type="text">
	<output> ← 入力してください。 </output>
</body>

ここでは、JavaScript を少しだけ使用していますが、それに関連する部分はサンプルコードから除外しています。

実行結果:
あなたが人であることを確認する為に手動で [ admin ] と入力してください。

サンプルコード: HTML

<body>
	最近のブラウザは、キーボードの <kbd> F12 </kbd> キーを押すとコンソールが表示されます。
</body>

CSS のコードは混乱を避けるために省略しています。

実行結果:
最近のブラウザは、キーボードの F12 キーを押すとコンソールが表示されます。

kbd 要素は複数のキー操作を促す場合、kbd 要素を入れ子にして表すことができます。
ブラウザによって違いがあるかもしれませんが、以下のキーの組み合わせで印刷フォームを開くことができると思います。

サンプルコード: HTML

<body>
	Windows = <kbd><kbd> Ctrl </kbd> + <kbd> P </kbd></kbd> <br>
	Mac = <kbd><kbd> command </kbd> + <kbd> P </kbd></kbd>
</body>

CSS のコードは混乱を避けるために省略しています。

実行結果:
Windows = Ctrl+P Mac = command+P

kbd 要素と kbd 要素の入れ子の他に kbd 要素とsamp 要素は、組み合わせて使用することができます。

<body>
	登録前の確認: ユーザー名は、<samp><kbd> YWORK </kbd></samp> 様でよろしいですね。
</body>

samp要素の中でkbd要素を使用すると、システムからユーザに送り返された入力を表します。

実行結果:
登録前の確認: ユーザー名は、 YWORK 様でよろしいですね。

<body>
	画面に表示される [<kbd><samp> 保存する </samp></kbd>] のボタンをクリックしてください。
</body>

これはメニュー項目の名前や画面上に表示されているボタンの名前など、システムによって表示された文字列を表します。

実行結果:
画面に表示される [ 保存する ] のボタンをクリックしてください。

Title