1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
---
title: '<var>: 変数要素'
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
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary">HTML の<strong>変数要素</strong> (<strong><code><var></code></strong>) は、数式やプログラムコード内の変数の名前を表します。</span>挙動はブラウザーに依存しますが、通常は現在のフォントのイタリック体を使って表示されます。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/var.html", "tabbed-shorter")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td>
</tr>
<tr>
<th scope="row">許可されている内容</th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td>
</tr>
<tr>
<th scope="row">タグの省略</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">許可されている親要素</th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td>
</tr>
<tr>
<th scope="row">暗黙の ARIA ロール</th>
<td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
</tr>
<tr>
<th scope="row">許可されている ARIA ロール</th>
<td>すべて</td>
</tr>
<tr>
<th scope="row">DOM インターフェイス</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attributes" name="Attributes">属性</h2>
<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p>
<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2>
<h3 id="Related_elements" name="Related_elements">関連する要素</h3>
<p><code><var></code> がよく使われる文脈でよく使われる他の要素には、次のようなものがあります。</p>
<ul>
<li>{{HTMLElement("code")}}: HTML コード要素</li>
<li>{{HTMLElement("kbd")}}: HTML キーボード入力要素</li>
<li>{{HTMLElement("samp")}}: HTML サンプル出力要素</li>
</ul>
<p>もし、意味的な目的ではなくスタイル付けの目的で <code><var></code> が誤って使用されているのを見かけた場合は、 {{HTMLElement("span")}} と適切な CSS を使用するか、次のような適切な意味の要素を使用するかしてください。</p>
<ul>
<li>{{HTMLElement("em")}}</li>
<li>{{HTMLElement("i")}}</li>
<li>{{HTMLElement("q")}}</li>
</ul>
<h3 id="Default_style" name="Default_style">既定のスタイル</h3>
<p>多くのブラウザーは <code><var></code> の表示時に {{cssxref("font-style")}} に <code>italic</code> を適用します。これは次のように CSS で上書きできます。</p>
<pre class="brush: css notranslate">var {
font: bold 15px "Courier", "Courier New", monospace;
}</pre>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
<p>これは、 <code><var></code> を使用して数式の変数名を記述した単純な例です。</p>
<pre class="brush:html notranslate"><p>単純な数式:
<var>x</var> = <var>y</var> + 2 </p>
</pre>
<p>出力結果は次の通りです。</p>
<p>{{EmbedLiveSample("Basic_example", 650,80)}}</p>
<h3 id="Overriding_the_default_style" name="Overriding_the_default_style">既定のスタイルの上書き</h3>
<p>CSS を使用して、 <code><var></code> 要素の既定のスタイルを上書きすることができます。この例では、変数名は太字の Courier フォントがあれば、それを使って表示し、なければ既定の等幅フォントにフォールバックされます。</p>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">var {
font: bold 15px "Courier", "Courier New", monospace;
}</pre>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><p><var>minSpeed</var> と <var>maxSpeed</var> 変数は、
端末の最低速度と最高速度を分当たりの回転数 (RPM) で
制御します。</p></pre>
<p>この HTML では、2つの変数名を <code><var></code> を使用して囲んでいます。</p>
<h4 id="Result" name="Result">結果</h4>
<p>{{EmbedLiveSample("Overriding_the_default_style", 650, 120)}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-var-element', '<var>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-var-element', '<var>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("html.elements.var")}}</p>
|
