【HTML】kbd要素の使い方【ユーザーによる入力(キーボード入力や音声入力など)を表します】

Program

kbd要素を使えば、ユーザーによる入力内容であることを表すことができます。

kbd要素の基本的な使い方(ユーザーに「文字列の入力」を促す)

まずは、以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>kbd要素</title>
</head>
<body>
<p>以下の項目に<kbd>TOKYO</kbd>と入力してください。</p>
</body>
</html>

body要素の中に、「文のかたまり(段落)」を示すp要素があります。

p要素の中には、「以下の項目にTOKYOと入力してください。」と書かれた文章があります。

また、TOKYOと書かれたフレーズは、kbd要素でマークアップされています。

このため、ブラウザの表示結果を見ると、kbd要素でマークアップされたTOKYOの文字は、文字の大きさが少し縮小した形態で表示されています。

そして、kbd要素でマークアップされることで、TOKYOの文字がユーザーに文字列の入力を促す内容であることがブラウザに認識されると共に、クローラーに補足されて検索エンジンに収集されることになります。

ユーザーに「キー操作」の入力を促す

次に、kbd要素を使ってユーザーに「キー操作」を促すための例を紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>kbd要素</title>
</head>
<body>
<p>以下の項目に<kbd>TOKYO</kbd>と入力してください。</p>
<p>ウィンドウを閉じる場合は<kbd>ESC</kbd>キーを押してください。</p>
</body>
</html>

先ほどのプログラムに、kbd要素を含むp要素を追加しました。

追加したp要素の中には、「ウィンドウを閉じる場合はESCキーを押してください。」と書かれた文章があります。

そして、ESCと書かれたフレーズは、kbd要素でマークアップされています。

このため、ユーザーにESCキーのキー操作を促す内容であることがブラウザに認識されると共に、クローラーに補足されて検索エンジンに収集されることになります。

ユーザーに画面上の「メニュー項目名」の操作を促す

次に、kbd要素を使って、ユーザーにパソコンやスマホの画面上の「メニュー項目名」の操作を促すための例を紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>kbd要素</title>
</head>
<body>
<p>以下の項目に<kbd>TOKYO</kbd>と入力してください。</p>
<p>ウィンドウを閉じる場合は<kbd>ESC</kbd>キーを押してください。</p>
<p>右クリックをして「<kbd>新規作成</kbd>」を選択してください。</p>
</body>
</html>

先ほどのプログラムに、kbd要素を含むp要素を更に追加しました。

追加したp要素の中には、『右クリックをして「新規作成」を選択してください。』と書かれた文章があります。

そして、『新規作成』と書かれたフレーズは、kbd要素でマークアップされています。

このため、ユーザーに、画面上に表示されたメニュー項目である『新規作成』の操作を促す内容であることがブラウザに認識されると共に、クローラーに補足されて検索エンジンに収集されることになります。

ユーザーに「音声入力」を促す

次に、kbd要素を使って、ユーザーに「音声入力」を促す例を紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>kbd要素</title>
</head>
<body>
<p>以下の項目に<kbd>TOKYO</kbd>と入力してください。</p>
<p>ウィンドウを閉じる場合は<kbd>ESC</kbd>キーを押してください。</p>
<p>右クリックをして「<kbd>新規作成</kbd>」を選択してください。</p>
<p>音楽を停止する場合には「<kbd>アレクサ、切って</kbd>」と言ってください。</p>
</body>
</html>

先ほどのプログラムに、kbd要素を含むp要素を追加しました。

追加したp要素の中には、『音楽を停止する場合には「アレクサ、切って」と言ってください。』と書かれた文章があります。

そして、『アレクサ、切って』と書かれたフレーズは、kbd要素でマークアップされています。

このため、ユーザーに、『アレクサ、切って』との内容の音声により操作を促す内容であることがブラウザに認識されると共に、クローラーに補足されて検索エンジンに収集されることになります。

kbd要素の入れ子状の記述により『ひとまとまりのキー操作』を促す

次に、kbd要素の入れ子状の記述により、ユーザーに『ひとまとまりのキー操作』を促す例を紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>kbd要素</title>
</head>
<body>
<p>以下の項目に<kbd>TOKYO</kbd>と入力してください。</p>
<p>ウィンドウを閉じる場合は<kbd>ESC</kbd>キーを押してください。</p>
<p>右クリックをして「<kbd>新規作成</kbd>」を選択してください。</p>
<p>音楽を停止する場合には「<kbd>アレクサ、切って</kbd>」と言ってください。</p>
<p>元の状態に戻す場合は、キーボードの<kbd><kbd>Ctrl</kbd>+<kbd>Z</kbd></kbd>の操作をしてください。</p>
</body>
</html>

先ほどのプログラムに、kbd要素を含むp要素を追加しました。

追加したp要素の中には、『元の状態に戻す場合は、キーボードのCtrl+Zの操作をしてください。』と書かれた文章があります。

そして、『Ctrl+Z』と書かれたフレーズはkbd要素でマークアップされ、更に、『Ctrl』および『Z』もそれぞれkbd要素でマークアップされています。つまり、追加したp要素では、kbd要素が入れ子状で記述されています。

このため、ユーザーに、『Ctrl+Z』のひとまとまりの操作(キー操作)を促す内容であることがブラウザに認識されると共に、クローラーに補足されて検索エンジンに収集されることになります。

各種ブラウザでの表示結果

kbd要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
kbd要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、kbd要素の使い方について、ご参考になさってください!

タイトルとURLをコピーしました