SHU BLOG

BLOG NEWS ブログ

TITLE

【HTML】kbd要素の使い方、キーボードのキーを表す要素!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge

kbd要素について

kbd要素について

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> キーを押します。

CSSで整える

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タグは、インラインボックスで表示されるため、上下のマージンや幅の指定ができません。
ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge
スポンサーリンク

SHU

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

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top