HTML の変数要素 (<var>) は、数式やプログラムコード内の変数の名前を表します。挙動はブラウザーに依存しますが、通常は現在のフォントの斜体を使って表示されます。
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
| コンテンツカテゴリ | フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ |
|---|---|
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | 不可。開始タグと終了タグの両方が必要です。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | HTMLElement |
属性
この要素にはグローバル属性のみがあります。
使用上のメモ
関連する要素
<var> がよく使われる文脈でよく使われる他の要素には、次のようなものがあります。
もし、意味的な目的ではなくスタイル付けの目的で <var> が誤って使用されているのを見かけた場合は、 <span> と適切な CSS を使用するか、次のような適切な意味の要素を使用するかしてください。
既定のスタイル
多くのブラウザーは <var> の表示時に font-style に "italic" を適用します。これは次のように CSS で上書きできます。
var {
font: bold 15px "Courier", "Courier New", monospace;
}
例
基本的な例
これは、 <var> を使用して数式の変数名を記述した単純な例です。
<p>単純な数式: <var>x</var> = <var>y</var> + 2 </p>
出力結果は次の通りです。
既定のスタイルの上書き
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> を使用して囲んでいます。
結果
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| HTML Living Standard <var> の定義 |
現行の標準 | |
| HTML5 <var> の定義 |
勧告 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
var | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 1 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応