今回は【HTML】kbd要素の使い方、キーボードのキーを表す要素!
の解説になります!
こんな方に読んでほしい
- HTMLを学び始めた方へ
-
HTML
について学びたい方へ - 今回はkbd要素(キーボードのキー)について解説しております。
kbd
要素とは、キーボードで入力する内容(テキスト)を表す際に使用します。
kbdとは、「keyboard」の略になります。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
kbd要素について
kbd
要素とは、キーボードで入力する内容(テキスト)を表す際に使用します。
キーボードコマンド以外にも、アプリケーションの操作説明、音声コマンドなどに、使われるタグです。
ただし、kbd
タグを使用すると、等幅フォントで表示されるため、キーボードらしい見た目で表示はされません。ですが、CSSでキーボード風の装飾は可能になってきます。
書き方は以下のようになります。
kbd要素について
次にEnterキーを押してください。
次に<kbd>Enter</kbd>キーを押してください。
文字列で使う
上記で解説したのは、「文字列」になります。
シンプルに、ユーザーが主にキーボードで入力する内容「Enter」も文字列にしました。
「キー」は、文字列には含まれないので、キーの名前だけにしておきましょう。
次に<kbd>Enter</kbd>キーを押してください。
音声コマンドとして使う
音声入力をするような場合でも、kbd
タグを使うことが可能になります。
「OK Google」、「Hey, Siri!」などの音声入力になります。
音声コマンドとして使う
iPhoneに向かってHey Siri、今日の天気は?と聞いてみました。
iPhoneに向かって<kbd>Hey Siri、今日の天気は?</kbd>と聞いてみました。
キー操作として使う
kbd
を入れ子にすることでキー操作を表します。
一連のキー操作全体をkbd
で囲み、1つ1つのキーをkbd
で囲みます。
下記では、「command + C」の一連の操作をまとまりとしてkbd
で囲んでいます。
キー操作として使う
Macでは、コピーする際には、command + C キーを押します。
Macでは、コピーする際には、<kbd><kbd>command</kbd> + <kbd>C</kbd></kbd> キーを押します。
CSSで整える
kbdタグを使用すると、等幅フォントで表示されるため、キーボードらしい見た目で表示はされません。
そこでCSSを使うことでよりキーボード風に見せることが可能になってきます。
書き方は以下のようになります。
CSSで整える
コピーのショートカット
Windows Ctrl + C
Mac command + C キーを押します。
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の使い方を解説しております。
まとめ
今回はこれで以上です。
- POINT
-
kbd
要素とは、キーボードで入力する内容(テキスト)を表す際に使用します。 - キーボードコマンド以外にも、アプリケーションの操作説明、音声コマンドなどに、使われるタグです。
- CSSで、キーボード風に見せることが可能になります。
-
kbd
タグは、インラインボックスで表示されるため、上下のマージンや幅の指定ができません。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
スポンサーリンク

SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事