文字をキーボード風に装飾する
コピーするには Ctrl + C を押します。
kbd { display: inline-block; padding: 2px 6px; margin: 0 2px; border: 1px solid #ccc; border-radius: 4px; background: #f7f7f7; box-shadow: 0 1px 0 #e0e0e0; font-size: 0.9em; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
<p>コピーするには <kbd>Ctrl</kbd> + <kbd>C</kbd> を押します。</p>
<kbd> は HTML に用意されている “キーボード入力を表すためのタグ” です。
「ユーザーがキーボードで押すキー」や「ショートカット」を示すときに使うための、意味づけされた要素です。
<kbd> の役割
意味(セマンティクス)を持つタグ
→ 「ここはキーボード操作を表している」とブラウザや支援技術に伝えられます。
デフォルトでは特別な見た目はほぼありませんが、CSS で自由に装飾できます。
HTML5 で正式に定義されている要素です。