--- title: ': 変数要素' slug: Web/HTML/Element/var tags: - Element - HTML - HTML text-level semantics - 'HTML:Flow content' - 'HTML:Palpable Content' - 'HTML:Phrasing content' - Reference - Web - var - variable translation_of: Web/HTML/Element/var ---
{{HTMLRef}}

HTML の変数要素 (<var>) は、数式やプログラムコード内の変数の名前を表します。挙動はブラウザーに依存しますが、通常は現在のフォントのイタリック体を使って表示されます。

{{EmbedInteractiveExample("pages/tabbed/var.html", "tabbed-shorter")}}
コンテンツカテゴリ フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ
許可されている内容 記述コンテンツ
タグの省略 {{no_tag_omission}}
許可されている親要素 記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール すべて
DOM インターフェイス {{domxref("HTMLElement")}}

属性

この要素にはグローバル属性のみがあります。

使用上のメモ

<var> がよく使われる文脈でよく使われる他の要素には、次のようなものがあります。

もし、意味的な目的ではなくスタイル付けの目的で <var> が誤って使用されているのを見かけた場合は、 {{HTMLElement("span")}} と適切な CSS を使用するか、次のような適切な意味の要素を使用するかしてください。

既定のスタイル

多くのブラウザーは <var> の表示時に {{cssxref("font-style")}} に italic を適用します。これは次のように CSS で上書きできます。

var {
  font: bold 15px "Courier", "Courier New", monospace;
}

例

基本的な例

これは、 <var> を使用して数式の変数名を記述した単純な例です。

<p>単純な数式:
  <var>x</var> = <var>y</var> + 2 </p>

出力結果は次の通りです。

{{EmbedLiveSample("Basic_example", 650,80)}}

既定のスタイルの上書き

CSS を使用して、 <var> 要素の既定のスタイルを上書きすることができます。この例では、変数名は太字の Courier フォントがあれば、それを使って表示し、なければ既定の等幅フォントにフォールバックされます。

CSS

var {
  font: bold 15px "Courier", "Courier New", monospace;
}

HTML

<p><var>minSpeed</var> と <var>maxSpeed</var> 変数は、
   端末の最低速度と最高速度を分当たりの回転数 (RPM) で
   制御します。</p>

この HTML では、2つの変数名を <var> を使用して囲んでいます。

結果

{{EmbedLiveSample("Overriding_the_default_style", 650, 120)}}

仕様書

仕様書 状態 備考
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-var-element', '<var>')}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-var-element', '<var>')}} {{Spec2('HTML5 W3C')}}

ブラウザーの互換性

{{Compat("html.elements.var")}}