Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

トップページ
HTMLタグ辞典
<code> / <kbd> / <var>

<code> / <kbd> / <var>

『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	プログラムやコマンドの出力サンプルを示します。デフォルトで等幅フォントです。

サンプルコード

<!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』は斜体で表示されます。

JavaScriptで要素を取得するには document.getElementById() を使います。
設定ファイル config.json を編集してください。
コピーするには [Ctrl] + [C] を押してください。
面積を求める計算式：area = width × height  ← 斜体
Hello, World!

概要

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

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

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