HTML5における<kbd>タグの使い方

<kbd>タグは、ユーザーが入力する内容を表す要素です。今回は、HTML5における<kbd>タグの使い方をご紹介します。

HTML5における<kbd>タグの使い方

<kbd>要素は、ユーザーが入力する内容を表す要素です。「kbd」というのは「keyboard」の略ですが、キーボード入力の他、音声入力などの場合もあります。<kbd>で囲んだ文字は多くの一般的なブラウザで、等幅フォントで表示されます。

<kbd>〜</kbd>

基本的な使い方は上記のように、<kbd>で入力する内容を囲むだけです。基本的な文字列の場合は、上記の使い方ですが、入力して欲しいキーを表すときは、以下のように記述します。

<kbd><kbd>Shift</kbd></kbd> キーを押す。

タグをこのように入れ子にする必要があるので注意しましょう。また、上記のものは入力するキーが単体の場合です。複数の場合はまた記述方法が異なります。例えば、「切り取りはcommand+Xです。」のような内容の場合、複数のキーが登場します。その場合は、以下のように記述します。

切り取りは<kbd><kbd>Command</kbd> + <kbd>X</kbd></kbd> です。

キーをそれぞれ<kbd>で囲い、更に2つのキーの記述をまとめて<kbd>で囲う形になります。

基本的な使い方は以上になります。他にも<samp>要素を入れ子として使用し、メニューなどのマークアップに使用することもあります。