HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのkbdタグとは？キーボード入力を定義する使い方を解説

HTMLの<kbd>タグは、キーボードからの入力（キーボード入力）を定義するための要素です。ユーザーにキーボードで入力してもらいたいテキストを表す際に使用します。たとえば、コピー操作のショートカットキー「Ctrl+C」や、画面を閉じる「Esc」キーなどをマークアップするときに便利です。

多くのブラウザでは、<kbd>タグで囲まれたテキストは等幅フォントで表示され、通常の文章と視覚的に区別できるようになります。また、<kbd>はフレーズタグ（phrase tag）の一種であり、意味を持ったセマンティックなマークアップとしても活用できます。

それでは、<kbd>タグの実装例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>ショートカットキー</h2>
   <p>以下のショートカットキーを使用します − </p>
   <p><strong>切り取り</strong> − <kbd>CTRL</kbd>+<KBD>X</kbd></p>
   <p><strong>コピー</strong> − <kbd>CTRL</kbd>+<KBD>C</kbd></p>
   <p><strong>貼り付け</strong> − <kbd>CTRL</kbd>+<KBD>V</kbd></p>
   <p><strong>元に戻す</strong> − <kbd>CTRL</kbd>+<KBD>Z</kbd></p>
</body>
</html>

表示結果

HTMLのkbdタグとは？キーボード入力を定義する使い方を解説

上記の例では、複数のショートカットキーを設定しています。たとえば「切り取り」の部分は次のように記述しています。

<strong>切り取り</strong> − <kbd>CTRL</kbd>+<KBD>X</kbd>

ショートカットキーは<kbd>要素を使って表現します。たとえば「CTRL + X」は、次のように各キーを個別に<kbd>タグで囲み、「+」でつなげて記述します。

<kbd>CTRL</kbd>+<KBD>X</kbd>

ポイントまとめ

  • <kbd>タグは、ユーザーが押すキーやキーボード入力を意味的に示す要素です。
  • 既定のスタイルは等幅フォントですが、CSSで自由にカスタマイズ可能です。
  • プログラムの出力を表す<samp>タグや、コードを表す<code>タグと組み合わせて使うこともできます。
  1. HTML DOMのKbdオブジェクトとは？使い方をサンプルコード付きで解説

    KbdオブジェクトとはHTML DOMのKbdオブジェクトは、HTMLの<kbd>要素に対応するオブジェクトです。<kbd>要素は、ユーザーがキーボードから入力するテキスト（キー入力やコマンドなど）を表すインライン要素で、デフォルトでは等幅フォント（モノスペースフォント）で表示されます。JavaScriptを使ってこのオブジェクトを操作することで、ページ上に動的にキーボード入力を表す要素を生成したり、スタイルを変更したりすることが可能です。構文<kbd>要素を新しく作成するための基本構文は以下のとおりです。var kbdObject = document.c

  2. HTMLのcolgroupタグとは？テーブルの列をまとめてスタイルする方法

    <colgroup>タグとは<colgroup>タグは、HTMLテーブル内の1つ以上の列（カラム）をひとつのグループとしてまとめるための要素です。このタグを使うことで、グループに含まれるすべての列に対して、まとめてスタイルを適用できます。セルや行ごとに個別にスタイルを記述する必要がないため、コードがすっきりし、テーブル全体のデザイン管理も効率的になります。主な属性span − 列グループが対象とする列の数を指定します。たとえば「span=3」と設定すると、先頭から3列分が同じグループとして扱われます。使用例それでは、<colgroup>タグを使った実際の実装