<code> / <kbd> / <var>

対応:		HTML 4（1997）

『code』はプログラムのコード断片、『kbd』はキーボード入力、『var』は変数名・プレースホルダーをそれぞれ意味的に示すインライン要素です。

構文

<!-- コード断片 -->
<code>document.getElementById("id")</code>

<!-- キーボード入力・キー名 -->
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<!-- 変数・プレースホルダー -->
<var>x</var> = <var>y</var> + 1

<!-- サンプル出力（samp） -->
<samp>Error: File not found</samp>

タグ一覧

タグ	概要
code	プログラムコードの断片・ファイル名・コマンドなどを示します。デフォルトで等幅フォントで表示されます。
kbd	キーボードで入力する内容・キー名を示します。「Enterキーを押す」などの操作説明に使います。デフォルトで等幅フォントです。
var	数式・プログラム中の変数名・プレースホルダーを示します。デフォルトで斜体表示されます。
samp	プログラムやコマンドの出力サンプルを示します。デフォルトで等幅フォントです。

サンプルコード

sample_code_kbd_var.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    /* kbdにキーボードキー風スタイルを付ける */
    kbd {
      display: inline-block;
      padding: 2px 6px;
      border: 1px solid #ccc;
      border-radius: 3px;
      background: #f6f6f6;
      font-size: 0.9em;
    }
  </style>
</head>
<body>

  <!-- codeでコード断片を示す -->
  <p>JavaScriptで要素を取得するには<code>document.getElementById()</code>を使います。</p>

  <!-- codeでファイル名を示す -->
  <p>設定ファイル<code>config.json</code>を編集してください。</p>

  <!-- kbdでキー操作を説明する -->
  <p>コピーするには<kbd>Ctrl</kbd> + <kbd>C</kbd>を押してください。</p>
  <p>保存するには<kbd>Ctrl</kbd> + <kbd>S</kbd>です。</p>

  <!-- varで変数名を示す -->
  <p>面積を求める計算式：<var>area</var> = <var>width</var> × <var>height</var></p>

  <!-- sampでコマンドの出力を示す -->
  <p>コマンドを実行すると以下のように表示されます：</p>
  <samp>Hello, World!</samp>

</body>
</html>

実行結果

『code』は等幅フォントでコードらしく表示されます。『kbd』は等幅フォント（CSSを当てるとキーボードキー風の見た目になります）、『var』は斜体で表示されます。

サンプルページはこちら

概要

これらの要素はすべてデフォルトで等幅フォント（または斜体）で表示されますが、それはブラウザのデフォルトスタイルにすぎません。大切なのは「意味」を正しく伝えることです。たとえば説明文中でメソッド名を書くとき、単に等幅フォントにしたいからという理由で使うのではなく、「これはコードだ」という意味を伝えるために『code』を使います。

複数行のコードブロックを表示したい場合は、『pre』と『code』を組み合わせて使います。『pre』が改行・空白の保持を担当し、『code』がコードという意味を担当します（例：<pre><code>...</code></pre>）。

『kbd』はキーボード以外にも、音声コマンドやゲームコントローラーのボタンなど、ユーザーが入力・操作する内容全般に使えます。CSSで枠線と背景色を設定するとキーボードキー風の見た目になり、操作説明がわかりやすくなります。

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

4 以降 ○

3 以前 ×

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

15 以降 ○

14 以前 ×

モバイル

iOS Safari

3.2 以降 ○

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

実践的な組み合わせ

『<code>』『<kbd>』『<var>』は、テクニカルドキュメントや解説記事で組み合わせて使うことで、情報の種類を明確に区別できます。

<!-- コマンド実行の手順説明 -->
<p><kbd>Ctrl</kbd> + <kbd>C</kbd> を押してコピーし、<kbd>Ctrl</kbd> + <kbd>V</kbd> でペーストします。</p>

<!-- 関数の説明（変数名を含む） -->
<p>関数 <code>Math.pow(<var>base</var>, <var>exponent</var>)</code> は、<var>base</var> の <var>exponent</var> 乗を返します。</p>

<!-- ターミナルコマンドと変数 -->
<p>以下のコマンドを実行します: <code>ssh <var>username</var>@<var>hostname</var></code></p>

<!-- コンピューターの出力と入力の区別 -->
<p>コマンド <code>ls -la</code> を実行すると以下の結果が表示されます:</p>
<pre><samp>total 48
drwxr-xr-x  8 user staff  256 Jan  1 12:00 .
drwxr-xr-x 15 user staff  480 Jan  1 11:00 ..</samp></pre>

CSSでのスタイリング

各タグのデフォルトスタイル（等幅フォント）をCSSでカスタマイズして、ドキュメントのデザインに合わせることができます。

/* code: インラインコードのスタイリング */
code {
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.875em;
  background-color: #f0f0f0;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  color: #c7254e;
}

/* kbd: キーボードショートカットのスタイリング */
kbd {
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.8em;
  padding: 0.1em 0.4em;
  border: 1px solid #aaa;
  border-bottom-width: 2px;   /* キーの立体感を表現 */
  border-radius: 3px;
  background: linear-gradient(to bottom, #fefefe, #e8e8e8);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* var: 変数名のスタイリング */
var {
  font-style: italic;
  color: #0066cc;
}

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典