◀ 16.

HTML <var> 要素の使い方と <code> / <samp> / <kbd> との使い分け

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

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

関連タグとの使い分け

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

組み合わせの例




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

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

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

Markdown でも変数

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

FAQ

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

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

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

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. h1～h6要素
  2. p要素
  3. blockquote要素
  4. q要素
  5. cite要素
  6. ins要素
  7. del要素
  8. HTML em 要素（強調）の使い方と strong との違い
  9. br要素
  10. abbr要素
  11. dfn要素
  12. pre要素で整形済みテキストを表示する
  13. code要素
  14. samp要素
  15. kbd要素
  16. var要素
  17. bdo要素
  18. sup要素で上付き文字を表示する
  19. sub要素
  20. mark要素
  21. data要素
  22. time要素
  23. wbr要素
  24. bdi要素
2026-06-11 04:04:52 guest 203

人気ページ

最近更新/作成されたページ