HTML の kbd タグを使ったキーボード入力要素

はじめに

HTML <kbd> タグは、Webページ上のユーザー用にキーボード入力要素を作成するために使用されます。このタグは、キーボードからのテキスト、音声入力、またはキーボードによるその他のテキスト入力形式を表すインラインテキストの範囲を表します。

この実験では、WebページでHTML kbdタグを使用してキーボード入力要素を作成する方法を学びます。

注: index.html でコーディングを練習し、Visual Studio CodeでHTMLを書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でWebサービスを実行します。その後、Web 8080 タブを更新してWebページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70783{{"HTML のキーボード入力"}} html/head_elems -.-> lab-70783{{"HTML のキーボード入力"}} html/doc_flow -.-> lab-70783{{"HTML のキーボード入力"}} html/inter_elems -.-> lab-70783{{"HTML のキーボード入力"}} end

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> タグをネストすることができます。

システムによる応答済みの入力を指定するために、<samp> タグの中に <kbd> タグをネストするために、<body> タグの中に次のコードを追加します。

<p>
  The entered value is:<samp><kbd>Enter Value</kbd>:</samp>
</p>

まとめ

この実験では、WebページでHTML <kbd> タグを使ってキーボード入力要素を作成する方法を学びました。Webページ上でキーボード入力要素を表す箇所にこのタグを使うことができます。<kbd> タグは、システムによってユーザーに対して応答された入力を指定するために、<samp> タグの中にネストすることができます。

HTML のキーボード入力

はじめに

Skills Graph

HTMLファイルをセットアップする

タグを使ってキーボード入力要素を追加する

<samp> タグの中に <kbd> タグをネストする

まとめ

`タグを使ってキーボード入力要素を追加する`

`<samp>` タグの中に `<kbd>` タグをネストする