過去バージョン

var 要素とは

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

  a と b の和は c です。
  式: a + b = c




  関数 sum(x, y) は
  x と y の和を返します。



git clone repository-url directory

デフォルトの見た目

/* ブラウザ標準 */
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;
}

関連タグとの使い分け

組み合わせの例

  git status を実行すると
  On branch main のように出力されます。




  console.log(message) で
  message を出力します。




  二次方程式 ax2 + bx + c = 0 の解は
  x = (-b ± √(b2 - 4ac)) / 2a

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

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

docker run -d --name container-name \
  -p host-port:container-port \
  image-name

MathML との関係

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

  E = mc2



$$E=m{c}^2$$


$E = mc^2$

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;
}

アクセシビリティ

• スクリーンリーダーは通常、 を特別扱いしない（普通のテキストとして読み上げる）
• 意味論を明示することで、CSS や JS で「変数だけ抽出」できる
• aria-label で読み方を補足可能（例: x2）

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}`;
});

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

Markdown でも変数

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

FAQ

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