【HTML】kbdタグでキーボードの入力を示す方法

このページについて

このページではHTMLで使えるkbdの使い方を解説しています。

kbdはキーボードの略称です。テキスト中でテキストでは無く、キーボードの文字として表示っていう定義をする機能を持っています。

通常、キーボードの文字はCtrlとかそのまま表示する程度です。macの場合は⌘などの記号による表示もありますが、結局のところただのテキストです。それらを「キーボードのことですよ」ってブラウザや検索エンジンに対して伝えるのが、kbdの役割となります。

kbdはキーボード文字として定義したい単語を囲むだけでOKです。具体的には

<p>キーボードの<kbd>Ctrl</kbd>と<kbd>a</kbd>を同時押しで全て選択が行えます。</p>

このような感じですね。このように囲むことでその部分だけ表記が変わります。

キーボードのCtrlとaを同時押しで全て選択が行えます。

MacOSの場合はcommandとか⌘とか、そういうのもkbdで囲むことでcommandとか⌘に変化します。地味な変化ではありますが、これで「キーボードのこのキーだよ」っていうのが確実に伝わると思います。おそらく。

kbd固有で使える属性というのは無く、グローバル属性・イベント属性ともにサポートしています。

ここからはCSSを使用して、kbdで囲んだ文字の見た目を変化させる方法の紹介です。通常は上のように「少し変化しただけ」で、じっくりみないとわかりません。そのため以下のようにCSSを適用してみます。

kbd.kbds{
border-radius: 2px;
padding: 2px;
border: 1px solid black;
}

まず、border-radiusは「角を丸くする」という認識でOKです。2pxは「半径2pxの○を設定する」というもので、簡単に言えば角が2px分、丸くなります。

次にpaddingはシンプルに、周囲との領域を設定します。2pxということで、「要素の四辺2px分の領域を確保する」ということで周囲と若干離す設定になります。

最後にborderは線を意味します。1px solid blackは「黒色の1本線を1pxの幅で引く」という書き方になります。

これを適用するとCtrlがCtrlになります。前者のCtrlには通常のkbdを、後者のCtrlにはCSSで見た目を変更するためのクラスを付与し、実際に変更したkbdを表示させています。

こんな感じでいちいち画像を用意したりすることなく、CSSとkbdをうまく使うことで「キーボードのキーのことを言ってるよ」と伝えることができます。

kbdは文字を装飾するタグの1つですが、キーボードのことを言っているというのを読者に伝える機能を持っています。CSSと併用することでさらに分かりやすく伝えることもできるので色々とアレンジしてみましょう。