1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです！笑
こんな方に読んでほしい
HTMLについて学びたい方へkbd要素とは、キーボードで入力する内容(テキスト)を表す際に使用します。
kbdとは、「keyboard」の略になります。
 Chrome |  Safari |  Firefox |  IE |  Edge |
|---|---|---|---|---|
[記事の内容]
kbd要素とは、キーボードで入力する内容(テキスト)を表す際に使用します。
キーボードコマンド以外にも、アプリケーションの操作説明、音声コマンドなどに、使われるタグです。
ただし、kbdタグを使用すると、等幅フォントで表示されるため、キーボードらしい見た目で表示はされません。ですが、CSSでキーボード風の装飾は可能になってきます。
書き方は以下のようになります。
kbd要素について
次にEnterキーを押してください。
次に<kbd>Enter</kbd>キーを押してください。
上記で解説したのは、「文字列」になります。
シンプルに、ユーザーが主にキーボードで入力する内容「Enter」も文字列にしました。
「キー」は、文字列には含まれないので、キーの名前だけにしておきましょう。
文字列で使う
次に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> キーを押します。
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タグはインラインボックスで表示されるため、上下のマージンや幅を指定することができないので注意が必要です。
今回はこれで以上です。
kbd要素とは、キーボードで入力する内容(テキスト)を表す際に使用します。kbdタグは、インラインボックスで表示されるため、上下のマージンや幅の指定ができません。| Chrome | Safari | Firefox | IE | Edge |
|---|---|---|---|---|
2021.07.27
2021.07.09
2021.07.02
2021.06.29
2023.09.28
2023.09.14
2023.08.24
2023.08.10
2023.07.27
2023.07.13
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2020 shu-naka-blog
