この記事の要点

<var> は変数を意味するインライン HTML 要素 数学の <var>x</var> + <var>y</var> = 10、プログラミングの変数名に使用 デフォルトスタイルはイタリック 関連: <code>（コード片）/ <samp>（出力）/ <kbd>（キー入力） MathML（数式マークアップ）と組み合わせ可、CSS で font-style 変更可

var 要素とは

Variable Element。数学・プログラミング文脈での変数やパラメータ名をマークアップするインライン要素です。

<!-- 数学式 -->
<p>
  <var>a</var> と <var>b</var> の和は <var>c</var> です。
  式: <var>a</var> + <var>b</var> = <var>c</var>
</p>

<!-- プログラミングの変数名 -->
<p>
  関数 <code>sum(<var>x</var>, <var>y</var>)</code> は
  <var>x</var> と <var>y</var> の和を返します。
</p>

<!-- コマンドラインの引数プレースホルダ -->
<pre>
git clone <var>repository-url</var> <var>directory</var>
</pre>

デフォルトの見た目

/* ブラウザ標準 */
var {
    font-style: italic;
}

/* カスタマイズ例 */
var {
    font-style: italic;
    font-family: 'Cambria Math', 'Times New Roman', serif;
    color: #1565c0;
}

/* イタリックを解除して等幅に */
var {
    font-style: normal;
    font-family: 'Fira Code', monospace;
    background: #f5f5f5;
    padding: 0 0.2em;
    border-radius: 3px;
}

関連タグとの使い分け

タグ	意味	例
<var>	変数 / パラメータ	<var>x</var>
<code>	プログラムコード片	<code>Array.map()</code>
<samp>	プログラムの出力	<samp>Hello, World!</samp>
<kbd>	ユーザのキー入力	<kbd>Ctrl</kbd> + <kbd>C</kbd>
<pre>	整形済みテキスト	ソースコード全体のブロック

組み合わせの例

<!-- インタラクティブな操作説明 -->
<p>
  <kbd>git status</kbd> を実行すると
  <samp>On branch main</samp> のように出力されます。
</p>

<!-- 関数の使い方 -->
<p>
  <code>console.log(<var>message</var>)</code> で
  <var>message</var> を出力します。
</p>

<!-- 数式 -->
<p>
  二次方程式 <var>ax</var><sup>2</sup> + <var>bx</var> + <var>c</var> = 0 の解は
  <var>x</var> = (-<var>b</var> ± √(<var>b</var><sup>2</sup> - 4<var>ac</var>)) / 2<var>a</var>
</p>

コマンドのプレースホルダ表現

マニュアル等で「ここにユーザの実値を入れる」を示すのに最適:

<pre>
docker run -d --name <var>container-name</var> \
  -p <var>host-port</var>:<var>container-port</var> \
  <var>image-name</var>
</pre>

<style>
  pre var {
    color: #d32f2f;
    font-style: normal;
    text-decoration: underline dotted;
  }
</style>

MathML との関係

数式は本来 MathML で表現すべきですが、簡単な式なら <var> + <sup> / <sub> で十分:

<!-- シンプル版（var で） -->
<p>
  <var>E</var> = <var>mc</var><sup>2</sup>
</p>

<!-- 正式版（MathML） -->
<math display="block">
  <mi>E</mi>
  <mo>=</mo>
  <mi>m</mi>
  <msup>
    <mi>c</mi>
    <mn>2</mn>
  </msup>
</math>

<!-- KaTeX / MathJax を使う場合 -->
<p>$E = mc^2$</p>

CSS で見た目をカスタマイズ

/* デフォルトのイタリックを解除し変数感を出す */
var {
    font-style: normal;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    background: linear-gradient(transparent 60%, #fff8c4 60%);
    padding: 0 0.15em;
}

/* 数式専用 */
.math var {
    font-style: italic;
    font-family: 'STIX Two Math', 'Cambria Math', serif;
}

/* コマンドプレースホルダ */
.cmd var {
    font-style: normal;
    color: #c62828;
    border-bottom: 1px dashed currentColor;
}

アクセシビリティ

• スクリーンリーダーは通常、<var> を特別扱いしない（普通のテキストとして読み上げる）
• 意味論を明示することで、CSS や JS で「変数だけ抽出」できる
• aria-label で読み方を補足可能（例: <var aria-label="エックスにじょう">x<sup>2</sup></var>）

JavaScript で変数一覧抽出

// ページ内のすべての変数を集める
const vars = [...document.querySelectorAll('var')]
  .map(el => el.textContent.trim());

const unique = [...new Set(vars)];
console.log('使われた変数:', unique);
// → ['x', 'y', 'a', 'b', 'c', ...]

// ホバーで変数の説明を表示
document.querySelectorAll('var').forEach(el => {
  const name = el.textContent.trim();
  el.title = el.title || `変数: ${name}`;
});

使うべきケース / 使わないべきケース

シーン	使う？	理由
数学の変数 (x, y, z)	○	本来の用途
関数の引数名	○	プログラミング文脈の変数
コマンドのプレースホルダ	○	「ここにユーザの値」を示す
普通の単語をイタリック表示したいだけ	×	<i> または CSS
変数名（コード内）の参照	△	<code> の方が一般的
強調	×	<em> / <strong>

Markdown でも変数

標準 Markdown には <var> 相当の記法は無いので、生 HTML を埋め込むか、*x*（イタリック）で代用します。GitHub Markdown / KaTeX 拡張なら $x$ で数式モードに。

FAQ

Q: <i> でも見た目同じだけど？
A: 見た目は同じでも意味が違います。<var> は「ここは変数」を、<i> は「装飾的にイタリック」を意味します。SEO / 検索 / 解析ツールが意味を読み取ります。

Q: <code> との使い分けがあやふや
A: コード片の中で変数部分のみを強調するなら <code>sum(<var>x</var>)</code> のように入れ子。コード片全体なら <code> だけ。

Q: フォント変更したい
A: var { font-family: ... } で CSS 上書き。意味論には影響しません。