aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/html/element/meter/index.html
blob: 40f64645b3ec2fb12d8791ece2d8a362bf561879 (plain)
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
---
title: '<meter>: HTML メーター要素'
slug: Web/HTML/Element/meter
tags:
  - Element
  - HTML
  - HTML forms
  - HTML5
  - Reference
  - Web
translation_of: Web/HTML/Element/meter
---
<div>{{HTMLRef}}</div>

<p><strong>HTML の <code>&lt;meter&gt;</code> 要素</strong>は、既知の範囲内のスカラー値、または小数値を表します。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}</div>

<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

<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>。ただし他の <code>&lt;meter&gt;</code> 要素の子孫要素として配置してはならない。</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>許可されている <code>role</code> なし</td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{domxref("HTMLMeterElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">属性</h2>

<p>他のすべての要素と同様に、この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p>

<dl>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd>現在の数値。<code>min</code> 属性と <code>max</code> 属性が指定されている場合、これらの表す範囲内に収まる値でなくてはなりません。この <code>value</code> 属性が未定義、あるいは不正な値であった場合は、その値は <code>0</code> となります。指定されている値が <code>min</code> 属性と <code>max</code> 属性が示す範囲の範囲外の値である場合、その範囲の内のもっとも近い値が適用されます。
 <div class="note"><strong>注意:</strong> <code>value</code> 属性の値が <code>0</code> を下限、<code>1</code> を上限とするものでない限り、<code>min</code> 属性および <code>max</code> 属性で <code>value</code> 属性の下限および上限を定義しなくてはなりません。</div>
 </dd>
 <dt>{{htmlattrdef("min")}}</dt>
 <dd>範囲全体の下限。 <code>max</code> 属性により上限が設定されている場合は、それより小さい値でなくてはなりません。未設定の場合、下限値は <code>0</code> となります。</dd>
 <dt>{{htmlattrdef("max")}}</dt>
 <dd>範囲全体の上限。 <code>min</code> 属性により下限が設定されている場合は、それより大きい値でなくてはなりません。未設定の場合、上限値は <code>1</code> となります。</dd>
 <dt>{{htmlattrdef("low")}}</dt>
 <dd>「低」とされる範囲全体の上限値。属性値は、<code>min</code> 属性の値より大きく、かつ <code>high</code> 属性および <code>max</code> 属性の値より小さいものでなくてはなりません (※これらが定義されている場合)。<code>low</code> が未定義、もしくはその値が <code>min</code> 属性の値より小さい場合、<code>low</code> の値は最小値と同じです。</dd>
 <dt>{{htmlattrdef("high")}}</dt>
 <dd>「高」とされる範囲全体の下限値。属性値は、<code>max</code> 属性の値より小さく、かつ <code>low</code> 属性や <code>min</code> 属性の値より大きいものでなくてはなりません (※これらが定義されている場合)。<code>high</code> 属性が未定義、もしくはその値が <code>max</code> 属性の値より大きい場合、<code>high</code> の値は最大値と同じです。</dd>
 <dt>{{htmlattrdef("optimum")}}</dt>
 <dd><strong>最適な数値の範囲</strong>を表します。<code>min</code> 属性と <code>max</code> 属性によって定義される範囲内の値でなくてはなりません。 <code>low</code> 属性と <code>high</code> 属性が指定されている場合、この属性の値を含む範囲が最適な数値の範囲とみなされます。例えば、値が <code>min</code> 属性と <code>low</code> 属性の間のいずれかであった場合、「低」の範囲が最適な数値となります。ブラウザーは optimum の値以下であるかどうかでメーターのバーの色を変更することがあります。</dd>
 <dt>{{htmlattrdef("form")}}</dt>
 <dd><code>&lt;meter&gt;</code> 要素と関連付ける {{HTMLElement("form")}} 要素 (<em>フォームオーナー</em>) です。この属性の値は同じ文書内の <code>&lt;form&gt;</code>{{htmlattrxref("id")}} である必要があります。この属性が設定されていなかった場合、その <code>&lt;meter&gt;</code> の祖先に <code>&lt;form&gt;</code> 要素があれば、それに関連付けられます。この属性は <code>&lt;meter&gt;</code> 要素がフォーム関連要素として使用されている場合、例えば対応する <a href="/ja/docs/Web/HTML/Element/input/number"><code>&lt;input type="number"&gt;</code></a> の範囲を表示するようなものでのみ使用されます。</dd>
</dl>

<h2 id="Examples" name="Examples"></h2>

<h3 id="Simple_example" name="Simple_example">シンプルな例</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;オーブンの温度: &lt;meter min="200" max="500"
  value="350"&gt;350 degrees&lt;/meter&gt;&lt;/p&gt;
</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample("Simple_example", 300, 60)}}</p>

<p>Google Chrome での表示結果は以下のようになります。</p>

<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p>

<h3 id="High_and_Low_range_example" name="High_and_Low_range_example">「高」の範囲と「低」の範囲の使用例</h3>

<p>この例では {{htmlattrxref("min", "meter")}} 属性が省略されています。よって、下限値は <code>0</code> となっています。</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;He got a &lt;meter low="69" high="80" max="100"
  value="84"&gt;B&lt;/meter&gt; on the exam.&lt;/p&gt;
</pre>

<h4 id="Result_2" name="Result_2">結果</h4>

<p>{{EmbedLiveSample("High_and_Low_range_example", 300, 60)}}</p>

<p>Google Chrome では、 meter の結果は次のように見えます。</p>

<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></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', 'forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("html.elements.meter")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{HTMLElement("progress")}}</li>
</ul>