kbd タグエレメント
インラインエレメント
kbd タグエレメントは、キーボードによる入力例や操作用ボタンを示す HTML タグエレメントです。
<kbd>Enter</kbd> キーを押してください
Enter キーを押してください
キーボードの入力例を装飾したい場合に便利です。
<kbd> は入れ子にもできます。以下のようにスタイル設定( CSS )をする kbd としない kbd に分けることができます。
以下では、スタイルシートを設定している kbd は class 属性を使っています。
kbd 内の字体は統一されます。装飾例はExampleを参照してください。
<kbd><kbd class="key">Ctrl</kbd> + <kbd class="key">C</kbd></kbd> でコピーしてください
kbd は keybord の略のようです。
- ad -
Example
以下は kbd タグエレメントの例です。
キー入力を示す CSS を使った例とボタンを示す CSS を使った例です。
キー入力を示す CSS の例
キー入力においてはキーボード風の装飾を CSS でしています。
キーボード入力を示す <kbd> には class="key" と class 属性を設定しています。
スタイルシート( CSS )を適応する場合は class 属性を設定したほうが後で編集しやすくなります。
ボタンを示す CSS の例
次はボタンを示すために <kbd> を使用した例です。
ボタンを示す <kbd> には class="button" と class 属性を設定しています。
- ad -
数式やプログラムコードのエレメント
数式やプログラムコードに関連するエレメントは以下があります。
エレメント名 | 概要 |
---|---|
プログラム | |
code | プログラムコード例などに、インラインエレメント |
kbd | キーボード入力例 |
pre | 改行やスペースをソースそのままに表示、ブロックエレメント |
samp | プログラムの出力例 |
数式、化学式 | |
sub | 下つき小文字 |
sup | 上つき小文字 |
プログラム、数式 | |
var | プログラムの引数や数式の変数 |
その他(記録用) | |
del | 削除済み。関数や引数などの削除があったら |
ins | 追記。関数や引数などの追加があったら |