サイト制作
操作説明のkbdとsampは何が違う？入力する文字と表示された結果を分ける
2026-11-10
この記事には広告・アフィリエイトリンクが含まれます。
kbdは利用者の入力、sampはプログラムの出力例を表します。操作マニュアルでは、押すキーと結果のメッセージを分けると、次に何をするかが伝わりやすくなります。
利用者が入れるものならkbd
操作手順にキーの名前や入力する文字を載せるときは、kbdを使えます。たとえば、キー名としてのEnterを示すなら「<kbd>Enter</kbd>」と記述します。
kbdはキーボードの入力だけに限定されず、音声入力など利用者が与える入力も対象です。見た目をキーの形にするCSSは別に設定できますが、タグ自体の役目は入力を示すことです。
アプリから返った文ならsamp
sampは、コンピュータープログラムから出る結果の例を示します。「保存しました」という表示を説明に載せるなら、そのメッセージをsampで囲む、といった使い方です。
入力する文字と、画面に現れる結果が同じ字体で並んでいても、意味は別です。「Enterを押すと、完了と表示されます」のように、行動と結果が文としてつながる説明を先に作ると、タグも選びやすくなります。
等幅フォントだけで区別を任せない
kbdもsampも、一般的には等幅フォントで表示されます。そのため、要素を付けただけで読者が両者を見分けられるとは限りません。「入力する内容」「表示例」など、短い言葉の案内も有効です。
私は、操作記事では次の一手が迷わずわかることを優先したいです。自分が入力するものなのか、表示を確認するものなのか。ここを分けて書くだけで、画面を行き来しながら読む人を助けられます。
