ゆう's Blog
文字をキーボード風に装飾する

コピーするには 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 で正式に定義されている要素です。