シュウ

今回は【HTML】kbd要素の使い方、キーボードのキーを表す要素!
の解説になります！

こんな方に読んでほしい

• HTMLを学び始めた方へ
• HTMLについて学びたい方へ
• 今回はkbd要素(キーボードのキー)について解説しております。

kbd要素とは、キーボードで入力する内容(テキスト)を表す際に使用します。
kbdとは、「keyboard」の略になります。

Chrome	Safari	Firefox	IE	Edge

kbd要素について

kbd要素とは、キーボードで入力する内容(テキスト)を表す際に使用します。
キーボードコマンド以外にも、アプリケーションの操作説明、音声コマンドなどに、使われるタグです。

ただし、kbdタグを使用すると、等幅フォントで表示されるため、キーボードらしい見た目で表示はされません。ですが、CSSでキーボード風の装飾は可能になってきます。
書き方は以下のようになります。

次に<kbd>Enter</kbd>キーを押してください。

文字列で使う

上記で解説したのは、「文字列」になります。
シンプルに、ユーザーが主にキーボードで入力する内容「Enter」も文字列にしました。
「キー」は、文字列には含まれないので、キーの名前だけにしておきましょう。

次に<kbd>Enter</kbd>キーを押してください。

音声コマンドとして使う

音声入力をするような場合でも、kbdタグを使うことが可能になります。
「OK Google」、「Hey, Siri!」などの音声入力になります。

iPhoneに向かって<kbd>Hey Siri、今日の天気は？</kbd>と聞いてみました。

キー操作として使う

kbdを入れ子にすることでキー操作を表します。
一連のキー操作全体をkbdで囲み、1つ1つのキーをkbdで囲みます。

下記では、「command + C」の一連の操作をまとまりとしてkbdで囲んでいます。

Macでは、コピーする際には、<kbd><kbd>command</kbd> + <kbd>C</kbd></kbd> キーを押します。

CSSで整える

kbdタグを使用すると、等幅フォントで表示されるため、キーボードらしい見た目で表示はされません。
そこでCSSを使うことでよりキーボード風に見せることが可能になってきます。
書き方は以下のようになります。

Windows <kbd>Ctrl</kbd> + <kbd>C</kbd>
Mac <kbd>command</kbd> + <kbd>C</kbd> キーを押します。

/*--CSS--*/
kbd {
	font-size: 0.9em;
	padding: 0.3em 0.6em; 
	background-color: #e0e0e0;
	border-bottom: 3px solid #d1d1d1;
	border-radius: 5px;
}

kbdタグはインラインボックスで表示されるため、上下のマージンや幅を指定することができないので注意が必要です。

インラインボックスとは

display:inline(インライン)とblock(ブロック)の違いを解説！

inline、blockの使い方を解説しております。

まとめ

今回はこれで以上です。

Chrome	Safari	Firefox	IE	Edge

< 前の記事

【HTML】hr要素の使い方、段落の区切りを示す要素!

次の記事 >

【HTML】ruby要素の使い方、テキストにルビ(ふりがな)を振ろう!