はじめに
HTML <kbd> タグは、Web ページ上のユーザー用にキーボード入力要素を作成するために使用されます。このタグは、キーボードからのテキスト、音声入力、またはキーボードによるその他のテキスト入力形式を表すインラインテキストの範囲を表します。
この実験では、Web ページで HTML kbd タグを使用してキーボード入力要素を作成する方法を学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。
HTML ファイルをセットアップする
index.html という名前の新しい HTML ファイルを作成し、HTML ドキュメントの基本構造をセットアップします。
ドキュメント構造をセットアップするために、次のコードを index.html ファイルに追加します。
<!doctype html>
<html>
<head>
<title>Keyboard Input Elements using HTML kbd Tag</title>
</head>
<body>
<!-- Add content here -->
</body>
</html>
タグを使ってキーボード入力要素を追加する
Web ページ上でキーボード入力要素を表す箇所に、<kbd> タグを使ってキーボード入力要素を追加します。
「CTRL + V」コマンドのキーボード入力要素を定義するために、<body> タグの中に次のコードを追加します。
<p>To paste text press <kbd>Ctrl</kbd> + <kbd>V</kbd></p>
次に、「Shift + Enter」コマンドのキーボード入力要素を定義するために、<body> タグの中に次のコードを追加します。
<p>To create a new line press <kbd>Shift</kbd> + <kbd>Enter</kbd></p>
タグの中にタグをネストする
入力がシステムによってユーザーに対して応答されたことを指定したい場合は、<samp> タグの中に <kbd> タグをネストすることができます。
システムによる応答済みの入力を指定するために、<samp> タグの中に <kbd> タグをネストするために、<body> タグの中に次のコードを追加します。
<p>
The entered value is:<samp><kbd>Enter Value</kbd>:</samp>
</p>
まとめ
この実験では、Web ページで HTML <kbd> タグを使ってキーボード入力要素を作成する方法を学びました。Web ページ上でキーボード入力要素を表す箇所にこのタグを使うことができます。<kbd> タグは、システムによってユーザーに対して応答された入力を指定するために、<samp> タグの中にネストすることができます。
