kbdタグとは?|ユーザーが入力する内容を表そう

kbdタグとは?|ユーザーが入力する内容を表そう
博士
キーボードの操作など、ユーザーが入力する内容を表すときは<kbd>タグを使おう。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<kbd>タグとは

 

<kbd>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所フレージング・コンテンツが期待される場所
内容フレージング・コンテンツ


 
 
<kbd>タグは、ユーザーがコンピュータに入力する内容を表す際に使用するタグです。
通常、入力にはキーボードを使うことが多いですが、音声入力やメニュー選択を表す際にも使用できます。
 
 
博士
<kbd>は「keyboard」の略で、操作方法を説明するときなどに使用するタグじゃ。
 
 

使用例

 
 

kbd要素内でkbd要素を使用

kbd要素内でkbd要素を使用することで、キーボードのキーや入力の1つの単位を表すことができます。
例えば、「Enter」キーを押してもらいたい場合は、以下のように記述します。

 
 
また、複数のキーを同時に押してもらいたい場合は、以下のように記述します。

 
 

kbd要素内でsamp要素を使用

<kbd>~</kbd>の中にsamp要素を配置した場合は、システム出力からの入力内容を表します。

 
 
博士
メニュー項目など、システムによって出力されたものを操作してもらう場合に使用しよう。
 
 

samp要素内でkbd要素を使用

<samp>~</samp>の中にkbd要素を配置した場合は、システムによって返された入力内容を表します。

 
 
博士
入力した内容が、そのまま画面上に表示されている状態を意味しているぞ。
 
 

まとめ

<kbd>タグは、ユーザーがコンピュータに入力する内容を表す際に使用します。
キーボードの操作方法などを説明するとき使いましょう。
 
 

博士
入力内容のスタイルは、スタイルシートでアレンジすることが可能じゃ。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








kbdタグとは?|ユーザーが入力する内容を表そう