アップデート 2024年7月17日

★HTML Living Standard リファレンス

山田太郎

テック・リード

当サイトのリンクからサインアップしても、利用者の方に追加料金はかかりませんが、私たちが紹介手数料を受け取る場合があります。

<kbd> …… ユーザー入力を表す
Internet Explorer

<kbd>タグは、ユーザー入力を表す際に使用します。

kbd要素は、通常はユーザーによるキーボード入力を表しますが、
音声コマンド入力などのキーボード以外の入力を表す際にも使用できます。

kbd要素とsamp要素の併用

samp要素の子孫要素としてkbd要素が配置される場合、
ユーザーが入力した内容をシステムが確認表示していることを表します。

kbd要素の子孫要素としてsamp要素が配置される場合、
システム出力に基づくユーザー入力であることを表します。
例えば、ユーザーがメニュー項目を呼び出して入力する内容などです。

■使用例

以下のサンプルは、ユーザーが押すべきキーをkbd要素でマークアップしています。
kbd要素とkbd要素が入れ子になっているのは、ShiftキーとF3キーを同時に押すことを示しています。

HTMLソース

<p>
 ジョージにリンゴを食べさせるには、
 <kbd>
  <kbd>Shift</kbd> + <kbd>F3</kbd>
 </kbd>
 を押します。
</p>

↓↓↓

ブラウザ上の表示

ジョージにリンゴを食べさせるには、
Shift + F3
を押します。

■使用例

以下のサンプルでは、ユーザーはメニュー項目を選択することで入力を行います。
kbd要素のなかにsamp要素が配置されているのは、
（この場合はメニュー操作を通じた）システム出力に基づくユーザー入力であることを表します。

kbd要素とkbd要素が入れ子になっていますが、
外側のkbd要素は入力ブロック全体を表し、内側のkbd要素は入力の個々のステップを表します。

HTMLソース

<p>
 ジョージにリンゴを食べさせるには、
 <kbd>
  <kbd><samp>ファイル</samp></kbd>|<kbd><samp>リンゴを食べる...</samp></kbd>
 </kbd>
 を選択します。
</p>

↓↓↓

ブラウザ上の表示

ジョージにリンゴを食べさせるには、
ファイル|リンゴを食べる...
を選択します。

■使用例

実際には、上記の使用例のような精度の高いマークアップは、あまり必要ありません。
以下の使用例のような簡単なマークアップでも問題ありません。

HTMLソース

<p>
 ジョージにリンゴを食べさせるには、
 <kbd>ファイル | リンゴを食べる...</kbd>
 を選択します。
</p>

↓↓↓

ブラウザ上の表示

ジョージにリンゴを食べさせるには、
ファイル | リンゴを食べる...
を選択します。

■関連項目

<pre> …… フォーマットされたテキストを表す
<code> …… コードを表す
<var> …… 変数を表す
<samp> …… コンピューターからの出力サンプルを表す
<kbd> …… ユーザー入力を表す
<output> …… 実行結果の出力を表す

山田太郎

山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。

全ての投稿者山田太郎

カジノファインダー

どのカジノが自分に最適か分からないですか?

サインアップは必要なく、1 分以内に最適なブックメーカーを簡単に見つけることができます。

カジノを探す

Back

どちらのバンキング方式をご希望ですか？

Select one of the following options

{"is_any_tile":true}

信頼できる

{"is_any_tile":true}

アップル・ペイ

{"is_any_tile":true}

より良い

{"is_any_tile":true}

スクリル

{"is_any_tile":true}

ネッテラー

{"is_any_tile":true}

ペイパル

{"is_any_tile":true}

クレジットカード

Back

理想のウェルカムボーナスとは？

Select one of the following options

{"is_any_tile":false,"sources":[{"source":"bmc_bonus_type","table_games":false,"bonus_types":false,"game_providers":false,"slots":false,"live_games":false,"is_live_dealer":false,"payment_methods":false,"sport_types":false,"live_streaming":false,"cash_out":false}]}

ウェルカムボーナス

入金不要ボーナス

登録ボーナス

ボーナスはいらない

Back

最もプレーしたいゲームは？

Select one of the following options

{"is_any_tile":true}

スポーツベット

{"is_any_tile":true}

ライブカジノ

{"is_any_tile":true}

プリンコ

{"is_any_tile":true}

バカラ

{"is_any_tile":true}

ポーカー

{"is_any_tile":true}

ルーレット

{"is_any_tile":true}

スロット

Back

Restart

やったー！

これはあなたの選択に基づいた最高のカジノです...

122 users signed up

もっと表示する