備忘録的プログラミングリファレンス

kbd タグエレメント

インラインエレメント

 kbd タグエレメントは、キーボードによる入力例や操作用ボタンを示すために用いる HTML タグエレメントです。

kbd タグエレメント
<kbd>Enter</kbd> キーを押してください
表示例

Enter キーを押してください

詳しくはExampleを参照してください

 キーボードの入力例などを <kbd> タグで囲んでおけば後で一括で装飾したい場合に便利です。

 <kbd> は入れ子にもできます。以下のようにスタイル設定( CSS )をする kbd としない kbd に分けることができます。
 以下では、スタイルシートを設定している kbd は class 属性を使っています。
 kbd 内の字体は統一されます。装飾例はExampleを参照してください。

kbd タグエレメント
<kbd><kbd class="key">Ctrl</kbd> + <kbd class="key">C</kbd></kbd> でコピーしてください
表示例
Ctrl + C でコピーしてください

 kbd は keybord の略のようです。

属性

 <kbd> タグエレメントはグローバル属性を持ちます。以下に主な属性のみを示します。

AttributeValueExtra information
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。

 その他の属性はグローバル属性を参照してください

 以下の HTML作成 をクリックすると上記の属性のvalueからkbd タグエレメントを作成します。

Example

 以下は kbd タグエレメントの例です。
 キー入力を示す CSS を使った例とボタンを示す CSS を使った例です。

キー入力を示す CSS の例

 キー入力においてはキーボード風の装飾を CSS でしています。
 キーボード入力を示す <kbd> には class="key" と class 属性を設定しています。 スタイルシート( CSS )を適応する場合は class 属性を設定したほうが後で編集しやすくなります。

ボタンを示す CSS の例

 次はボタンを示すために <kbd> を使用した例です。

 ボタンを示す <kbd> には class="button" と class 属性を設定しています。