HTML <kbd>タグ：正しい理解と使い方

定義と使い方

<kbd>タグは、
入力装置（キーボードだけでなく、音声コマンドやマウスクリックなど、さまざまな入力デバイス）を通じて行われるユーザーのテキスト入力を表します。

'keyboard'（キーボード）の略語として作られた<kbd>タグは、主にユーザーがキーボードで入力する際の、どのキーであるかを示すために使用します。

基本例

ここでの<kbd>タグは、押す必要があるキーを示すために使用されます。

HTML

<p>
    Windowsでコピーするには
    <kbd>Ctrl</kbd> + <kbd>C</kbd>を押してください。
</p>
<p>
    macOSでコピーするには
    <kbd>Cmd</kbd> + <kbd>C</kbd>を押してください。
</p>

スタイルを追加する

<kbd>タグは、多くのブラウザではデフォルトで等幅（monospace）系のフォントで表示されますが、CSSでスタイルを追加することで、より視覚的な意味を明確に表すこともできます。

CSS

kbd {
    color: #222;
    font-size: 0.8em;
    vertical-align: text-top;
    padding: 0.09em 0.7em;
    background-color: #e6e6e6;
    border-radius: 0.3em;
    box-shadow: 0 1px 1px #666;
}

上記のコード例のようにスタイルを追加すると、<kbd>タグの意味を視覚的により明確に示すことができます。

使用方法の参考事項

`<kbd>`と`<kbd>`タグのネスト使用の意味

<kbd>タグが<kbd>タグの中でネストされている場合、外側の<kbd>タグは入力全体のブロックを表し、内側の<kbd>タグはそれぞれの個別のキー入力を表します。<kbd>タグをより精密にマークアップする方法です。

HTML

<!--
<p>
    Windowsでコピーするには
    <kbd>Ctrl</kbd> + <kbd>C</kbd>を押してください。
</p>
-->

<!-- 上記のコードをより精密にマークアップしてみました。 -->
<p>
    Windowsでコピーするには
    <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd>を押してください。
</p>

このように必ずしもネストして使用する必要はありません。
ここでは、<kbd>タグが<kbd>タグの中でネストして使用されても有効であることを示す、マークアップ表記の一例にすぎません。

`<kbd>`内での`<samp>`タグ使用の意味

<kbd>は主にユーザーがキーボードで入力する際のキーを表しますが、<kbd>内で<samp>タグを使用すると、システムの出力に基づいたサンプル入力を表します。

<samp>タグは
他のプログラムやコンピューティングシステムによるサンプル（sample）出力、または引用された出力を表します。

HTML

<p>
    ファイルを開くには、
    <kbd>
        <kbd><samp>ファイル</samp></kbd> ⇒ <kbd><samp>開く</samp></kbd>
    </kbd>
    メニューを選択してください。
</p>
<p>
    ファイルを保存するには、
    <kbd>
        <kbd><samp>ファイル</samp></kbd> ⇒ <kbd><samp>保存</samp></kbd>
    </kbd>
    メニューを選択してください。
</p>

上記のサンプルコードのように、<kbd>タグはキーボード入力だけでなく、音声コマンドやマウスクリックなど、さまざまなユーザー入力にも対応します。

このように精密にマークアップすることもできますが、必ずしも必要ではありません。次の例は、上記の例と同様に問題ありません。

HTML

<p>
    ファイルを開くには、
    <kbd>ファイル</kbd> ⇒ <kbd>開く</kbd>
    メニューを選択してください。
</p>
<p>
    ファイルを保存するには、
    <kbd>ファイル</kbd> ⇒ <kbd>保存</kbd>
    メニューを選択してください。
</p>

技術的な文法のまとめ

kbdタグの技術的な文法まとめ
許可されるコンテンツ	フレージングコンテンツを許可するすべての要素
許可されるコンテンツ	フレージングコンテンツ
暗黙の`role`属性値	なし
許可される`role`属性値	すべて（Any）