kbdタグキーボードなどの入力を表す

catnose · 2019/10/08 に最終更新

HTMLの<kbd>キーボードタグは、ユーザーによる入力（キーボード入力や音声入力など）を表します。kbdは「keyboard」の略です。

<p><kbd>Ctrl</kbd> + <kbd>C</kbd>でコピーしてください。</p>

kbd {
  display: inline-block;
  padding: 0.3em 0.5em;
  background-color: #e0e0e0;
  border-radius: 3px;
  border-bottom: 2px solid #b4b4b4;
  color: #333;
  vertical-align: middle;
  font-size: 0.9em;
  line-height: 1.1;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

👆たとえば、操作手順の説明などでキーボードの入力キーを示すときに使います。のちほど詳しく説明しますが、CSSでキーボード風の装飾を加えるとパッと見たときに分かりやすいですね。

このページの目次

kbdタグの使い方
CSSでkbdのデザインを整える
- キーボード風のCSS
- 画面のメニュー名を表すCSS

kbdタグの使い方

<kbd>は「ユーザー入力」を表すものに幅広く使うことができます。

キーボード入力を表す

<p><kbd>Enter</kbd>キーを押しましょう。</p>

👆最もよく使われるのはキーボード入力だと思います。「キー」という文字列は含めずに、実際に押すキーの名前だけ含めるのが良いでしょう。

画面上のボタンやメニュー名を表す

<p>メニューを開き「<kbd>新規ファイル</kbd>」をクリックしましょう。</p>

<p><img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1557839534/posts/ue4kcwnkuosceafcbpa1.png" alt="新規ファイルをクリック"></p>

👆このように、パソコンやスマホのメニューの項目名に使うこともできます。

✍️sampタグ

厳密には「システムが表示したメニューの項目やボタンには<samp>タグを合わせて使う」とされています（例：<kbd><samp>新規ファイル</samp></kbd>）。

しかし、仕様書には「<kbd>だけで十分」とも書かれているので、<samp>を使う必要はないでしょう。

音声入力を表す

<p>Google Homeに「<kbd>オーケー、グーグル</kbd>」と声をかけてください。</p>

👆スマートスピーカーや、スマートフォンで音声入力をするような場合にも<kbd>を使うことができます。「オーケー、グーグル」や「アレクサ、今日の天気を教えて」などですね。今後使いどころが増えそうです。

kbdを入れ子にして、操作のまとまりを表す

<p><kbd><kbd>メニュー</kbd> → <kbd>新規作成</kbd></kbd>をクリックします。</p>

👆<kbd>の中に別の<kbd>を入れることもできます。一連の操作全体を<kbd>で囲み、1つ1つのキーや項目ごとに<kbd>を使います。これにより、ひとまとまりの操作であることが明確になります。

CSSでkbdのデザインを整える

<p><kbd>Ctrl</kbd> + <kbd>C</kbd>でコピーしてください。</p>

👆デフォルトの<kbd>には特に装飾がなく、ユーザーにとってはあまり見やすいものではありません。以下で、<kbd>をより直感的なデザインに装飾するCSSを紹介します。

ただし、主要ブラウザでは、<kbd>のテキストはデフォルトで等幅フォント（font-family: monospace）で表示されます。

キーボード風のCSS

<p><kbd>Ctrl</kbd> + <kbd>C</kbd>でコピーしてください。</p>

kbd {
  display: inline-block;
  margin: 0 0.2em;
  padding: 0.4em 0.6em; 
  background-color: #e0e0e0;
  border-bottom: 3px solid #b4b4b4;
  border-radius: 3px;
  vertical-align: middle;
  font-size: 0.9em;
  line-height: 1.1;
  box-shadow: 0 1px 2px rgba(0,0,0,.1); 
}

👆キーボードの立体感を表現したCSSサンプルです。やっていることはシンプルで、塗りと線をつけ、余白を調整しているだけです。下線を太めにすると、立体感が出ます。

kbdごとにスタイルを変える

上のサンプルのようにkbd { ~ }と書くと、ページ内の全ての<kbd>に対してCSSが適用されます。「キーボード」を表すときと「メニュー項目」を表すときはスタイルを変えたいですよね。以下のようにクラスを使えば、<kbd>ごとにスタイルを変えることができます。

1. クラスごとのCSSを作る

CSS

.kbd-key {
  /* キーボード用 */
}

.kbd-menu {
  /* メニュー項目用 */
}

2. 使いたい装飾のクラスを指定する

HTML

<p>キーボードの
  <kbd class="kbd-key">Enter</kbd>を押してから
  <kbd class="kbd-menu">ファイルを選択</kbd>
  を選んでください。</p>

👆これなら好きな数だけ<kbd>の装飾バリエーションを増やすことができます。

<p><kbd class="kbd-key">Ctrl</kbd> + <kbd class="kbd-key">C</kbd>でコピーしてください。</p>

.kbd-key {
  display: inline-block;
  margin: 0 0.2em;
  padding: 0.4em 0.6em; 
  background-color: #e0e0e0;
  border-bottom: 3px solid #b4b4b4;
  border-radius: 3px;
  vertical-align: middle;
  font-size: 0.9em;
  line-height: 1.1;
  box-shadow: 0 1px 2px rgba(0,0,0,.1); 
}

👆さきほどのサンプルをクラスを使うものに書き換えるとこのようになります。

画面のメニュー名を表すCSS

<p><kbd><kbd class="kbd-menu">メニュー</kbd> → <kbd class="kbd-menu">新規作成</kbd></kbd>をクリックします。</p>

.kbd-menu {
  display: inline-block;
  margin: 0 0.2em;
  padding: 0.5em 0.7em; 
  border: solid 1px #e0e0e0;
  background: #EFEFEF;
  border-radius: 2px;
  vertical-align: middle;
  font-size: 0.9em;
  line-height: 1.1;
}

このようにCSSで装飾した<kbd>タグを活用すれば、ユーザーにとっても、検索エンジンなどのボットにとっても「ユーザー入力であること」が把握しやすくなります。